Skip to content

Releases: novuhq/novu

v0.16.3 - Patch Release

12 Jul 07:38
Compare
Choose a tag to compare

What's Changed

Full Changelog: v0.16.1...v0.16.3

v0.16.1

12 Jul 07:37
Compare
Choose a tag to compare

What's Changed

New Contributors

Full Changelog: v0.16.0...v0.16.1

v0.16.0 - Template Store and integration store improvements

21 Jun 05:44
9408da4
Compare
Choose a tag to compare

What’s new in Novu 0.16.0?

TL;DR: All you need to know about the latest Novu 0.16.0 release. Template Store, Demo SMS Provider, Notification Templates Renaming and more!

0.16.0 Release Updates

We are thrilled to share the latest updates on our most recent release. Let's dive in headfirst and discover what's in store for you!

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdzueooohncgk6czgq0s.gif

Template Store

The Novu dashboard now has a new embedded template store with ready-to-use notification workflows for everyone.

You can simply choose a sample notification workflow from the template store, modify it and be ready to trigger a notification in record time!

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxewbhmfs43dmt3matap.gif

Demo SMS Provider

We now have a built-in SMS provider for our cloud users to test SMS notifications quickly without setting up and providing credentials for external SMS providers. It's similar to what's available for Email.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hs1f158idnbksa0abyi4.png

In-App Notification Center In Integration Store

The Integration Store houses the providers for all the channels: Email, SMS, Chat and Push. The In-App channel is now part of the integration store.

The configuration has been moved to the integration store now from the settings page as it was previously.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifqdhpa3zbsdh7tho3b1.png

BREAKING CHANGE (Novu Self-hosted Only)

Prior to upgrading to 0.16.0, a migration script needs to be run. This migration script will create a notification center integration and activate it to allow the delivery of in app messages. If you are not using the notification center, there is no need to run the migration scripts.

To run the migrations, follow the next steps:

Clone the novu repository, and install the dependencies (npm run setup:project)

Update the MONGO_URL to your production environment in apps/api/src/.env file, and run the npm run migration:in-app command from the apps/api folder.

After running the migration script, the version can be updated.

Renaming Notification Templates To Workflows

Notification templates as we have all known it are now called Workflows. It was renamed for more consistent terminology across the entire system.

New API endpoints will be introduced in v0.17.0 and current endpoints of notification templates will be marked as deprecated.

https://res.cloudinary.com/dxc6bnman/image/upload/v1687321553/workflow_ia3p0n.png

The isDefined Filter

This new isDefined filter checks the presence of a variable. Essentially, it checks if a variable is available or not!

It works for all channels. You can check if a payload, subscriber or webhook variable is defined.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvfu8vit9bnh7aqqfwyi.png

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/232hx77zgn3839rd2jqi.png

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fdzi55mjyzy2d3vd6gq.png

All Changes

Read more

v0.15.0 - Scheduled Digest and Slack OAuth for webhook urls

24 May 14:17
9373896
Compare
Choose a tag to compare

What’s new in Novu 0.15.0?

TL;DR: All you need to know about the latest Novu 0.15.0 release. Scheduled Digest, In-App Onboarding playground, Slack Webhook URL managed flow and more!

0.15.0 Release Updates

We're excited to unveil fresh updates about our most recent release. So let's dive right in!

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyvgje77r0sbm9f9l8yc.gif

Scheduled Digest

Now you can schedule digest at specific intervals according to your preference. This feature eradicates the need to create cron jobs to suit your use case.

From the Novu dashboard, you can specify the times when a digest will be sent - Every two days, Daily, Weekly, etc. The Digest engine aggregates events before a set time and fires them when that time is reached.

Typical Use Case

A digest is scheduled for Tuesday and Thursday at 7:07 AM weekly. A notification event is triggered a couple of times to a subscriber every day.

The digest engine aggregates all events that occur before Tuesday. On Tuesday at 7:07am, it fires an event comprising all the aggregated events. Similarly, all events occurring between Tuesday and Thursday are aggregated, and an event is fired on Thursday at 7:07am. This cycle continues.

