Content Creation

To demonstrate the extensive range of possibilities, we’ve crafted a subscriber profile enriched with various attributes to highlight the flexibility of our system.

const subscriber = {
    subscriberId: '6427e97d0136cef86a315c46',
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@gmail.com',
    phone: '+98712345677',
    avatar: 'https://sm.ign.com/ign_nordic/cover/a/avatar-gen/avatar-generations_prsz.jpg',
    locale: 'en-US',
    data: {
        plan: 'basic',
        zipcode: 14925,
        validVehicleLicense: true
    }
};

Let’s go over examples for each communication channel:

Email

There are multiple ways to craft your email notification content for maximum impact.

Please remember that you have the option to preview the anticipated output of your input using the editor. Simply switch from the editing mode to the preview mode to see the results.

Regular Editor

Example: Send a personalized welcome email to a user by leveraging their properties. Input:

Hello {{subscriber.firstName}} {{subscriber.lastName}}!

We are excited to welcome you to our {{subscriber.data.plan}} plan.
Look forward to receiving daily updates from us on your phone number: {{subscriber.phone}}.

{{#if subscriber.data.validVehicleLicense}}
Why not consider renting a car to visit us?
{{else}}
We're delighted to offer you a train ticket to come see us.
{{/if}}

Should you require any assistance, don't hesitate to reach out.
Best regards,
Your friends at Novu.

Output:

Hello John Doe!

We are excited to welcome you to our basic plan.
Look forward to receiving daily updates from us on your phone
number: +98712345677.

Why not consider renting a car to visit us?
Should you require any assistance, don't hesitate to reach out.
Best regards,
Your friends at Novu.

Custom Code Editor

Input:

Email Template Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Welcome to Novu!</title>
  <style>
      /* Inline styles for email compatibility */
      body {
          font-family: 'Helvetica Neue', Arial, sans-serif;
          background-color: #f4f4f4;
          margin: 0;
          padding: 0;
      }
      .container {
          max-width: 600px;
          margin: 0 auto;
          padding: 20px;
          background-color: #ffffff;
          border-radius: 10px;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      }
      .header {
          text-align: center;
          margin-bottom: 20px;
      }
      .message {
          font-size: 16px;
          line-height: 1.6;
          color: #333333;
          margin-bottom: 20px;
      }
      .cta-button {
          display: inline-block;
          padding: 10px 20px;
          background-color: #007bff;
          color: #ffffff;
          text-decoration: none;
          border-radius: 5px;
          font-weight: bold;
      }
      .signature {
          margin-top: 20px;
          font-style: italic;
          color: #888888;
      }
  </style>
</head>
<body>
  <div class="container">
      <div class="header">
          <h1 style="color: #007bff;">Welcome to Novu!</h1>
      </div>
      <div class="message">
          <p>Hello {{subscriber.firstName}} {{subscriber.lastName}}!</p>
          <p>We are thrilled to have you on board with our {{subscriber.data.plan}} plan.</p>
          <p>Get ready to receive daily updates on your phone: {{subscriber.phone}}.</p>
          <p>{{#if subscriber.data.validVehicleLicense}}
              We would like to offer you renting a car to visit us.
          {{else}}
              We would like to buy you a train ticket to visit us.
          {{/if}}</p>
          <p>If you need any assistance or have questions, feel free to reach out.</p>
          <p><a class="cta-button" href="#">Explore Your Options</a></p>
      </div>
      <div class="signature">
          <p>Best regards,<br>Your friends at Novu</p>
      </div>
  </div>
</body>
</html>

Output:

Email Subject, Sender Name and Preheader field accepts system, payload variables and handlebar helpers

Explore how to manage Email layouts.

In-App

The In-App notification content editor closely resembles the Email notification editor, although with some discernible differences.

You can:

Transform notifications into clickable links, redirecting to your specified URLs
Enjoy unlimited character freedom
Utilize all variables to craft dynamic and personalized messages
Infuse your brand’s essence with customizable elements
Drive engagement with action buttons
Embed avatar images
Preview the expected output

SMS

When crafting your SMS notification, you can tap into all the available variables and even add dynamic ones.

Chat

We make it effortless to send notifications to chat providers like Slack, Microsoft Teams, and Discord. Meet your users in the tools they use daily. You have the ability to utilize all variables to craft dynamic and personalized messages.

Push

Push channel has two fields Push Message Title and Push Message Content where user can write hard coded text content or use system, dynamic variables or handlebar helpers to customize notification content.

Introduction

Architecture

Getting Started

Subscribers

Workflows

Activity Feed

Tenants

Platform

Notification Center