Novu changelog
Mobile Inbox for React-Native
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.
v2.2.0 Inbox - Customizing subscriber preferences and more!
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
variableImproved the spacing around the "Time Ago" label when long notification text is visible
Add a little boldness to <Inbox/> notifications
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.
Framework-native Inbox navigation
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',
}
},
};
});
});
Autocomplete in Step Controls Editor
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.
New Inbox Components
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.
Revamped Step Controls UI
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.
Single Sign-on for our Enterprise Customers
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.
Type-safe triggers using the Framework SDK
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
)
Zod Integration with Novu
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.
Chat and Push tokens in Trigger Payload
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.
New Custom Step Type
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
WhatsApp Business Integration
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:
Create a Facebook Developer App
Setup WhatsApp Product
Send a Sandbox Message
Add a Test Phone Number
Send a test notification from Novu
Read more Here
React Email Integration
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!
Hello World to our new changelog!
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.