Integrations

SendBlocks provides two types of notifications:

• Personal Notifications - delivered directly to an individual user's Telegram.
• Community Notifications - broadcasted to a group or channel on any communication platform.

Supported integrations

Personal Notifications:

• Fully embedded web component to be integrated easily inside any website frontend.
• External Notifications Portal - a SendBlocks hosted white label notifications portal for your dApp.

Community Notifications:

• Direct Streaming to a Bot - create any notification for your community, whether it's telegram/discord or something else we got you covered.

Community notifications & White label fully hosted portal

Since those are fully managed by SendBlocks, no integration is needed. The only thing left is to define which kind of notifications your users need and where should we send them. You can explore our examples to learn more.

Fully embedded component integration

SendBlocks provides an embeddable web component following the open-wc recommendation. This allows us to be framework agnostic while still keeping integration simple and smooth. To showcase that we present a simple guide to embedding the component in a React app with the Wagmi library. Similar techniques can be easily with other frameworks and libraries.

Wallet authentication

For seamless integration, we rely on your dApp's wallet connect component to link our notifications to the owner of a specific wallet. This connection is necessary for users to customize and manage their notifications, ensuring that only the wallet owner can make adjustments. No transactions or on-chain actions are required for this integration.

Creating a React component

To integrate our notification system into your React app, we suggest that the notification dialog should only be available once the wallet is connected. Below is an example of how to create such a notification button.

1. Create a component that wraps the Notification component and renders it only if the user is connected to a wallet (in this example, it’s a simple button):

import { useAccount, useSignMessage } from 'wagmi';

const NotificationsButton = (props) => {
  const { address, isConnected } = useAccount(); // Get the user's address and connection status from WAGMI
  const { signMessage } = useSignMessage(); // Get a signing function from Wagmi

  const signFunc = async (data: any) => { // signFunc that should be passed to the Notifications component, and signing the data with the user's wallet
    return signMessage(data);
  };

  const config = ... // dApp specific JSON configuration, to be loaded from a file or API, provided by SendBlocks

  return (
    <div>
      {isConnected ? (
        <>
          <button
            onClick={() => {
              const n = document.querySelector('sb-notifications-dialog');
              n.init(address, signFunc, config);
              n.show();
            }}
            >
            Notifications
          </button>
        </>
      ) : (
        <></>
      )}
    </div>
  );
};

export { NotificationsButton };

2. Add the NotificationsButton component to your application (for example, in the Header bar)

Configuration

Your configuration specifies which notifications are available to users and what parameters they can customize. These configurations can either be hosted by us or integrated directly into your app. Below is an example configuration for a liquidation alert, featuring a threshold parameter.

{
  clientConfig: {
      notifications: [
        {
          notificationType: 'Liquidation alert',
          // ID that represnts the functionality of the notification
          template_id: '12345678-1234-1234-1234-123456789abc',
          supportMultipleInstances: false,
          // Notification parameters
          params: [
            [
              {
               type: 'number',
               name: 'threshold',
               label: 'Health factor threshold'
                min: 1
            ]
          ]
        },
      ]
  },
  serverConfig: {
    // API endpoint and your tenant id, to connect to SendBlocks api
  }
}

HTML Integration

As previously mentioned, we adhere to Web Component best practices to ensure seamless integration with any framework. To incorporate our component into your application, please follow these steps:

1. Add the source script to your HTML file (replace <SENDBLOCKS_PATH> with the actual path, provided by SendBlocks):

   HTML

   <script src="<SENDBLOCKS_PATH>/sb-notifications-dialog.js" type="module"></script>
   

2. Add the component to your HTML file:

<sb-notifications-dialog />

CSS

Since our component is fully embeddable in your dApp, you can easily customize its styling to match your unique design and branding.

To achieve this, simply override the default CSS styles of our notification component. Here's how:

1. Create a CSS file with the styles you want to override.

    :root {
        /* Example of custom styles */
        --sb-font-family: 'Inter';
        --sb-dialog-body-background: #1e2430;
        --sb-dialog-primary
        --sb-dialog-primary-button-background: #f35d00;
    }

2. Add the CSS file to your HTML file (replace with the actual path):

<link rel="stylesheet" href="<PATH>/custom-styles.css" />