#sidebar {
    top: 12rem;
}

#content-side-layout {
    top: 14rem;
}

#content-container > div {
    padding-top: 14.5rem;
}

/* Remove the logo */
#navbar > div#primary-nav + div a[href="/"] {
    display: none;
}
#navbar > div#primary-nav + div div.relative {
    margin-left: 0;
}


.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");


API Reference

Discord Support

Authorization

Novu

SDKs

Guides

Help Center

Echo

Get API Key

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 Component

Novu is an open-source notification infrastructure, built for engineering teams to help them build rich product notification experiences.

Start Point

How Does Novu Work?

Concepts

Commercial Self Host plan features and benefits

Commercial Self Host

Introduction to Novu

Novu Architecture Diagram

Sign Up on Novu Cloud

Learn how to send your first notification via the Novu Cloud dashboard.

Send First Notification

Send Your First Notification

Learn how to use Novu to quickly send multi-channel (SMS, Email, Chat, Push) notifications with any language/framework of your choice.

Quickstarts

Learn how to use Novu to quickly send multi-channel (SMS, Email, Chat, Push) notifications.

General

Subscribers

Topics

Preferences

Workflows

Learn how to create and use multiple variants for workflow steps in Novu.

Variants

Learn how to customize your notifications flow in Novu.

Step Conditions

Digest Engine

Delay Action

Template Store

Messages

Activity Feed

Managing Trigger Events from Request to Processing

Trigger Event Lifecycle

Tenants

Environments

Learn how to setup webhook support for a provider.

Webhooks for Providers

Learn how to process incoming emails for a domain or subdomain

Inbound Parse Webhook

Learn more about Novu's Notification Center.

Introduction to Notification Center

Angular

Angular Component

Web Component

Iframe

Iframe Embed

Backend SDK methods

Workflow Editor

Handlebars & Helpers

Brand

Explore how to create notification content

Content Creation

Explore how to create and manage layouts in Novu

Layouts

Translate notification content to different languages using i18n.

Translations

Learn about what channels, providers and oganizations are

Overview

Integration Store

Learn about the default Novu email and sms providers

Novu Providers

Learn how to integrate In-App notification center and send In-App notification using Novu

Introduction

Learn the process of configuring email providers with Novu

Email providers

Learn how to use the Infobip provider to send email notifications using Novu

Infobip - email

Learn how to use the Amazon SES provider to send email notifications using Novu

Amazon SES

Learn how to use the Braze provider to send email notifications using Novu

Braze

Learn how to use the MailerSend provider to send email notifications using Novu

Mailersend

Learn how to use the Mailgun provider to send email notifications using Novu

Mailgun

Learn how to use the Mailjet provider to send email notifications using Novu

Mailjet

Learn how to use the Mailtrap provider to send email notifications using Novu

Mailtrap

Learn how to use the Mandrill provider to send email notifications using Novu

Mandrill

Learn how to use the Netcore provider to send email notifications using Novu

Netcore

Learn how to use the Outlook 365 provider to send email notifications using Novu

Outlook 365

Learn how to use the Postmark provider to send email notifications using Novu

Postmark

Learn how to use the Resend provider to send email notifications using Novu

Resend

Learn how to use the Sendgrid provider to send email notifications using Novu

SendGrid

Learn how to use the Sendinblue provider to send email notifications using Novu

Sendinblue

Learn how to use the Sparkpost provider to send email notifications using Novu

Sparkpost

Learn how to use the Plunk provider to send email notifications using Novu

Plunk

Learn how to use the Custom SMTP provider to send email notifications using Novu

Custom SMTP

Learn the process of configuring and using sms providers with Novu

SMS Channel Overview

Learn how to use the Twilio provider to send sms notifications using Novu

Twilio

Learn how to use the SMS77 provider to send sms notifications using Novu

SMS77

Learn how to use the Africa's Talking provider to send sms notifications using Novu

Africa's Talking

Learn how to use the Azure SMS provider to send sms notifications using Novu

Azure SMS

Learn how to use the BulkSMS provider to send sms notifications using Novu

BulkSMS

Learn how to use the messagebird provider to send sms notifications using Novu

MessageBird

Learn how to use the SimpleTexting provider to send sms notifications using Novu

SimpleTexting

Learn how to use the Infobip provider to send sms notifications using Novu

Infobip - SMS

Learn how to use the Sendchamp provider to send sms notifications using Novu

Sendchamp

Learn how to use the AWS SNS provider to send sms notifications using Novu

AWS SNS

Learn how to use the Nexmo provider to send sms notifications using Novu

Nexmo

Learn how to use the Plivo provider to send sms notifications using Novu

Plivo

Learn how to use the Telnyx provider to send sms notifications using Novu

Telnyx

Learn how to use the Termii provider to send sms notifications using Novu

Termii

Learn how to use the firetext provider to send sms notifications using Novu

Firetext

Learn how to use the gupshup provider to send sms notifications using Novu

gupshup

Learn how to use the Clickatell provider to send sms notifications using Novu

Clickatell

Learn how to send push notifications with Novu using external providers like FCM, Expo etc.

Push Channel Introduction

Learn how to use the Firebase Cloud Messaging (FCM) provider to send push notifications using Novu

Firebase Cloud Messaging (FCM)

Learn how to use the Apple Push Notification Service (APNS) provider to send push notifications using Novu

APNS

Apple Push Notification Service (APNS)

Learn how to use the Expo push provider to send push notifications using Novu

Expo Push

Learn how to use the Onesignal provider to send push notifications using Novu

Onesignal

Learn how to use the Pushpad provider to send web push notifications using Novu

Pushpad

Learn how to use the Push Webhook provider to send  notifications using Novu

Push Webhook

Learn how to use the Pusher Beams provider to send push notifications using Novu

Pusher Beams

Learn the process of configuring and using chat providers with Novu

Chat Channel Overview

Learn about how to use Discord provider for chat notifications

Discord

Learn about how to use Slack provider for chat notifications

Slack

Learn about how to use MS Teams provider for chat notifications

MS Teams

Learn about how to use Zulip provider for chat notifications

Zulip

Learn about how to use WhatsApp for chat notifications

WhatsApp

Deploy with Docker

Using S3 as a storage backend for your application

Object Storage (S3, Blob, GCS)

Kubernetes

Leverage the digest functionality to send in-app notifications

How to Add Digest to In-App Notifications

Leverage the digest functionality to send email notifications

How to Add Digest to Email Notifications

Use the headless version of the notification center

How to use Headless Notification Center

Learn to send Slack notifications swiftly with Novu (manually managed)

How to use Novu to send notifications to a Slack channel

Learn to send Discord notifications swiftly with Novu

How to use Novu to send notifications to a channel in a Discord server

Send FCM push notifications in a React app using Novu

How to send web push notifications with FCM and Novu

Learn how to integrate Firebase Cloud Messaging with Novu and send notifications to iOS

How to send PUSH notifications to iOS devices with FCM using Novu

Learn how to integrate Firebase Cloud Messaging with Novu and send notifications to Flutter apps

SDKs & Client Libraries

Vue Component

Installation

SDKs & Client Libraries

​Installation

Installation