Note: For now, the time is UTC-based. We plan to make it user-timezone aware soon!

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds4v0jiiejlw3xbyms93.gif

In-App Onboarding Playground

We have integrated a new playground in our onboarding flow to test and explore In-App notifications. So take it for a spin!

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pug70auggz9vussml1xh.gif

Slack Webhook URL Managed Flow

Until now, developers had to manually spin up and deploy an https server with an endpoint to listen for redirect requests. They had to follow numerous steps to get Slack webhook Url generation right and working seamlessly for subscribers.

Now, Novu manages the OAuth flow for you. No more spinning of servers! All you need to do is:

  • Add https://api.novu.co/v1/subscribers/ to the Redirect URL in OAuth & Permissions on your Slack Developer Dashboard.
  • Add the Add to Slack button or the shareable URL to your application to request access permission (scope: incoming-webhook). More information here

Africa's Talking SMS Provider Integration

Now, you can use the Africa's talking SMS provider on Novu.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrxgh7mvseb0rbiopg7f.png

OneSignal Push Provider Integration

Now, you can use the OneSignal Push provider on Novu.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8bordqacaw8uc6mg8qq.png

Push Webhook

Now you can add a webhook URL to trigger push notifications on Novu.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3osipx08eq7tzo8jokn.png

There is work ongoing for Email Webhook Provider. You can follow the commits here

All Changes

Read more

v0.14.0 - Performance optimization and redesigned workflow editor

28 Apr 10:56
376f568
Compare
Choose a tag to compare

What’s new in Novu 0.14.0?

TL;DR: All you need to know about the latest Novu 0.14.0 release. Performance optimization, Workflow UI Editor, Data expiration, Headless Notification Center and more!

0.14.0 Release Updates

We're stoked to share new updates on our latest release. Let's dig in!

Performance Optimization

We have worked extremely hard to improve the core performance of Novu. I'll highlight crucial things to note and be aware of:

  1. Improved Caching.
  2. Optimized Indexes. Indexes are defined on each schema file at the bottom.

New Worker Service

Breaking Change: A new service is required to run with Novu called @novu/worker , extracted from the @novu/api monolith to ensure that queues and jobs are processed faster. Novu Cloud users do not need to be concerned about this change.

Novu self-hosted users can now scale the worker service independently as much as the hardware their hosted domain runs on.

For Novu self-hosted users running on Docker, it is now necessary to pull in the new worker service image in order for Novu to work properly. This is already taken care of here & here. When you run docker-compose up, the worker image will be automatically pulled in. No extra steps are needed.

Data Expiration

The Jobs and Messages collection now has a TTL and will be removed from the database when it expires. For Novu cloud users, notifications and activity feed data will be saved for 1 month, while in-app messages will be saved for 6 months. After that time, the records will be archived.

For Novu self-hosted users, the same time frame applies before records will be deleted. However, they can disable the TTL setting by adding the environment variable DISABLE_TTL=true.

Affected schemes:

  • Notification (for 1 month)
  • Job (for 1 month)
  • Message (for in-app messages - 6 months, for all other messages - 1 month)
  • Execution Details (for 1 month)

New Workflow UI Editor

We're constantly iterating on the UI editor to reduce the number of clicks needed to perform specific actions, improve the UX, and provide a great experience in setting up notification workflows.

In this release, we simplified the workflow editor UI like so:

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msm9mf9i3thhvtb8i4yg.gif

Headless Notification Center

You might have heard the phrase: “Bring Your Own...” or something along those lines.

We encourage you to bring your UI with the newly released framework-agnostic headless version of Novu's notification center.

This lightweight library allows you to incorporate our notification system into any framework or vanilla JavaScript app without UI constraints. Install and call the API methods needed to access the notification system.

Install:

npm install @novu/headless

Use:

import { HeadlessService } from '@novu/headless';

