@suprsend/web-inbox

This package is used to integrate inbox channel in non react applications. For react application use @suprsend/react-inbox.

Documentation

Documentation can be found here: https://docs.suprsend.com/docs/embeddable-inbox

Integrate using script tag

This solution works if you are using applications like Django, Laravel, ruby.

<div id="suprsend-inbox"></div>

<script type="text/javascript">
  function initializeSuprSend(distinctId, subscriberId) {
    window.suprSendConfig = {
      workspaceKey: "your_workspace_key",
      distinctId: distinctId,
      subscriberId: subscriberId,
       .....
    };

    let scriptElem = document.createElement("script");
    scriptElem.async = 1;
    scriptElem.src =
      "https://web-inbox-assets.suprsend.com/v0.3.0.js";
    document.body.appendChild(scriptElem);
  }

  initializeSuprSend("your_distinct_id", "your_subscriber_id");
</script>

In above code replace your_distinct_id, your_subscriber_id,

your_workspace_key and SPECIFIC_VERSION variables with valid values.

Example code: https://github.com/suprsend/suprsend-web-inbox/blob/main/index.html

Integrate using NPM module

This solution work if you are using applications like angular, vue etc. If you are using server side rendering frameworks then render this inbox component after mounting on client side.

npm install @suprsend/web-inbox@latest

yarn add @suprsend/web-inbox@latest

import { initSuprSendInbox } from "@suprsend/web-inbox";

<div id="suprsend-inbox"></div>

const suprSendConfig= {
  workspaceKey: "your_workspace_key",
  distinctId: "your_distinct_id",
  subscriberId: "your_subscriber_id",
  ......
}

initSuprSendInbox(document.getElementById("suprsend-inbox"), suprSendConfig);

Calling initSuprSendInbox function will initialize inbox inside div tag.

To unmount inbox component manually you can use cleanSuprSend function provided in SDK.

const targetElement = docuent.getElementById("suprsend-inbox");
cleanSuprSend(targetElement);

Customising Inbox

For suprSendConfig (script and npm package) you can pass other options to customize.

Field	Type	Description
workspaceKey	string (Mandatory)	You can find it in SuprSend Dashboard inside Settings -> API Keys.
distinctId	any (Mandatory)	Unique identifier for the user.
subscriberId	string (Mandatory)	This is unique string for every distinctId used for authentication to inbox service. You check generation docs.
tenantId	string (Optional)	If you use multi-tenant architecture you can get inbox notifications for that specific tenant/brand only.
stores	IStore[] (Optional)	Pass stores array if you ant to use multi-tab feature.
pageSize	number (Optional)	Notifications to get in one api call. Used for pagination to get older notifications. Maximum allowed is 50. Defaults to 20.
pagination	boolean (Optional)	By default infinite scroll will be enabled to get older notifications on scroll. It can be disabled by passing false.

Other UI based options are:

interface ISuprSendInboxConfig { .... themeType?: 'light' | 'dark' hideInbox?: boolean hideToast?: boolean hideAvatar?: boolean notificationClickHandler?: (notificationData: any) => void toastProps?: IToastProps theme?: Dictionary popperPosition?: 'top' | 'bottom' | 'left' | 'right' }

const suprSendConfig = {
  workspaceKey: "your_workspace_key",
  distinctId: "your_distinct_id",
  subscriberId: "your_subscriber_id",
  tenantId: "testing",
  themeType: "dark",
  hideToast: true,
  theme: {
    bell: { color: "blue" },
    badge: { backgroundColor: "red", color: "black" },
  },
};

Details about these UI styling customizations can be found here: https://docs.suprsend.com/docs/react-customize-inbox

Blog

Deprecating Angular App Inbox towards web-inbox

Nik L.

@suprsend/web-inbox

Documentation

Integrate using script tag

Integrate using NPM module

Customising Inbox

Join Our Newsletter. No Spam, Only the good stuff.

Related