.nv-snippet-window-wrapper.terminal-cqc4oo {
    position: absolute;
    font-size: .875rem;
    font-family: var(--nv-monospace-font)
}

.nv-snippet-window-wrapper.is-noninteractable.terminal-cqc4oo {
    opacity: 1;
    -webkit-user-select: none;
    user-select: none;
    -moz-user-select: -moz-none;
    transition: opacity .1s ease, filter .1s ease
}

.nv-snippet-window-wrapper.is-noninteractable.terminal-cqc4oo:hover {
    opacity: .3;
    filter: blur(2px)
}

.is-selectable.terminal-10kv6jm .nv-completion-item.terminal-10kv6jm:hover {
    background: var(--nv-bg-light) !important
}

#nv-terminal {
    position: relative;
    width: 100%;
    height: 600px;
    max-width: 700px;
    box-shadow: 0 4px 8px -2px #0f111a29, 0 10px 15px -4px #0f111a29, 0 30px 32px -15px #0f111a29, 0 60px 64px -25px #0f111a29
}

#nv-terminal.terminal-1dfudv>.nv-code-content.terminal-1dfudv .line {
    min-width: 60ch
}

.nv-terminal-tabs.terminal-1dfudv.terminal-1dfudv {
    display: flex;
    border-radius: 8px 8px 0 0;
    padding: 0 4px;
    border-bottom: 1px solid #444
}

button.nv-terminal-tab.terminal-1dfudv.terminal-1dfudv {
    position: relative;
    font-family: inherit;
    border: 0;
    background: none;
    color: #99a;
    font-size: 1rem;
    padding: .5rem .75rem
}

button.nv-terminal-tab.is-active.terminal-1dfudv.terminal-1dfudv {
    color: #dde
}

button.nv-terminal-tab.is-active.terminal-1dfudv.terminal-1dfudv:after {
    position: absolute;
    top: 0;
    bottom: -1px;
    left: calc(.75rem - 2px);
    right: calc(.75rem - 2px);
    content: "";
    border-bottom: 1px solid #ffffff7f
}

button.nv-terminal-tab.terminal-1dfudv.terminal-1dfudv:hover {
    color: #dde
}


@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

.nv-code {
  display: flex;
  flex-direction: column;
  --nv-color: #f9fafc;
  --nv-monospace-font: 'Source Code Pro', 'Monaco', 'Consolas', monospace;
  --nv-bg: #27292e;
  --nv-bg-light: #373a3f;
  --nv-border-color: rgb(73, 76, 95);
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--nv-monospace-font);
  line-height: 1.35;
  color: var(--nv-color);
  border: 1px solid #555;
  background: var(--nv-bg);
  border-radius: 8px;
  box-shadow: 0px 1px 3px 1px rgba(17, 19, 33, 0.4);
}

.nv-code kw {
  color: rgb(255 225 77);
}
.nv-code fn {
  color: rgb(255 51 222);
}
.nv-code str {
  color: rgb(0 213 255);
}
.nv-code id {
  color: #ffcc4a;
}
.nv-code sp {
  color: #6fedb7;
}
.nv-code const {
  color: #b486fd;
}
.nv-code comment {
  color: #8f9397;
}

.nv-code .nv-code-content {
  padding: 0.75rem;
  overflow: auto;
  flex: 1;
}

.nv-code .line {
  display: block;
  font-family: var(--nv-monospace-font);
  margin: 0;
  white-space: pre;
}

.nv-code .line-number {
  display: inline-block;
  font-family: var(--nv-monospace-font);
  width: 2ch;
  text-align: right;
  margin-right: 1ch;
  opacity: 0.5;
  user-select: none;
}

.nv-code .nv-completion-heading {
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  background: var(--nv-bg-light);
}

.nv-code .nv-completion-items {
  padding: 0.25rem 0;
}

.nv-code .nv-completion-item {
  padding: 0.25rem 0.5rem;
  white-space: pre-wrap;
}

.nv-code .nv-completion-item.is-active {
  background-color: var(--nv-bg-light);
}

.nv-code .nv-completion-icon {
  display: inline-block;
  vertical-align: middle;
  margin: -0.25rem 0;
}

.nv-code .nv-completion-description {
  padding: 0.5rem 0.5rem;
  border-top: 1px solid var(--nv-border-color);
}