You can now fetch all In-App notifications shown like so:

const headlessService = new HeadlessService({
  applicationIdentifier: 'APP_ID_FROM_ADMIN_PANEL',
  subscriberId: 'USER_ID',
  backendUrl: 'YOUR_BACKEND_URL',
  socketUrl: 'YOUR_SOCKET_URL',
});

headlessService.initializeSession({
  listener: (session) => {
    console.log(session);
  },
  onSuccess: (session) => {
    console.log(session);
  },
  onError: (error) => {
    console.error(error);
  },
});

headlessService.fetchNotifications({
  listener: ({ data, error, isError, isFetching, isLoading, status }) => {
    console.log({ data, error, isError, isFetching, isLoading, status });
  },
  onSuccess: (response: IPaginatedResponse<IMessage>) => {
    console.log({response.data, response.page, response.totalCount, response.pageSize});
  },
  page: 1, // page number to be fetched
});

Maqsam SMS Provider Integration

Now, you can use the Maqsam SMS provider on Novu.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj8mleheehqi0rjm97q0.png

Termii SMS Provider Integration

Now, you can use the Termii SMS provider on Novu.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctsjas4ajli9o14n48i7.png

SMSCentral SMS Provider Integration

Now, you can use the SMSCentral SMS provider on Novu.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpub5ixz2rspw0au1a5j.png

Sparkpost SMS Provider Integration

Now, you can use the Sparkpost SMS provider on Novu.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p52oukji6lzi9aww2p6a.png

All Changes

Read more

v0.13.0

28 Mar 10:01
6bec561
Compare
Choose a tag to compare

What’s new in Novu 0.13.0?

TL;DR: All you need to know about the latest Novu 0.13.0 release. Better onboarding experience, Digest Workflow Playground, Seen/Read Step Filter, SMS providers integration and more!

0.13.0 Release Updates

New Onboarding Page

We shipped a better onboarding experience to make it easier for users to set up multichannel notification workflows.

image

Sign up and set up your app notifications system with ease.

We'll keep iterating on our onboarding process to ensure we provide a best-in-class onboarding experience for new users.

Digest Workflow Playground

We built a new digest playground that allows anyone to test, and play around with the digest feature.

The digest engine collects multiple trigger events, aggregates them into a single message and delivers it to the subscriber.

https://res.cloudinary.com/unicodeveloper/video/upload/v1679931446/Digest_Workflow_Playground___Novu_Manage_Platform_-_27_March_2023_feoctu.gif

Digest Playground

New Node Seen/Read Step Filter

We've added a new seen/read filter. This filter gives the flexibility of executing successive notifications based on the status of previous notifications. It currently works for in-app and email notifications.

Typical Use Case:

You have a set of customers that you need to send a 2-step email to them. However, they should only get the second email if they have read/seen the first email.

With the new seen/read filter, you can do the following in a notification workflow:

  • Set the first email step.
  • Set a delay.
  • Set the second email step.
  • Create a filter on the second email step that indicates if the previous step needs to be seen/read before it should be executed.

https://res.cloudinary.com/unicodeveloper/video/upload/v1679934867/Templates_-_Filter_dd8jjf.mp4

Setting up Seen/Read Filter

Note: For this to work with emails, the webhook url needs to be set up for the active email provider you're using on Novu. It's very essential for the filter to work. No extra set up is needed for in-app notifications.

PR: #2922

Create Topics On The Fly when adding Subscribers

Till now, you could not add subscribers to a non-existent topic. You will be met with an error!

We have now reduced friction for users by allowing them to create topics and add subscribers on the fly in one step. The system checks if the topic does not exist, and proceeds to create the topic implicitly.

Kannel SMS Provider Integration

Now, you can use the Kannel SMS Provider on Novu.

https://res.cloudinary.com/unicodeveloper/image/upload/v1679935944/Screenshot_2023-03-27_at_17.51.46_kzwse7.png

PR: #2700

46elks SMS Provider Integration

