# Novu Vanilla JS Quickstart Guide (/platform/quickstart/vanilla-js)
Learn how to integrate the Novu Inbox component into a Vanilla JS and HTML project.
import { Accordion, Accordions } from '@/components/accordion';
import {
BuildWorkflowStep,
CreateAccountStep,
CreateSubscriberStep,
TriggerNotificationStep,
} from '@/components/quickstart/common-steps';
import { Step, Steps } from '@/components/steps';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import {
Code2,
Library,
Palette,
Workflow
} from 'lucide-react';
import { CodeTemplateBlock } from '@/components/quickstart/inbox-code';
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:
```html title="index.html"
Novu Inbox - Vanilla JS
Novu Inbox - Vanilla JS Demo
```
### Change subscriberId and applicationIdentifier
In above code, replace `NOVU_APPLICATION_IDENTIFIER` with actual :tooltip\[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} value and `NOVU_SUBSCRIBER_ID` with actual :tooltip\[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."} 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.
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
} href="/inbox/react/styling">
Customize the look and feel of your Inbox to match your application's design.
} href="/platform/inbox">
Explore our full-stack UI components libraries for building in-app notifications.
} href="/platform/workflow">
Design and manage advanced notification workflows.
} href="/platform/concepts/tenants">
Manage multiple tenants within an organization.