.nv-code .nv-cursor {
  font-family: var(--nv-monospace-font);
  color: white;
  position: absolute;
  transform: translateX(-45%);
  font-size: 0.875rem;
  animation: nv-cursor-blinker 1s step-start infinite;
}

.nv-code .nv-cursor::before {
  content: '│';
}

.nv-code span.hover {
  background-color: var(--nv-bg-light);
  outline: 1px solid #aac;
}

.nv-code span.hover.is-active {
  background-color: var(--nv-bg);
}

.nv-code .nv-snippet-window {
  font-size: 0.875rem;
  font-family: var(--nv-monospace-font);
  display: block;
  background-color: var(--nv-bg);
  border: 1px solid var(--nv-border-color);
  border-radius: 5px;
  min-width: 20ch;
  max-width: 50ch;
  whitespace: pre-wrap;
  overflow-wrap: break-word;
  box-shadow: 0px 1px 2px 1px rgba(17, 19, 33, 0.3);
}

.nv-code .nv-snippet-window.is-pop {
  animation: nv-snippet-window-pop-in 0.3s forwards ease;
}
.nv-code .nv-snippet-window-wrapper hr {
  box-sizing: content-box;
  height: 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-color: var(--nv-color);
}

@keyframes nv-snippet-window-pop-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.05);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes nv-cursor-blinker {
  50% {
    opacity: 0;
  }
}


_linkedin_partner_id = "5915650";
window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
window._linkedin_data_partner_ids.push(_linkedin_partner_id);