Now, you can use the 46elks SMS provider on Novu.

https://res.cloudinary.com/unicodeveloper/image/upload/v1679938643/Screenshot_2023-03-27_at_18.36.21_cninwo.png

PR: #2973

Mattermost SMS Provider Integration

Mattermost is an open-source Slack alternative. One integrated platform for all of your team messaging, collaborative workflows and project management needs. Now, you can use the Mattermost provider on Novu.

https://res.cloudinary.com/unicodeveloper/image/upload/v1679939274/Screenshot_2023-03-27_at_18.41.41_zki3wn.png

PR: #2935

Changes & Bug Fixes:

  • Add fcmOptions to Firebase provider. #2979
  • Removing a subscriber from a topic removed them from all subscribed topics. Now, it works correctly. The subscriber is only removed from the topic they were added to. #2903
  • Fix for SendinBlue cc and bcc properties #2897
  • Enable custom transactionId in trigger. This allows the transactionId to be passed to event request rather than generating random id on every request. #3014

All Changes

Read more

v0.12.0 - Polishing Season 💅

28 Feb 08:26
15234be
Compare
Choose a tag to compare

What’s new in Novu 0.12.0?

TL;DR: All you need to know about the latest Novu 0.12.0 release. New Onboarding experience, Actor Filtering, Custom subscriber properties, Email overrides, bug fixes, UI polishing and more!

0.12.0 Polishing Release Updates

This release contains exciting updates for existing and new users of Novu. Fun fact, more than 170 polishing issues were resolved in this release. Let's dig in!

New Onboarding Experience for Notification Center

We shipped a new onboarding experience for adding the notification center to existing apps. Check it out below:

https://res.cloudinary.com/unicodeveloper/video/upload/v1677519923/Novu_Manage_Platform_-_27_February_2023_tljibe.gif

Sign up and set up your app with the notification center swiftly!

Actor Filtering for Topics

This feature is great for users of topic-based notification. By default, it excludes an actor responsible for the action of a triggered notification on a topic event.

Typical Use Case:

The comment section of a post. Jane, John, and Doe made comments on a post. When Prosper makes a comment on the post, these users (Jane, John and Doe) should get a notification about the recent comment, but Prosper should not receive a notification on his recently created comment.

const topicKey = 'posts:comment:12345';

await novu.trigger('template-name', {
  to: [{ type: 'Topic', topicKey: topicKey }],
  payload: {},
  actor: { subscriberId: '<SUBSCRIBER_ID_OF_ACTOR>' },
});

Node SDK Usage: Actor filtering

PR: #2691

Support for cc, bcc, and multiple to for E-mail

Now, you can use the overrides object to allow for multiple to, bcc, and cc when triggering the email channel.


await novu.trigger('template-name', {
   to: 'subscriberId',
   payload: {...data},
   overrides: {
     email: {
         to: ['[email protected]'],
         bcc: ['[email protected]'],
         cc: ['[email protected]']
     }
   }
});

Node SDK Usage: E-mail support for cc,bcc and multiple to

The to property will be merged with the subscriber recipient email to avoid duplicates.

Also text can be passed as an override that will send the text version of the email along side the HTML for old clients.

PR: #2763

Use Custom Sender Name on Template

Before now, the sender name was defined only on the provider integration. So, all the emails triggered had the same sender name.

https://res.cloudinary.com/unicodeveloper/image/upload/v1677512479/Screenshot_2023-02-27_at_15.40.13_fhith6.png

Before: Integration store - Provider Integration

Now, you can define a custom sender from name on the template level. If empty, Novu will fallback to the sender name defined on the provider integration.

https://res.cloudinary.com/unicodeveloper/image/upload/v1677512609/sendername_fhmakz.png

Now: Sender Name from Template

PR: #2769

Typical Use Case

Each template can serve a different purpose, depending on the type of email content. Specifying different sender names for different templates makes the email content different.

PR: #2769

Bulk Trigger Endpoint

