We have upgraded authentication of inbox from HMAC to JWT as it is more secure. Please migrate to newer SDK if you are on old one.
There are 2 ways in which you can implement inbox functionality:
Drop-in components: Pre-built UI with many customizable options which require minimal effort to build.
Headless implementation: For more advanced use cases where you want to build UI/UX from scratch.
This guide help you integrate drop-in components in your non-react frameworks (angular, vuejs, vanillajs etc). If you want to build your own UI (headless) instead of using drop-in components please refer docs.
This integration is used in framework based applications like angular, vuejs etc.
Copy
Ask AI
npm install @suprsend/web-components@latest
Copy
Ask AI
import { initSuprSend, clearSuprSend } from "@suprsend/web-components";// for dropin inbox with bell<div id="suprsend-inbox"></div>// for feed without bell as a fullscreen notification etc<div id="suprsend-feed"></div>const suprsendConfig = { distinctId: "YOUR_DISTINCT_ID", publicApiKey: "YOUR_PUBLIC_API_KEY", userAuthenticationHandler: ({ response }) => { console.log("User Authentication Response", response); },};initSuprSend(suprsendConfig) // for creating instance and rendering componentconsole.log("Instance created but user authentication pending", window.suprsend)
NOTE: If you are using suprsend-feed, specify height for the container for infinite scroll to work properly.
Components will be removed automatically if you navigate away from the page (on unmounting). If you want to remove them manually, you can use below methods.
Copy
Ask AI
window.suprsend.clearSuprSend(); // clears instance and remove all componentswindow.suprsend.clearSuprSendInbox(); // unmount only inbox componentwindow.suprsend.clearSuprSendFeed(); // unmount only feed component
SDK internally calls new SuprSend() when you call initSuprSend() then you can access instance using window.suprsend.client. This instance has methods like preferences, webpush, event and user updates.
Copy
Ask AI
// example methodswindow.suprsend.client.isIdentified();window.suprsend.client.user.addEmail(email: string);window.suprsend.client.track(event: string, properties?: Dictionary)window.suprsend.client.webpush.registerPush();window.suprsend.client.user.preferences.getPreferences(args?: {tenantId?: string});
Public API Key is mandatory field without which error will be thrown by SuprSendProvider. You can get this from SuprSend Dashboard.
distinctId
Unique identifier to identify a user across platform. If a value is passed SDK will create user and authenticate user. If null value is passed authenticated user’s instance data will be cleared in your application, kind of logout.
Mandatory when enhanced security mode is on. This is ES256 JWT token generated in your server-side. Refer docs to create userToken.
refreshUserToken
This function is called by SDK internally to get new userToken before existing token is expired. The returned JWT token string is used as the new userToken.
userAuthenticationHandler
This callback will be called after authenticating user internally when you pass distinctId field to give you back the response of user creation API call.
host
Customise the host url.
vapidKey
This key is needed only if you are implementing WebPush notifications. You can get it in SuprSend Dashboard —> Vendors —> WebPush
swFileName
This key is needed only if you are implementing WebPush notifications and want to customise default serviceworker.js file name with your own service worker file name.
For further component specific customisations please refer to the docs.
Assistant
Responses are generated using AI and may contain mistakes.