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
Frequently Asked Questions
