​
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
AttributePurposeExamples
userIdUnique identifier of the user opening the notification center“john_08”
appIdRaven App ID. Go to Raven dashboard > Settings > AppIDddf001ae-035f-4414-8c72-6f71231e2205
signatureUnique signature generated for the user as described here
onClickNotificationMethod 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"])}}
colorThis 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)
indicatorTypeThis 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)
fontStyleCustom font family for the inapp center. Default will take your system font.‘Times’, ‘Courier’ etc (only strings)
displayStyledisplayStyle 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)
positionIf 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
Angular SDKSend Slack Message