You can now control the position of the popover content by specifying the placement and placementOffset props for the @novu/react component.

<Inbox
  applicationIdentifier="Your App ID"
  subscriberId="Subscriber ID"
  placement="bottom-end"
/>

The package supports the following placements:

type Placement = "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | "bottom" | "left" | "right" | "top";

For further adjusting the placement the placementOffset could be used:

<Inbox
  applicationIdentifier="Your App ID"
  subscriberId="Subscriber ID"
  placement="bottom-end"
  placementOffset={10}
/>

Fixes

• Truncate workflow name and center empty notifications text in preference component

The Novu Framework SDK is now more compatible than ever across bundles with added native ESM + CJS builds. This ensures you can manage your notifications across multiple js runtimes.

Features

• Bundle native ESM + CJS builds

• Support Next.js 15, including Turbopack dev (next dev --turbo)

• Support a single package import for all Web Frameworks (for example in Next.js: import { workflow, serve } from '@novu/framework/next)

Bug fixes

• Ensure missing schemas infer a Record<string, unknown> type for corresponding data to enforce consumer-type strictness.

• Remove the erroneous "Hydrate step failed" error log when previewing steps with more than one step.

• Replace all computed property keys for type inference with static declarations to improve compiler performance.

• Stop validating controls for non-previewed steps to prevent incorrect validation messages.

• Stop logging discovery of workflows that weren't included in the serve function.

• Prevent specification of payload and control schemas for primitive types, allowing only object types to be specified.

Global Preferences now only display channels on which the Subscriber receives notifications, ensuring the Subscriber only sees relevant channels and reducing UI noise for customers.

You can now control the name and description fields when creating framework-based workflows:

workflow('welcome-onboarding', async ({ step }) => {
  await step.email('send-email', async () => ({
    subject: 'Welcome to our platform!',
    body: 'Welcome to our platform!',
  }));
}, {
  name: 'Welcome Onboarding',
  description: 'This is a welcome onboarding email workflow. It is a simple workflow that sends a welcome email to the user.',
  tags: ['critical', 'business'],
});

The name will be later used for display in the Subscriber Preferences on the Inbox component and in the Dashboard editor UI.

LiquidJS JSON Support for Controls

JSON objects can now be used as part of the content controls with Liquid: {{payload.comments | json}}

Other notable changes

• Add support for custom tunnels in npx novu dev command using --tunnel (#6711)

• Propagate Bridge server runtime error messages and stack traces to Bridge client (#6708)

Since day one, we've been building our API services on top of the NestJS framework. We've been working with an internal module for @novu/framework for a few months now and are excited to open-source the module for our customers to use in their Nest applications as well!

To learn more on how to integrate with your Nest application read our docs.

import { Module } from '@nestjs/common';
import { NovuModule } from '@novu/framework/nest';
import { testWorkflow } from './novu/workflows';

@Module({
    imports: [
        NovuModule.register({
            apiPath: '/api/novu',
            workflows: [testWorkflow],
        }),
    ],
})
export class AppModule {}

We are excited to ship more customizable and granular control over the default subscriber preferences and change the visibility of the different preferences controls.

Preference on all levels

The new preference control allows the following scenario:

• A developer specifies the default behavior in the code

• A non-technical team member can override the behavior using the dashboard

• A subscriber can change the default preference behavior using the <Inbox /> component or API.

Common usecases

• Hiding critical workflows from the user preferences

• Setting some channels as on or off by default for given workflows

• Disable the ability to control the code-set settings from the UI for system-critical workflow and only manage them in code.

Read more on our docs

Other notable changes

• @novu/js and @novu/react v2.4.0

  • By default, hide the critical workflows from the preference list

  • Preview for inbox notification content in the dashboard now supports bold in the subject and in the body

  • 🐛 Bug Fix: notification.read() call returning empty notification object

  • 🐛 Bug Fix: The wrong time was displayed with old notifications

  • 🐛 Bug Fix: The notification mark as actions appear to be under the subject/body

You can now self-host v2.0 API, Dashboard, and workers using our public Docker Image.

We have also updated our Community Self-Hosting page and docker instructions with basic system requirements and services required to run Novu on-prem.

The new Docker image aligns with the latest @novu/framework capabilities for defining and running code-based workflows as part of our workflow engine execution. Read more on our docs.

Note: In the new docker image, only code-based workflows will be supported with limited backward compatibility; a backward-compatible version is planned for release in the upcoming weeks.

To get started, visit our Get Started Guide

Our <Inbox /> Component now supports React Native apps 🎉

To learn more, read our React Native Quick Start Guide on how to get started. We have also created a sample project using Expo and React Native.

You can now filter the subscriber preference list on our <Inbox /> component. This is very handy when you have multiple user types in your system, and they don't need to see specific notification workflows that are irrelevant to them.

This is achieved by passing the preferencesFilter prop to the component and mentioning the workflow tags the current subscriber should see.

<Inbox
  applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
  subscriberId="YOUR_SUBSCRIBER_ID"
  preferencesFilter={{ tags: ['mention', 'newsletter', 'security'] }}
/>

New popover animations

Added a new subtle and slick show and hide animation when opening the Inbox component.

Other notable changes

• The shadows of the Inbox can now be controlled using the colorShadow variable

• Improved the spacing around the "Time Ago" label when long notification text is visible

The latest <Inbox /> release now enables you to mark text as bold. Enclose your desired text with asterisks (**), and voilia!

Learn more in the docs, or play with it live in our <Inbox /> Playground.

The new Inbox 2.0.0 release now supports a framework-native navigation system that replaces the old browser full-page navigation system we had in place. This ensures smooth and fast client-side navigation while maintaining the browser history for a more delightful end-user experience.

The new routerPush will receive the url path defined within the workflow on both the notification and action levels:

export const inAppDemo = workflow("in-app-demo", async ({ step }) => {
  await step.inApp("send-in-app", async () => {
    return {
      subject: "This is a _test_ subject"  + new Date(),
      body: "This is a test body",
      avatar: 'https://static.vecteezy.com/system/resources/thumbnails/006/487/917/small_2x/man-avatar-icon-free-vector.jpg',
      redirect: {
        url: "/a-relative-page-in-my-app",
      },
      primaryAction: {
        label: 'Accept',
        redirect: {
          url: '/another-relative-page-in-my-app',
        }
      },
      secondaryAction: {
        label: 'Secondary action',
        redirect: {
          url: 'https://google.com',
        }
      },
    };
  });
});

We've just added the autocomplete functionality in our Step Controls editor to enhance your workflow:

• Liquid filters: Apply Liquid filters (e.g. upcase) directly within autocomplete suggestions for better content control.

• Seamless navigation: Use arrow keys to navigate suggestions, press ENTER to select the variable, or press ESC to close the dropdown quickly.

• Variable editing: Easily navigate and edit variables within curly braces. Errors are now shown instantly when dealing with incomplete or invalid variables.

If you're looking for a simple and easy way to create a beautiful in-app notification experience for your users, look no further.

New features

• Subscriber preferences: Customize notification settings directly in the app.

• Notifications feed: A centralized hub for all notifications with subject lines for quick information access.

• Bell/Counter component: Visual notification alerts with an unread badge for better clarity.

Enhancements

• Filtering options: Easily filter notifications by unread or archived status, improving inbox management.

• Archive/unarchive notifications: Efficiently manage your notification list while keeping a historical record for later retrieval.

• Bulk actions: Archive all or all read notifications in one go for quicker inbox organization.

Updated functionalities

• Unread badge: Replaces the previous "unseen badge" for improved familiarity and clarity.

• Archiving vs. removal: Notifications are now archived instead of removed, preserving historical data and preventing accidental data loss.

Design and performance improvements:

• Revamped design: A refreshed, user-friendly design focused on clarity and efficiency, reducing confusion.

• Performance boost: The new component is powered by SolidJS, leading to faster interactions, a smaller bundle size, and better overall performance.

• Optimized resource usage: Single WebSocket connection across tabs and consolidated API calls reduce load on services, improve load times, and enhance user experience.

To learn more, check out our documentation.

Modifying your notification steps in the UI just got easier. With the latest revamp of the Step Controls, we introduce:

• More intuitive UI and sleeker design

• Autocomplete suggestions for interpolated payload input when modifying the controls

• Instant control validation

Learn more about controls in our documentation.

We just rolled out an SSO (Single Sign-On) integration, enabling you to authenticate your organization’s users with your existing SAML infrastructure.

Some of the capabilities that the new integration unlocks include:

• The ability to configure multi-factor authentication

• Custom, SAML-based SSO configuration per customer request

• Infrastructure for role-based access control

To learn more or learn how to enable SSO for your organization, check out our documentation.

You can now reference a created workflow using the Framework SDK, and get a complete end-to-end type safety and auto-completion for your triggers.

import { workflow } from '@novu/framework';

const commentWorkflow = workflow('comment-on-post', async ({ step }) => {
  await step.email();
}, {
 payloadSchema: z.object({
   post: z.object({
     id: z.number(),
     title: z.string()
   })
 }) 
});

// complete type-safety for the payload object
commentWorkflow.trigger({
  to: { subscriberId: '[email protected]' },
  payload: { 
    post: {
      id: 1234,
      title: 'Post Title'
  }
});

It's still possible to make the trigger from any of our backend SDKs (Node, PHP, Go, etc..) following the trigger command:

from novu.api import EventApi

url = "https://api.novu.co"
api_key = "<NOVU_API_KEY>"

novu = EventApi(url, api_key).trigger(
    name="<WORKFLOW_TRIGGER_IDENTIFIER>", # This is the Workflow ID
    recipients="<UNIQUE_SUBSCRIBER_IDENTIFIER>",
    payload={},  # Your custom Novu payload goes here
)

You can now use Zod Schemas for defining your payload and step controls schemas. The Framework SDK will infer those zod schemas and provide a run-time validation and autocompletion for usage.

Here is an example of a Zod-based validation:

import { workflow } from '@novu/framework';
import { z } from 'zod';

workflow('comment-workflow', async ({ step }) => {
  await step.email('digest-email', async (controls) => ({
    subject: controls.subject,
    body: 'body'
  }), {
    controlSchema: z.object({
      subject: z.string().default('Hi {{subscriber.firstName}}'),
      openAiModel: z.enum(['gpt-3.5-turbo', 'gpt-4o']).default('gpt-4o'),
      aiPrompt: z.string().default('Produce a concise comment digest'),
    })
  });
}, { 
  payloadSchema: z.object({
    name: z.string(),
    comment: z.string() 
  }) 
});

Common usecases

• Validate trigger payload contents to make sure that null or undefined data ends up in your notifications.

• Provide default values for non-required attributes

• Create custom validation logic based on backend logic

• Define UI step controls and expose UI elements from zod schemas

To learn more about Zod integration, read our documentation.

You can now pass your push and chat tokens directly from novu.trigger endpoint. This eliminates the need for a separate process to keep push tokens in sync with Novu.

This behavior aligns with how email and phone fields can be passed during the trigger phase.

novu.trigger('workflow-id', {
  to: {
    subscriberId: 'subscriber-id',
    channels: [
      {
        providerId: 'fcm',
        credentials: {
          deviceTokens: ['token-1'],
        },
      },
    ],
  },
  payload: {},
});

Our API will upsert those credentials on the subscriber entity and use them for delivery.

You can now run custom code as part of your Echo workflows. Our workflow engine will ensure the durability and persistence of running your code.

Custom steps is our way to unlock limitless flexibility when it comes to your workflows:

• Integrate with 3rd party services like CMS, Localization, Templating, HubSpot

• Fetch and reuse data from your database and reuse across your workflow

• Run AI Prompts to enrich your notifications

• Create a custom provider that Novu might not be supported yet

• Stream analytical data back to your Dataware house

• And more...

We are curious to hear what the broader development community will invent with it.

Want to learn more? Visit our docs

We're excited to announce the integration of WhatsApp Business into Novu's platform!

WhatsApp is a cornerstone of communication in over 180 countries, making it a vital tool for businesses to reach their audiences. You asked for it, and we listened. With this integration, you can now leverage WhatsApp to send timely and personalized notifications directly to your users.

Some use cases you might be interested in:

• Engage users with custom alerts, reminders, and status updates directly through WhatsApp

• Set up and manage automated workflows triggering based on user actions or predefined conditions

• Sending high-volume notifications? Enjoy stable and reliable delivery regardless of the volume

Steps to start sending:

1. Create a Facebook Developer App

2. Setup WhatsApp Product

3. Send a Sandbox Message

4. Add a Test Phone Number

5. Send a test notification from Novu

Read more Here

Novu Echo has a new integration with React Email, making it incredibly easy for developers to incorporate fully functional email capabilities directly within their React applications.

Key Enhancements:

• Streamlined integration: Set up React Email with your Novu Echo in just three steps, whether you're starting from scratch or integrating into an existing project.

• Component-Based emails: Utilize React components to construct and send rich, interactive emails directly from your React or Next.js applications.

• Developer-centric workflow: From installation to sending out your first email, the process is designed with developer ease in mind

E-mail shouldn’t be hard. Give the new integration a shot!

Read more

Hello to all Builders.

We're thrilled to announce the launch of our new Changelog!

In our relentless journey to innovate, solve problems, and create the best solutions for our customers, we've been hard at work improving our SaaS product. And we don't want you to miss out on any of the action. That's why we've introduced this Changelog - a dedicated place where you can keep track of all the updates, improvements, and new features we're rolling out.

Here’s what you can expect:

• Feature Releases: Everything that is new

• Improvements: Details on tweaks we've made to existing functionalities for better performance and usability.

• Bug Fixes: Details on fixes we've made so you can enjoy a smoother product experience.

You can simply bookmark this page or subscribe to our newsletter to get regular updates. Our transparency, your trust, and mutual growth are what matter to us the most.

Thank you for your continued support and happy hacking!

Novu Team.