Customizing In-app notification using React frontend library

In this tutorial we'll learn how to customize the Engagespot In-App Notification Center to render a custom notification item. By default, a notification item has the following look and feel.

It includes an icon, a title, and a message.

But this default component can be totally customized according to your requirements. Like the one below, with custom images, links and even action buttons.

In this tutorial, we'll learn how to customize this using Engagespot React component library. For this, first we need to install the engagespot react component library first.

npm i @engagespot/react-component  

After that, import the component to your React app

import { Engagespot } from "@engagespot/react-component";

Then, you can use the `renderNotificationBody` prop in the `Engagespot` component, which accepts a render function with the `notification` parameter. You can return a React component that will be rendered in the notification panel.

Define our custom Notification Components function NotificationHeading({ heading }) { return (

); } function NotificationAttachment({ attachmentIcon, downloadUrl, filename }) { return (

{filename}

); } function NotificationActionItems() { return (

Pay Now

); } function Notification({ notification }) { return ( <>); } { if (notification.data?.type === "invoice") { return ( <> ); } }} /> ``` ### Accessing custom data parameters In the above example, you can see that we're using several custom properties from the `notification.data` parameter. Wondering how this is done? It's simple. In the send notification API call from your backend, use the `data` property and pass as many key-value pairs as you need. Those will be available in the `notification.data` property in your front-end library. Here is a example on how to pass additional data properties to the send notification api using Node.js library ```javascript import { EngagespotClient } from "@engagespot/node"; const client = EngagespotClient({ apiKey:'ENGAGESPOT_API_KEY', apiSecret:'ENGAGESPOT_API_SECRET' }) client.send({ notification:{ title: "You received an invoice of $89.99 from Avian 🔥", icon: "https://cdn.support.mydomain.com/images/agent_x_profile.png" }, data:{ type:"invoice", filename:"Invoice-8495.pdf", attachmentIcon:"https://thumbs.dreamstime.com/b/document-attachment-line-icon-file-paper-clip-sign-vector-office-note-symbol-colorful-thin-outline-concept-linear-style-184912061.jpg", downloadUrl:"https://slicedinvoices.com/pdf/wordpress-pdf-invoice-plugin-sample.pdf" } recipients:['user@codesanbox.io'] }); ```