React In-App SDK

The In-App React SDK is a powerful tool that allows you to seamlessly integrate Fyno’s notification center into your React-based applications. With this SDK, you can enhance your user’s experience by providing them with a feature-rich and customisable notification center.

Installation

To get started with In-App React SDK, you’ll need to install it using NPM

$
npm install @fyno/inapp-react

Usage

Before you dive into using the In-App Notification Center, there are some prerequisites you need to fulfill. You must ensure you have the necessary information and generate an HMAC signature.

Prerequisites

Before you start, make sure you have the following information ready

• Workspace ID (WSID): You can find your workspace ID on your Fyno App > API Keys page.
• Integration Token: Obtain the integration token from the Fyno App > Integrations page.
• User ID: This should be a unique identifier for the currently logged-in user. This user ID is crucial for Fyno to send specific notifications to the right users.

HMAC Signature Generation

The HMAC signature is essential for ensuring the security and integrity of your notifications. Here are examples of how to generate the HMAC signature in various programming languages

1
import crypto from 'crypto'; //module
2
//or
3
// const crypto = require('crypto') //commonjs
4
const signature = crypto
5
  .createHmac('sha256', 'WSID' + 'INTEGRATION_TOKEN')
6
  .update('USER_ID')
7
  .digest('hex');

SDK Initialisation

To use the SDK in your React application, you can import FynoInappCenter and configure it as follows

1
import { FynoInappCenter } from '@fyno/inapp-react'
2
3
class Example extends Component {
4
  // Incoming notification listener
5
  const onMessageReceived = () => {
6
  //Handle incoming notification data
7
  }
8
  const config = {
9
    mode: 'THEME_MODE', // Choose between 'light' or 'dark'
10
    user: 'USER_ID',
11
    workspace: 'WSID',
12
    integration: 'INTRGRATION_ID',
13
    signature: 'signature',
14
    themeConfig: {
15
      logo: 'LINK_TO_BRAND_LOGO',
16
      primary: 'PRIMARY_COLOR',
17
      lightBackground: 'LIGHT_THEME_BACKGROUND_COLOR',
18
      darkBackground: 'DARK_THEME_BACKGROUND_COLOR',
19
      header: 'Notifications', // Optional: If specified, a header will be shown
20
    },
21
    notificationSettings: {
22
      sound: 'LINK_TO_NOTIFICATION_SOUND',
23
      invertTheme: false, // Set to true for inverted theme
24
    },
25
    onMessageReceived
26
  }
27
28
  render() {
29
    return <FynoInappCenter {...config} />
30
  }
31
}

Feel free to customise the configuration to match your application’s requirements.

That’s it! You’re now ready to integrate and use Fyno’s In-App Notification Center in your React application.