Previously, the only way to trigger events as many times as possible was to loop the trigger call.

await novu.trigger('<template-name>', {
  to: [
    {
      subscriberId: '<UNIQUE_IDENTIFIER>',
      email: '[email protected]',
      firstName: 'John',
      lastName: 'Doe',
    },
  ],
  payload: {
    name: 'Hello World',
    organization: {
      logo: '<https://happycorp.com/logo.png>',
    },
  },
});

Node SDK Usage: Trigger event

Now, Novu has a new bulk trigger endpoint, /events/trigger/bulk.

This endpoint allows simply passing in an array of events to the like so:

await novu.bulkTrigger([
	{ eventId: "my-event", to: "subscriber-id", payload: myPayload },
	{ eventId: "my-event-2", to: "subscriber-id-2", payload: myPayload2 }
]);

Node SDK Usage: Bulk Trigger events

PR: #2704

Custom Subscriber Properties

Now, custom subscriber properties can be added using the data key via the API or SDK like so:

Typical Use Case

You can leverage using the data key if you need to add some metadata (e.g date of birth, gender) to the subscriber. The data added is also available in templates.

API reference: The property can be set directly via the create & update subscriber API.

...
await novu.subscribers.identify(user.id, {
  email: user.email,
  firstName: user.firstName,
  lastName: user.lastName,
  phone: user.phone,
  avatar: user.profile_avatar
  data: {
    dob: user.dob
    gender: user.gender
  }
});

Node SDK usage - Create Subscriber

PR: #2707

Resend Email Provider Integration

Now, you can use the Resend email provider on Novu.

https://res.cloudinary.com/unicodeveloper/image/upload/v1677519100/resend_connect_gkp3ck.png

https://res.cloudinary.com/unicodeveloper/image/upload/v1677572334/Screenshot_2023-02-28_at_08.17.54_vrgfei.png

PR: #2802

Changes & Bug Fixes:

  • Trouble with apostrophe’s sending SMS across SMS providers. It was converting them to unicode characters. Now it works correctly. #2797
  • Change prompt showing up when there's no change made to a saved notification template. Now, it only shows the prompt when a change has been made. #2674
  • More fields added for APNS Integration. #2798
  • Android and APNS properties added to fcm message overrides by in #2645

All changes

Read more

v0.11.0 - Layouts, Reply Callbacks, Is Online Filters and more...

05 Feb 11:04
0474f24
Compare
Choose a tag to compare

In this release, we are very excited to introduce a lot of new improvements to some of our core features as well as completely new functionalities to help with creating better notification experiences for your users.

Let's deep dive in the new things available:

E-mail Layouts

You can now create and manage email layouts for notification templates. This feature makes it easier for you to customize the look and feel of your e-mail notifications and ensure that they are consistent across templates. Once a layout is created, you can then attach particular notifications to that layout. All the regular variables that are available on the template level will also be available when compiling the layout content.

To read more about layouts, visit our documentation page: https://docs.novu.co/platform/layouts

Is Online Filters

Really excited to share that from now you can send or not send notifications depending on the online status of the current subscriber in your system. When using the Novu notification center, we will track the current active session of the subscriber and allow filtering by its current status. You can filter by currently online, or online in the last X minutes.

Read more about it here.

Reply Callbacks with Inbound E-mail Parsing (Cloud Only)

Subscribers can now reply to e-mails you send them, similar to the behavior you might see when replying to a GitHub issue comment e-mail and your reply e-mail automagically appears as a GitHub comment.

You can enable Reply Callbacks for a particular notification template. Novu will modify the reply to the field to add a unique identifier when a subscriber replies to this e-mail. After parsing novu will call you the webhook URL defined in the template containing information about the particular notification and the e-mail contents for you to perform extra business logic for it.

Novu Starter E-mail Provider (Cloud only)

For new accounts evaluating Novu you could now have up to 300 free e-mails using the built novu provider to evaluate novu without the need to connect your SendGrid account.

Breaking changes

