React SDK

Setup

Step 1 Before setting up the SDK, please make sure you have followed the steps to setup the Raven In-App Integration first. Step 2 Run the following commands your project root directory.

npm i @ravenapp/raven-inapp-react

Step 3 Inorder to start using InApp React SDK ,intialize library and import InAppNotificationCenter and styles.

import React from 'react'

import { InAppNotificationCenter, countService } from '@ravenapp/raven-inapp-react'
import '@ravenapp/raven-inapp-react/dist/index.css'

useEffect(() => {
    countService.intialize(
      <appId>,
      <userId>,
      <signature>
    )
}, [])

const App = () => {
  return (
    <InAppNotificationCenter
      color="<color>"
      indicatorType="<indicator_type>"
      fontStyle="<fontStyle>"
      displayStyle="<displayStyle>"
      position="<position>"
      onClickNotification="<callbackFunction_reference>"
    />
  )
}

export default App

Attribute	Purpose	Examples
userId	Unique identifier of the user opening the notification center	”john_08”
appId	Raven App ID. Go to Raven dashboard > Settings > AppID	ddf001ae-035f-4414-8c72-6f71231e2205
signature	Unique signature generated for the user as described here
onClickNotification	Method that handles notification click. Args: (clickAction, customData). ClickAction string and CustomData map will be provided in the template and passed to the handler. Use clickAction to identify what action to perform on click and customData to pass any additional data that might be useful to perfor the click action.	`(clickAction, customData) => { if (clickAction === "OPEN_ORDER_PAGE") { open("/orders", customData["orderId"])}}`
color	This is your primary color. It will get applied to the buttons and other UI components in the inapp center	’red’, ‘#FF0000’, ‘rgb(255,0,0)’ (only strings)
indicatorType	This attribute accepts only two values i.e ‘dot’, ‘count’. The ‘dot’ will show a dot on the bell icon whenever a new notification comes and the ‘count’ will show the count of new notifications.	‘dot’, ‘count’ (only strings)
fontStyle	Custom font family for the inapp center. Default will take your system font.	‘Times’, ‘Courier’ etc (only strings)
displayStyle	displayStyle can be either ‘drawer’ or ‘bubble’ or ‘fullScreen’. Bubble displays the notification list inside a popover. Drawer displays the notification list as full height on the right or left side of the screen depending on the position value. FullScreen comes with no bell-icon and inherits height and width from parent.	‘drawer’,‘bubble’ and ‘fullScreen’ (only strings)
position	If the displayStyle is ‘drawer’ then position accepts two values, i.e ‘left’ and ‘right’. If the display style is ‘bubble’ then position accepts three values, i.e ‘left’, ‘center’ and ‘right’.	‘left’, ‘right’, ‘center’ (only strings)

Do not forget to call deintialize method when user logs out otherwise user will receive notifications event after logging out. You can access the deintialize method by importing countService.
When display style is ‘fullScreen’, there will not be bell icon. Inorder to access new notification’s count, import the countService and subscribe the count.
When display style is ‘fullScreen’, you can remove the header by passing header= to the InAppNotificationCenter component. In that case, you can access to the unread count, mark all read, reload data by importing countService.
- deintialize - countService.deintialize()
- mark all read - countService.markAllRead()
- reload data - countService.reloadData()
- update last seen - countService.updateLastSeen() (call this function when displayStyle is ‘fullScreen’ and header = to update the last seen)

import React from 'react'

import { InAppNotificationCenter, countService } from '@ravenapp/raven-inapp-react'
import '@ravenapp/raven-inapp-react/dist/index.css'

useEffect(() => {
    countService.intialize(
      <appId>,
      <userId>,
      <signature>
    )
    countService.count.subscribe((res) => console.log(res))
    countService.unread.subscribe((res) => console.log(res))
}, [])

const App = () => {
  return (
    <InAppNotificationCenter
      color="<color>"
      indicatorType="<indicator_type>"
      fontStyle="<fontStyle>"
      displayStyle="<displayStyle>"
      position="<position>"
      onClickNotification="<callbackFunction_reference>"
    />
  )
}

export default App

In-App React Demo App

You can follow the below process to see the demo of In-App React SDK. Step 1 Clone this repo.

git clone https://github.com/ravenappdev/inapp-react-sdk.git

Step 2 Run this command in the root folder.

npm install

Step 3 Move to the example folder.

cd example

Step 4 Pass the userId, appId and signature values to the InAppNotificationCenter component in example/src/App.js. Step 5 Run the following command in the project root directory to start the app.

npm start

Please check the github repository for setting up locally.

Introduction

API Reference

Platform

SMS

Email

Push

WhatsApp

Voice

In-App

Chat

Setup

In-App React Demo App

​Setup

​In-App React Demo App

Setup

In-App React Demo App