> ## Documentation Index
> Fetch the complete documentation index at: https://novu-c5de82d9-docs-homepage-redesign.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Vanilla JS In-App Notifications Quickstart — Novu Inbox
> Learn how to integrate the Novu Inbox component into a Vanilla JS and HTML project.
Add real-time in-app notifications to a Vanilla JS and HTML project using the Novu Inbox component.
# Add Novu Inbox to JavaScript App
Install `@novu/js`. Mount the Inbox in your header, navbar, or sidebar.
Latest docs: [https://docs.novu.co/platform/quickstart/vanilla-js](https://docs.novu.co/platform/quickstart/vanilla-js)
## Install
```bash theme={null}
npm install @novu/js
```
## Component
```ts theme={null}
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'),
});
```
## Subscriber ID
Use the app's existing auth system to get a unique user identifier for subscriberId. If no auth system exists, use `YOUR_SUBSCRIBER_ID`.
## Appearance
Extract design tokens from the host app and apply via the appearance configuration. Only set values extracted from the host app's design system.
## Rules
ALWAYS:
* Detect the project's package manager and use it for installation
* Initialize Novu after DOM content is loaded
* Mount the Inbox inline in existing UI — no new pages or wrappers
* Use the existing auth system to source subscriberId when available
NEVER:
* Create wrapper components or new pages just for the inbox
* Pollute the global scope
* Introduce styles not in the host app
## Verify Before Responding
1. Is `@novu/js` installed with the project's package manager?
2. Is the Inbox mounted inline in existing UI?
3. Is subscriberId sourced from the auth system when available?
If any fails, revise.
### Add Novu ESM script
Add the following code to your HTML file:
```html title="index.html" theme={null}
Novu Inbox - Vanilla JS
Novu Inbox - Vanilla JS Demo
```
### Change subscriberId and applicationIdentifier
In above code, replace `NOVU_APPLICATION_IDENTIFIER` with actual applicationIdentifier value and `NOVU_SUBSCRIBER_ID` with actual subscriberId 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.
1. Go to your [Novu dashboard](https://dashboard.novu.co/auth/sign-in).
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**.
### 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
Customize the look and feel of your Inbox to match your application's design.
Explore our full-stack UI components libraries for building in-app notifications.
Design and manage advanced notification workflows.
Manage multiple tenants within an organization.