Customer Notifications

Displaying Customer Notifications with Clarity and Ease

Keeping customers informed about their account activities, such as points adjustments or new rewards, is essential for maintaining engagement. With the Customer Notifications API, you can easily fetch, manage, and display these notifications in a clear and meaningful way.

This guide will show you how to leverage the API to provide an intuitive notification experience, including:

• Fetching Customer Notifications: Retrieve a list of important updates and present them in a user-friendly format, with key details such as titles, messages, and their read status.

• Managing Notifications with Pagination: When dealing with a large number of notifications, pagination helps break them down into easily navigable chunks, making it easier for users to stay on top of their updates.

• Customizing Notifications: Tailor the experience by offering language options and adjusting the design for better accessibility and engagement.

• Marking Notifications as Read: Allow customers to mark notifications as read, ensuring they can easily keep track of what’s new and what they’ve already seen.

By following this guide, you'll be able to provide a seamless notification experience that keeps your users informed and engaged, enhancing their overall experience with your app or website.

---

1️⃣ Step 1: Fetch Customer Notifications

To fetch the customer notifications, use the Get Customer Notifications API. This will return a list of notifications for the customer.

Response Body:

{
    "notifications": [
        {
            "notificationId": "15227561",
            "title": "Congratulations!",
            "body": "Buy over 500$ and get 10$ 💰 earned. Enjoy your rewards and keep earning more!",
            "isRead": false,
            "createdAt": "2024-11-19T13:39:13.792Z",
            "lang": "en",
            "icon": "https://cdn.gameball.co/uploads/Client_9423/2b2efc2f-b85e-4cce-baf6-380454e4d62ccash.webp"
        },
        {
            "notificationId": "15227560",
            "title": "Congratulations!",
            "body": "First Order earned. Enjoy your rewards and keep earning more!",
            "isRead": false,
            "createdAt": "2024-11-19T13:39:13.067Z",
            "lang": "en",
            "icon": "https://cdn.gameball.co/uploads/Client_9423/1de5b89b-a7c4-44d9-a9cb-5e374e051938order.webp"
        },
        {
            "notificationId": "15227558",
            "title": "Congratulations!",
            "body": "You have received 100 Points for your last order. Your current Points balance is 100.",
            "isRead": true,
            "createdAt": "2024-11-19T13:39:11.104Z",
            "lang": "en",
            "icon": "https://cdn.gameball.co/uploads/Notifications/cachback.webp"
        },
        {
            "notificationId": "15227475",
            "title": "Congratulations!",
            "body": "Welcome to the family 👯‍♂️ earned. Enjoy your rewards and keep earning more!",
            "isRead": true,
            "createdAt": "2024-11-19T13:28:50.1Z",
            "lang": "en",
            "icon": "https://cdn.gameball.co/uploads/Client_9423/432841da-4398-48c5-ada3-e3a60f081dd1family2.webp"
        }
    ],
    "count": 4,
    "hasMore": false
}

What Happens on the Frontend:

• Render notifications in a list format with the notification title and body.

• Include the notification icon (optional) for visual appeal.

• Display whether the notification has been read or not.

Customizing and Navigating Notifications

Pagination in Customer Notifications

If your application involves displaying a large number of notifications, you can take advantage of pagination to break the notifications into manageable chunks. In the response, you'll see three useful attributes to help with pagination:

• count: The number of notifications returned in the current response (this corresponds to the number of items on the current page).

• hasMore: a boolean that indicates if there are more notifications that can be fetched.

For example, if you have more than one page of notifications, the count tells you how many notifications are displayed on that specific page. The hasMore attribute specifies whether there are more notifications to display to the user. It is used to indicate if additional notifications are available beyond those currently shown.

This allows you to implement a paging system in your UI, enabling users to navigate through pages of notifications. For example:

• On the first page, you might show notifications 1-10.

• If there are more notifications, you can show a "Next" button to fetch the next page (using the hasMore).

• If you're on the last page, you can show a "Previous" button to go back.

This keeps the notifications section user-friendly and ensures you don’t overwhelm users with too much data at once.

---

Customizing Notifications by Language

By default, notifications are returned in the system’s default language, indicated by the lang attribute in the API response. However, if your customers want to see notifications in a different language (e.g., French or Spanish), you can provide them the option to do so.

To fetch notifications in a different language, you simply need to pass the desired language code as a query parameter in your request. For instance:

• English notifications would be fetched with lang=en.

• Spanish notifications would be fetched with lang=es.

When you pass the language parameter, the API will return the notifications in the requested language (if available), ensuring that your users get a more personalized experience.

For example, the request URL to fetch notifications in Spanish would look like this:

https://api.gameball.co/api/v4.0/integrations/customer/{customerId}/notifications?lang=es

By offering this feature, your app can cater to a broader audience and ensure that notifications are clear and accessible to all customers, regardless of their preferred language.

---

2️⃣Step 2: Mark Notifications as Read

When the customer views their notifications, you might want to mark them as read. This can be done through the Mark Notifications as Read API. You'll need to pass the notificationId for each notification that you want to mark as read.

Request Body:

{
    "notificationsIds": [15227561,15227560]
}

What Happens on the Frontend:

• Once the notification is marked as read, update its status visually (e.g., changing the color or icon) to reflect that it's been read.