Skip to main content
Add real-time in-app notifications to a Vanilla JS and HTML project using the Novu Inbox component.

Add Novu Inbox to my JavaScript app

Open in Cursor
1

​
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/js@3.11.0/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>
2

​
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.
If you pass a subscriberId that does not exist yet, Novu will automatically create a new subscriber with that ID.
3

​
Run Your Application

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

​
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.
  1. Go to your Novu dashboard.
  2. In the sidebar, click Workflows.
  3. Click Create Workflow. Enter a name for your workflow (e.g., “Welcome Notification”).
  4. Click Create Workflow to save it.
  5. Click the Add Step icon in the workflow editor and then select In-App as the step type.
  6. In the In-App template editor, enter the following:
    • Subject: “Welcome to Novu”
    • Body: “Hello, world! ”
  7. Once you’ve added the subject and body, close the editor.
  8. Click Trigger.
  9. Click Test Workflow.
5

​
View the notification in your app

Open index.html in your browser, then click the bell icon.You should see the notification you just sent from Novu! 🎉

​
Next steps

Styling

Customize the look and feel of your Inbox to match your application’s design.

Inbox and preferences UI components

Explore our full-stack UI components libraries for building in-app notifications.

Build Workflow

Design and manage advanced notification workflows.

Multi Tenancy

Manage multiple tenants within an organization.