Vanilla JS In-App Notifications Quickstart - Novu Inbox

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

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">

    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.

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.

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.

Nuxt In-App Notifications Quickstart - Novu Inbox

Novu Inbox - In-App Notification Component for React

⌘I

Getting Started

Integrate <Inbox />

Integrate <Subscription />

Build a Workflow

Integrate Channels Providers

SDKs

Developer

Account

Build with AI

Additional Resources

Vanilla JS In-App Notifications Quickstart - Novu Inbox

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

​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

Add Novu ESM script

Change subscriberId and applicationIdentifier

Run Your Application

Trigger your first notification

View the notification in your app

Next steps