@novu/notification-center changes

NovuProvider:
Added the new prop initialFetchingStrategy which allows deciding about fetching strategy. By default feed notifications and user preferences are not fetched, this behavior is particularly implemented for the PopoverNotificationCenter as we don’t want to make the request for the feed before the notification center is opened, it might not be opened at all. But, sometimes it might be useful to fetch them during the hook mounting, ex. when you build custom UI components, ex. notifications list page, then you can use this prop to define that you want to fetch “right away”. Also, you can change the fetching strategy manually using the useNovuContext and setFetchingStrategy functions.

Hooks:

Changed the return interface of the useNotifications hook:

  • updateAction prop moved to a separate hook useUpdateAction
  • markAsRead renamed to markNotificationAsRead, it takes now only the messageId as the argument
  • markAllAsRead renamed to markAllNotificationsAsRead, it doesn’t require args to pass
  • markAsSeen renamed to markNotificationAsSeen, it takes now only the messageId as the argument
  • fetching renamed to isFetching
  • removed onWidgetClose and onTabChange as these props have nothing to do with this hook and they were only needed for internal use
  • added props: storeId, stores, unseenCount, isLoading, isFetchingNextPage, setStore, markAllNotificationsAsSeen

Split useSubscriberPreference into two separate hooks: useFetchUserPreferences and useUpdateUserPreferences

New hooks: useUpdateUserPreferences, useUpdateAction, useFetchNotifications, useFetchOrganization, useFeedUnseenCount, useMarkNotificationsAs

Hooks removed: useAuth, useApi, useScreens, useUnseenController - used for internal purpose

Hooks exposed: useSocket, useUnseenCount, useNotifications, useNovuContext, useNovuTheme, useNotificationCenter, useTranslations, useUpdateUserPreferences, useUpdateAction, useFetchNotifications, useFetchOrganization, useFeedUnseenCount, useFetchUserPreferences, useMarkNotificationsAs

Other notable changes

Read more

v0.10.1 - Webhook filters

06 Jan 09:18
93b8527
Compare
Choose a tag to compare

This release includes support for webhook filters of steps and also various small improvements and bug fixes.

Webhook Filters

The webhook filter support for steps allows users to filter a particular step execution based on the response received from the webhook. This can be useful in scenarios where it is necessary to take different actions based on the response from the webhook. With this feature, users have greater control over the execution of their workflows and can customize them to meet their specific needs.

Read more about step filters here.

What else has changed

New Contributors

Full Changelog: v0.10.0...v0.10.1

v0.10.0 Release - Topics and new e-mail editor

29 Dec 11:14
46aa929
Compare
Choose a tag to compare

We are excited to announce the latest release of Novu, which includes several new and improved features. One of the requested features has been the addition of Topics, which allows users to easily send notifications to groups for subscribers using a single identifier. We have also added avatar support, so notifications in the notification center can now include subscriber avatars. Another significant addition is the new e-mail editor and preview in the web UI. In addition to these new features, we have also made various performance improvements and bug fixes to enhance the overall experience. Let’s dive deeper:

Topics

We are excited to announce Topics, which allows you to create custom groups of subscribers and send targeted notifications to those groups. Using our API, you can easily create new topics and assign subscribers to them. Once a topic has been created, it is now possible to send notifications to that topic using the unique topic key.

Let’s see how it works in action.

First, we will need to create a topic:

import { Novu } from '@novu/node';

const novu = new Novu(process.env.NOVU_API_KEY);

const result = await novu.topics.create({
  key: 'posts:comments:123456',
  name: 'Post comments',
});

Assign subscriber to it:

import { Novu } from '@novu/node';

const novu = new Novu(process.env.NOVU_API_KEY);

const topicKey = 'posts:comments:123456';

const response = await novu.topics.addSubscribers(topicKey, {
  subscribers: ['subscriber-id-1', 'subscriber-id-2', ...],
});

And then trigger a notification for this topic:

const topicKey = 'posts:comments:123456';

