v0.10.0
Release Date: December 27, 2022
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.
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.
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 instanceREDIS_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
New Contributors
Full Changelog: https://github.com/novuhq/novu/compare/v0.9.2...v0.10.0
Source code(tar.gz)
Source code(zip)
{{/if}} ` }, ] }); await notifire.trigger('
![[NV-474] - Fit to screen's lentgh/size](https://avatars.githubusercontent.com/u/97910073?v=4)
11.5k Jan 6, 2023
6.7k Dec 21, 2022
1.3k Dec 30, 2022
12.5k Jan 4, 2023
3.6k Dec 30, 2022
6 Oct 18, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
1 Dec 29, 2021
931 Dec 31, 2022
3.5k Dec 20, 2022
4.1k Dec 30, 2022
57 Dec 25, 2022
29 Jan 4, 2023
2.8k Dec 27, 2022
11.8k Jan 2, 2023
494 Dec 29, 2022
1 May 23, 2022
22 Dec 23, 2022