Customer Notifications

In your application, you may want to display customer notifications to keep them informed about their account activities, such as points adjustments or rewards. You can fetch and manage these notifications through the Customer Notifications API.

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,
    "total": 4,
    "pageNumber": 1
}

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).

• total: The total number of notifications across all pages.

• pageNumber: The current page number in the list of notifications.

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 total will let you know the total number of notifications available across all pages. The pageNumber helps you track which page you're on.

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 next pageNumber).

• 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.