Fyno In-app React SDK: This React library allows you to easily integrate Fyno's in-app notification center into your React application.
- Display notifications from Fyno within your React app
- Customizable notification center appearance
- Manage user preferences
npm install --save @fyno/inapp-react
Before installing the In-app Notification Center, make sure you have generated the HMAC signature in the backend by following the process below. Ensure you replace the placeholder values with actual ones.
- Workspace ID (WSID): Obtain from your Fyno Workspace Settings page.
- Integration ID: Get integration ID from the Integrations page.
- Integration Token: Get Integration Token from the Integrations page.
- User ID: This should be the unique identifier of the currently logged-in user, enabling Fyno to send user-specific notifications.
- JavaScript - Node
import crypto from 'crypto'
const signature = crypto
.createHmac('sha256', 'WSID' + 'INTEGRATION_TOKEN')
.update('USER_ID')
.digest('hex')
- JavaScript - Browser
const crypto = require('crypto-js')
const secretKey = 'WSID' + 'INTEGRATION_TOKEN'
const userId = 'USER_ID'
const signature = CryptoJS.HmacSHA256(userId, secretKey).toString(
CryptoJS.enc.Hex
)
- Python
import hashlib
import hmac
secret_key = b'WSID'+b'INTEGRATION_TOKEN'
user_id = 'USER_ID'
signature = hmac.new(secret_key, user_id.encode('utf-8'), hashlib.sha256).hexdigest()
- Java
import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.StandardCharsets;
public class SignatureExample {
public static void main(String[] args) throws Exception {
String secretKey = "WSID" + "INTEGRATION_TOKEN";
String userId = "USER_ID";
Mac mac = Mac.getInstance("HmacSHA256");
SecretKeySpec secretKeySpec = new SecretKeySpec(secretKey.getBytes(StandardCharsets.UTF_8), "HmacSHA256");
mac.init(secretKeySpec);
byte[] hash = mac.doFinal(userId.getBytes(StandardCharsets.UTF_8));
StringBuilder hexString = new StringBuilder();
for (byte b : hash) {
String hex = String.format("%02x", b);
hexString.append(hex);
}
String signature = hexString.toString();
}
}
- PHP
$secretKey = 'WSID'.'INTEGRATION_TOKEN';
$userId = 'USER_ID';
$signature = hash_hmac('sha256', $userId, $secretKey);
- Ruby
require 'openssl'
secret_key = 'WSID'+'INTEGRATION_TOKEN'
user_id = 'USER_ID'
signature = OpenSSL::HMAC.hexdigest(OpenSSL::Digest.new('sha256'), secret_key, user_id)
- C#
using System;
using System.Security.Cryptography;
using System.Text;
class Program
{
static void Main()
{
string secretKey = "WSIDINTEGRATION_TOKEN";
string userId = "USER_ID";
using (HMACSHA256 hmac = new HMACSHA256(Encoding.UTF8.GetBytes(secretKey))
{
byte[] hash = hmac.ComputeHash(Encoding.UTF8.GetBytes(userId));
string signature = BitConverter.ToString(hash).Replace("-", "").ToLower();
}
}
}
NOTE: Ensure you generate the signature on the backend to avoid exposing your API keys.
import {FynoInappCenter} from '@fyno/inapp-react'
class Example extends Component {
const config = {
mode: 'THEME_MODE',//<light|dark>
userId: 'USER_ID',
workspaceId: 'WSID',
integration: 'INTRGRATION_ID',
signature: 'signature'
themeConfig: {
logo: 'LINK_TO_BRAND_LOGO',
primary: 'PRIMARY_COLOR',
lightBackground: 'LIGHT_THEME_BACKGROUND_COLOR',
darkBackground: 'DARK_THEME_BACKGROUND_COLOR',
header: 'Notifications', // Specify a header title. Default: For better UX we defaulted to No header.
// Advanced theme configuration
position: 'left|right', // By default, the notification center opens as a menu dropdown. Use 'left' or 'right' to open it to the side.
offset: '0', // Used only with 'left' or 'right' position. Specifies the width of your side navigation pane.
preference_mode: 'none|embed|modal', // Default: 'none'. If 'embed', user preferences are shown within the notification center. If 'modal', preferences appear in a separate window.
globalChannels: '<ARRAY_OF_CHANNELS>', //To let users opt-out communication from a specific channel globally you can use this setting to mention the channels in an array. Ex.['sms', 'whatsapp']
},
notificationSettings: {
sound: 'LINK_TO_NOTIFICATION_SOUND',
invertTheme: false // Set to true for notification toast with inverted theme.
}
}
render() {
return <FynoInappCenter {...config}/>
}
}
OR
import {FynoInappCenter} from '@fyno/inapp-react'
class Example extends Component {
const themeConfig: {
logo: 'LINK_TO_BRAND_LOGO',
primary: 'PRIMARY_COLOR',
lightBackground: 'LIGHT_THEME_BACKGROUND_COLOR',
darkBackground: 'DARK_THEME_BACKGROUND_COLOR'
}
const notificationSettings = {
sound: 'LINK_TO_NOTIFICATION_SOUND',
invertTheme: false // Set to true for notification toast with inverted theme.
}
render() {
return <FynoInappCenter theme="light" user="{userid}" workspace="{workspace_id}" integration="{integration_id}" signature="{signature generated from backend}" themeConfig={themeConfig} notificationSettings={notificationSettings}/>
}
}