React

Integrating SuprSend Inbox channel in React websites can be done in two ways:

• SuprSendInbox component which comes with UI and customizing props.
• SuprSendProvider headless component and hooks, incase you want to totally take control of UI. (example: Full page notifications).

This document will cover the methods to integrate Suprsend SDK in your React applications using SuprSendInbox. Adding this SDK to your app will introduce a bell icon where all the inbox notifications can be viewed. A typical inbox, toast message will look like this.

Stage 1. Bell icon count and toast message as soon as the notification is delivered

Stage 2. Inbox view after clicking on the bell icon

You can also customize your inbox based on simple customization options available in our SDK

Installation

You can install SuprSend inbox SDK using npm/yarn

npm i @suprsend/react-inbox

yarn add @suprsend/react-inbox

Integration

📘

Migrating to v3.x.x

From v3.2.0 you have to add react-toastify css file in your code if you are using toast notifications as shown in below code snippet.

After installing, Import the component in your code and use it as given below. Replace the variables with actual values.

import SuprSendInbox from '@suprsend/react-inbox'
import 'react-toastify/dist/ReactToastify.css' // needed for toast notifications, can be ignored if hideToast=true

// add to your react component
<SuprSendInbox
  workspaceKey= "<workspace_key>"
  subscriberId= "<subscriber_id>"
  distinctId= "<distinct_id>"
/>

interface ISuprSendInbox {
  workspaceKey: string
  distinctId: string | null
  subscriberId: string | null
  tenantId?: string
  stores?: IStore[]
  pageSize?: number
  pagination?: boolean
  ...
}

We use react-toastify internally to show toast notifications. So importing toastify styles is needed. This can be ignored if toast notifications are not used ie.. hideToast = true.