If you are using a (currently) unsupported client framework, you can use our embedded script. This will generate the notification center inside an iframe

<script>
  (function (n, o, t, i, f) {
    n[i] = {};
    var m = ["init", "on"];
    n[i]._c = [];
    m.forEach(
      (me) =>
        (n[i][me] = function () {
          n[i]._c.push([me, arguments]);
        })
    );
    var elt = o.createElement(f);
    elt.type = "text/javascript";
    elt.async = true;
    elt.src = t;
    var before = o.getElementsByTagName(f)[0];
    before.parentNode.insertBefore(elt, before);
  })(
    window,
    document,
    "https://embed.novu.co/embed.umd.min.js",
    "novu",
    "script"
  );

  novu.init(
    "APPLICATION_IDENTIFIER",
    {
      unseenBadgeSelector: "#unseen-badge",
      bellSelector: "#notification-bell",
    },
    {
      subscriberId: "SUBSCRIBER_ID",
      email: "SUBSCRIBER_EMAIL",
      first_name: "SUBSCRIBER_FIRST_NAME",
      last_name: "SUBSCRIBER_LAST_NAME",
    }
  );
</script>

Replace the selectors for the bell icon and the unseen badge within your code. Let’s take a look at this example code:

<nav>
  <div id="notification-bell">
    <i class="fa fa-bell"></i>
    <span id="unseen-badge"></span>
  </div>
</nav>

​
Customizing the dropdown position

Optionally, the embedded init script receives a position object, you can use this to specify the left and top position of the notification center.

<script>
  novu.init(
    "APPLICATION_IDENTIFIER",
    {
      unseenBadgeSelector: "#unseen-badge",
      bellSelector: "#notification-bell",
      position: {
        top: "50px",
        left: "100px",
      },
    },
    {
      ...subscriberProps,
    }
  );
</script>

​
Customizing the theme

The notification center component can be customized by passing a theme to the init script. Checkout all possible theme properties.

<script>
  const customTheme = {
    light: {
      layout: {
        background: "red",
      },
    },
  };

  novu.init(
    "APPLICATION_IDENTIFIER",
    {
      unseenBadgeSelector: "#unseen-badge",
      bellSelector: "#notification-bell",
      theme: customTheme,
    },
    {
      ...subscriberProps,
    }
  );
</script>

​
Customizing the UI language

The language of the UI can be customized by passing an i18n component to the init script. More information on all possible properties.

<script>
  const customLanguage = {
    lang: "en",
    translations: {
      notifications: "My custom notifications!",
    },
  };

  novu.init(
    "APPLICATION_IDENTIFIER",
    {
      unseenBadgeSelector: "#unseen-badge",
      bellSelector: "#notification-bell",
      i18n: customLanguage,
    },
    {
      ...subscriberProps,
    }
  );
</script>

​
Handle User Interaction

In order to handle certain events like the user clicking on the notification, or clicking on an action button inside a notification, you can listen for these events and handle them accordingly.

<script>
  novu.on("notification_click", (notification) => {
    // do custom logic here
  });

  novu.on("action_click", ({ templateIdentifier, type, notification }) => {
    // do custom logic here
  });
</script>

​
Enabling HMAC Encryption

In order to enable Hash-Based Message Authentication Codes, you need to visit the admin panel’s In-App settings page and enable HMAC encryption for your environment.

The next step would be to generate an HMAC encrypted subscriberId on your backend:

import { createHmac } from "crypto";

const hmacHash = createHmac("sha256", process.env.NOVU_API_KEY)
  .update(subscriberId)
  .digest("hex");

Then pass the created HMAC to your client side application forward it to the embed initialization script:

<script>
  novu.init(
    "APPLICATION_IDENTIFIER",
    {
      unseenBadgeSelector: "#unseen-badge",
      bellSelector: "#notification-bell",
      position: {
        top: "50px",
        left: "100px",
      },
    },
    {
      subscriberId: "SUBSCRIBER_ID_PLAIN_VALUE",
      subscriberHash: "SUBSCRIBER_ID_HASH_VALUE",
    }
  );
</script>

​
Example

Edit novu-iframe-nc

​
Frequently Asked Questions

Was this page helpful?

Web ComponentGet Started