await novu.trigger('<REPLACE_WITH_EVENT_NAME_FROM_ADMIN_PANEL>', {
  to: [{ type: TriggerRecipientsTypeEnum.TOPIC, topicKey: topicKey }],
  payload: {},
});

Read more about Topics on our documentation page.

New e-mail editor and preview

We are also excited to announce the release of a new e-mail editor that makes it easier than ever to customize and send e-mails. The editor includes a list of available variables that you can insert into the e-mail templates and a preview feature that allows seeing how the final e-mail will look. We have also added autocomplete support for variables to make it easier to use them in your e-mails. Another helpful feature is the ability to send a test e-mail to your own account, so you can see exactly how the e-mail will look and make any necessary adjustments before sending it out to your subscribers.

CleanShot_2022-12-27_at_10 04 46

Notification Center as a Vue, Angular, and Web Component (Beta)

We have converted our notification center component to be available as a vue, angular, and web component. This will allow to easily integrate the notification center into their projects regardless of their preferred front-end framework. The notification center provides a central location for users to view and manage their notifications, and we believe that making it available in multiple formats will make it even more accessible.

Let’s explore the usage of the Vue component:

import { createApp } from 'vue';
import NotificationCenterPlugin from '@novu/notification-center-vue';
import '@novu/notification-center-vue/dist/style.css';
import App from './App.vue';

createApp(App).use(NotificationCenterPlugin).mount('#app');

And then use it as a component:

<script lang="ts">
  export default {
    data() {
      return {
        applicationIdentifier: import.meta.env.VITE_NOVU_APP_IDENTIFIER,
        subscriberId: import.meta.env.VITE_NOVU_SUBSCRIBER_ID,
      };
    },
    methods: {
      sessionLoaded() {
        console.log('Notification Center Session Loaded!');
      },
    },
  };
</script>

<template>
  <NotificationCenterComponent
    :subscriberId="subscriberId"
    :applicationIdentifier="applicationIdentifier"
    :sessionLoaded="sessionLoaded"
  />
</template>

Read more about the component information in our documentation.

Are you experienced in one of the new components? Help us improve the API and developer experience by submitting an issue on GitHub.

Actors and Avatars

Now you can add an actor when triggering a notification and display their avatar on the notification feed. This allows a recipient of the notification better understand the context of a particular notification and who sent it. To use this feature, users simply need to include the actor's avatar URL when creating a notification.

CleanShot_2022-12-27_at_10 27 39

import { Novu } from '@novu/node';

export const novu = new Novu('<REPLACE_WITH_API_KEY_FROM_ADMIN_PANEL>');

await novu.trigger('<REPLACE_WITH_EVENT_NAME_FROM_ADMIN_PANEL>',
  {
    to: {
      subscriberId: '<USER_IDENTIFIER>',
      email: '[email protected]'
    },
		actor: {
      subscriberId: '<ACTION_PERFORMING USER>',
			avatar: 'http://path-to-avatar.com/profile.png'
    },
    payload: {
      customVariables: 'Hello'
    }
  }
);

Request caching

We have also introduced an optional cache layer to cache frequent requests for the notification feed, you can optionally enable cache by specifying the following environment variable when running the novu API

  • REDIS_CACHE_HOST - The path for your Redis instance
  • REDIS_CACHE_PORT - The port of the Redis instance defaults to the default port.

Webhook support

You can now connect webhooks from supported delivery providers to get better visibility on bounces, email opens, and more… Click on the integration, if supported a webhook URL will appear, copy it, and paste it on your provider delivery dashboard.

The webhook information will appear when inspecting and item in the activity feed. Read more about it on our documentation.

Notable features

  • Activity feed list can now be filtered using transactiondId
  • Upgraded Socket.IO to version 4
  • Security fixes and best practices for the API
  • New Info Bip SMS Provider
  • New Burst SMS Provider
  • New Sparkpost SMS Provider
  • New Outlook365 Provider

Other changes in this release

Read more