If you are using a (currently) unsupported client framework, you can use our embedded script. This will generate the notification center inside an iframe
Copy
Ask AI
<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:
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.
Copy
Ask AI
<script> novu.on("notification_click", (notification) => { // do custom logic here }); novu.on("action_click", ({ templateIdentifier, type, notification }) => { // do custom logic here });</script>
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: