Vanilla JS | Novu Documentation

Learn how to integrate the Novu Inbox component into a Vanilla JS and HTML project.

This guide walks you through integrating Novu’s Inbox into your Vanilla JS and HTML project for in-app notifications in real-time, from setup to triggering your first notification. By the end, you'll have a working notification inbox.

Add Novu ESM script

Add the following code to your HTML file:

index.html

<!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">
    import { NovuUI } from "https://esm.sh/@novu/[email protected]/ui?bundle";
 
    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>

Change subscriberId and applicationIdentifier

In above code, replace NOVU_APPLICATION_IDENTIFIER with actual value and NOVU_SUBSCRIBER_ID with actual 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.

Run Your Application

Open index.html in your browser. You should see the Novu Inbox component with a bell icon.

Trigger your first notification

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:
- Subject: "Welcome to Novu"
- Body: "Hello, world! "
Once you’ve added the subject and body, close the editor.
Click Trigger.
Click Test Workflow.

Vanilla JS Quickstart Guide

Add Novu ESM script

Change subscriberId and applicationIdentifier

Run Your Application

Trigger your first notification

View the notification in your app

Next steps

Styling

Inbox and preferences UI components

Build Workflow

Multi Tenancy

On this page