docs/.mintlify/skills/inbox-integration/references/headless-inbox-examples.md
Use @novu/js for vanilla JavaScript applications or when you want full control over the UI.
npm install @novu/js
import { Novu } from "@novu/js";
const novu = new Novu({
applicationIdentifier: "YOUR_NOVU_APP_ID",
subscriberId: "subscriber-123",
subscriberHash: "hmac-hash-from-server",
});
const { data: notifications } = await novu.notifications.list({
limit: 20,
});
notifications.forEach((notification) => {
console.log(notification.subject, notification.body, notification.read);
});
// with single filter
const count = await novu.notifications.count({
read: false,
seen: false,
archived: false,
severity: SeverityLevelEnum.HIGH,
// data attributes
data: {
type: 'login',
},
});
// with multiple filters
const counts = await novu.notifications.count({
filters: [
{ read: false },
{ seen: false },
{ severity: SeverityLevelEnum.HIGH }
{ archived: true },
{ tags: ['tag1'] },
{ data: { type: 'login' } }
],
});
// Single notification
await novu.notifications.read(notificationId);
// All notifications
await novu.notifications.readAll();
await novu.notifications.unread(notificationId);
await novu.notifications.archive(notificationId);
await novu.notifications.archiveAll();
await novu.notifications.unarchive(notificationId);
await novu.notifications.completePrimary(notificationId);
await novu.notifications.completeSecondary(notificationId);
await novu.notifications.snooze(notificationId, { duration: "1h" });
await novu.notifications.unsnooze(notificationId);
await novu.notifications.delete(notificationId);
await novu.notifications.deleteAll();
// List preferences
const { data: preferences } = await novu.preferences.list();
// Update a workflow preference
await novu.preferences.update({
channels: { email: true, push: true },
workflowId: "workflow-id",
});
The @novu/js client automatically maintains a WebSocket connection for real-time notification updates. No additional configuration is needed.
<div id="notification-count"></div>
<div id="notification-list"></div>
<script type="module">
import { Novu } from "@novu/js";
const novu = new Novu({
applicationIdentifier: "YOUR_NOVU_APP_ID",
subscriberId: "subscriber-123",
subscriberHash: "hmac-hash",
});
// Render notifications
async function renderNotifications() {
const { data: notifications } = await novu.notifications.list({ limit: 10 });
const list = document.getElementById("notification-list");
list.innerHTML = notifications
.map(
(n) => `
<div class="notification ${n.read ? "read" : "unread"}">
<strong>${n.subject || ""}</strong>
<p>${n.body}</p>
</div>
`
)
.join("");
// Update count
const { data: counts } = await novu.notifications.count({ read: false });
document.getElementById("notification-count").textContent = counts.count;
}
renderNotifications();
</script>