(function (w, d, s, l, i) {
  w[l] = w[l] || [];
  w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
  var f = d.getElementsByTagName(s)[0],
    j = d.createElement(s),
    dl = l != "dataLayer" ? "&l=" + l : "";
  j.async = true;
  j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
  f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-KXMC4XP2");


Installation

Authorization

Novu

<Inbox />

Integrations

API Reference

SDKs

Recipes

Community

Get Started

Blog

Contact us

v0.x

Novu’s Vue library provides a Vue component wrapper over the Notification Center Web that you can use to integrate the notification center into your Vue application. 

Vue library

Novu is a full-stack (UI Components, API, and Framework) open source notification infrastructure platform for building, managing, delivering, and monitoring all types of end-user notifications.

What is Novu

How Novu Works

Change notification messaging, verbiage, and cadence without requiring engineering's help by using the Novu Dashboard UI.

For Non-Developers

No-Code tools to manage your notifications

Start building with Novu by following our Quick Start guides. These guides provide step-by-step instructions for integrating Novu into your application.

Overview

Quickstart

Next.js

How to send notifications with Next.js and Novu Framework

Express.js

How to send notifications with Express.js and Novu Framework

Remix

How to send notifications with Remix and Novu Framework

NestJS

How to send notifications with NestJS and Novu Framework

Svelte

How to send notifications with Svelte and Novu Framework

Nuxt

How to send notifications with Nuxt and Novu Framework

How to send notifications with H3 and Novu Framework

AWS Lambda

How to send notifications with AWS Lambda and Novu Framework

Workflows are at the core of responding to events in your system with notifications. Novu Framework enables you to declare type-safe, validated, and version-controlled Workflows with code.

Workflows

Controls

Managing Trigger Events from Request to Processing

Trigger

Subscribers

Bridge Endpoint

Environments

Preferences

Topics

Learn about how to implement multi-tenant notifications in Novu

Multi-tenancy

Introduction to Novu

Novu Architecture Diagram

Building notification workflows with the Novu Framework

Local Studio

Learn how to manage your notification workflow and allow no-code users to modify it.

Manage Content

Manage notification workflow content

Digest Engine

Collect multiple events to a single message with the Digest Engine

Delay

Delay Action Step

Used to execute any custom code as a step in the workflow.

Custom Step

Custom Action Step

Learn how to add novu powered In-App Inbox to your React app

React Get Started

Learn how to style the pre built Inbox component

Styling

Styling the Inbox component

Tabs

Configuring Multiple Tabs

<Bell />

<Notifications />

<Preferences />

<InboxContent />

Create Custom Inbox UI with React Hooks

NovuProvider

useNotifications

usePreferences

useCounts

useNovu

Learn how to localize the pre built Inbox component

Localization

Localizing the Inbox component

Learn how to prepare your inbox before going to production

Going to production

This guide outlines the key differences between the `@novu/notification-center` package and the new `@novu/react` package. Follow the steps below to migrate your application to the latest version.

Migration Guide

A lightweight, standalone package for building custom in-app notification interfaces with Novu, providing essential functionalities and flexibility.

Headless Inbox

Headless Inbox API Reference

Learn how to add Novu powered Inbox to your React Native app

React Native Get Started

Syncing your local changes to the Novu Cloud Dashboard

Going to Production

GitHub Actions

Get started and get involved with the Novu Project

Community Overview

Understand the difference between Novu Project and Novu Cloud

Novu Project and Novu Cloud

Introduction

Deploy with Docker

Telemetry

The set of rules and guidelines that govern interaction among community members

Code of Conduct

Novu Community Code of conduct

Your guide for engaging with the Novu Community

Get Involved

Get involved with the Novu Community

See the most recent changes and learn about how to shape Novu's future

Changelog

Roadmap

Learn how to configure your local machine to run Novu

MacOS/Linux

Learn how to configure your local Windows machine to run Novu

Windows

Prerequisites and steps to run Novu in local machine. Learn how to set up Novu on your local environment for testing and development.

Run Novu in local machine

Learn how to enable/disable specific features in Novu

Feature Flags

Monorepo Structure

Add a New Provider

Add a new provider

Client

Workflow

Workflow Interface

Step Interface

Email

Email Channel Step

In-App

In-App Channel Step

SMS Channel Step

Push

Push Channel Step

Chat

Chat Channel Step

Digest

Digest Action Step

Custom

NodeJS SDK

PHP SDK

Laravel SDK

Python SDK

Kotlin SDK

Java SDK

Ruby SDK

Go SDK

C#/.NET

Novu supports advanced user authentication capabilities like OAuth, SSO, MFA and more, providing enterprise customers with a robust, secure, and user-friendly authentication solution.

Authentication

Learn how to enable Single Sign-On (SSO) for your account.

SAML SSO

Single Sign-On (SSO) for your account

Manage your billing and payment information, view invoices, and upgrade your subscription plan.

Billing

Billing and Payments

Common questions related to security, compliance, privacy policy and terms and conditions

Security and Compliance

Retry API requests fearlessly, ensuring the operation performs just once!

Idempotent Requests

Learn how to update your database data through migrations.

Data Migrations

Glossary

In this page you can learn about how to work with Novu's API

API Overview

In this page you can learn about how rate limiting works with Novu's API

API Rate Limiting


    Trigger event is the main (and only) way to send notifications to subscribers. 
    The trigger identifier is used to match the particular workflow associated with it. 
    Additional information can be passed according the body interface below.
    

Trigger event


      Using this endpoint you can trigger multiple events at once, to avoid multiple calls to the API.
      The bulk API is limited to 100 events per request.
    

Bulk trigger event

Trigger a broadcast event to all existing subscribers, could be used to send announcements, etc.
      In the future could be used to trigger events to a subset of subscribers based on defined filters.

Broadcast event to all


    Using a previously generated transactionId during the event trigger,
     will cancel any active or pending workflows. This is useful to cancel active digests, delays etc...
    

Cancel triggered event

Returns a list of subscribers, could paginated using the `page` and `limit` query parameter

Get subscribers

Creates a subscriber entity, in the Novu platform. The subscriber will be later used to receive notifications, and access notification feeds. Communication credentials such as email, phone number, and 3 rd party credentials i.e slack tokens could be later associated to this entity.

Create subscriber


      Using this endpoint you can create multiple subscribers at once, to avoid multiple calls to the API.
      The bulk API is limited to 500 subscribers per request.
    

Bulk create subscribers

Get subscriber by your internal id used to identify the subscriber

Get subscriber

Used to update the subscriber entity with new information

Update subscriber

Deletes a subscriber entity from the Novu platform

Delete subscriber

Subscriber credentials associated to the delivery methods such as slack and push tokens.

Framework Typescript SDK

Rest API SDK

Vue library

Installation

Framework Typescript SDK

Rest API SDK

​Installation

Installation