docs/platform/quickstart/vanilla-js.mdx
Add real-time in-app notifications to a Vanilla JS and HTML project using the Novu Inbox component.
<Prompt description="Add Novu Inbox to my JavaScript app" icon="sparkles" actions={["copy", "cursor"]}>
Install @novu/js. Mount the Inbox in your header, navbar, or sidebar.
Latest docs: https://docs.novu.co/platform/quickstart/vanilla-js
npm install @novu/js
import { NovuUI } from '@novu/js/ui';
const novu = new NovuUI({
options: {
applicationIdentifier: 'YOUR_APPLICATION_IDENTIFIER',
subscriber: 'YOUR_SUBSCRIBER_ID',
},
});
novu.mountComponent({
name: 'Inbox',
props: {},
element: document.getElementById('notification-inbox'),
});
Use the app's existing auth system to get a unique user identifier for subscriberId. If no auth system exists, use YOUR_SUBSCRIBER_ID.
Extract design tokens from the host app and apply via the appearance configuration. Only set values extracted from the host app's design system.
ALWAYS:
NEVER:
@novu/js installed with the project's package manager?If any fails, revise. </Prompt>
<Steps> <Step> ### Add Novu ESM script Add the following code to your HTML file:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Novu Inbox - Vanilla JS</title>
<!-- Novu Styles (important for proper UI rendering) -->
<link
rel="stylesheet"
href="https://unpkg.com/@novu/[email protected]/dist/index.css"
/>
<style>
/*
Example: hide the 3rd option in the Inbox status dropdown.
(We add stable custom classes via `appearance.elements.*` and then use plain CSS.)
*/
.hide-snooze-dropdown-item:nth-child(3) {
display: none !important;
}
.hide-snooze-button {
display: none !important;
}
</style>
</head>
<body>
<h2>Novu Inbox - Vanilla JS Demo</h2>
<!-- Mount point: Novu will inject Inbox UI here -->
<div id="novu-inbox"></div>
<!--
Novu UI for vanilla HTML:
- The published UI entrypoint is ESM and has dependencies (SolidJS, etc.)
- esm.sh bundles those deps so it can run directly in the browser.
-->
<script type="module">
document.addEventListener("DOMContentLoaded", () => {
const mountEl = document.getElementById("novu-inbox");
if (!mountEl) {
console.error("Missing #novu-inbox mount element");
return;
}
const novu = new NovuUI({
options: {
applicationIdentifier: "NOVU_APPLICATION_IDENTIFIER",
subscriberId: "NOVU_SUBSCRIBER_ID",
},
// to hide the snooze button and the 3rd option in the Inbox status dropdown
appearance: {
elements: {
notificationSnooze__button: "hide-snooze-button",
inboxStatus__dropdownItem: "hide-snooze-dropdown-item",
},
},
});
// Mount Inbox into #novu-inbox
novu.mountComponent({
name: "Inbox",
props: {
onNotificationClick: (notification) => {
console.log("notification clicked", notification);
},
},
element: mountEl,
});
// Optional cleanup example
window.addEventListener("beforeunload", () => {
novu.unmountComponent(mountEl);
});
});
</script>
</body>
</html>
In above code, replace NOVU_APPLICATION_IDENTIFIER with actual <Tooltip tip="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page.">applicationIdentifier</Tooltip> value and NOVU_SUBSCRIBER_ID with actual <Tooltip tip="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database.">subscriberId</Tooltip> value.
* applicationIdentifier – In the Novu dashboard, click API Keys, and then locate your unique Application Identifier.
* subscriberId – This represents a user in your system (typically the user's ID in your database). For quick start purposes, an auto-generated subscriberId is provided for your Dashboard user.
<Note>
If you pass a `subscriberId` that does not exist yet, Novu will automatically create a new subscriber with that ID.
</Note>
In this step, you'll create a simple workflow to send your first notification via the Inbox component. Follow these steps to set up and trigger a workflow from your Novu dashboard.
Go to your Novu dashboard.
In the sidebar, click Workflows.
Click Create Workflow. Enter a name for your workflow (e.g., "Welcome Notification").
Click Create Workflow to save it.
Click the Add Step icon in the workflow editor and then select In-App as the step type.
In the In-App template editor, enter the following:
Once you’ve added the subject and body, close the editor.
Click Trigger.
Click Test Workflow.
You should see the notification you just sent from Novu! 🎉
</Step> </Steps>