github novuhq/novu v0.10.0
v0.10.0 Release - Topics and new e-mail editor
on GitHub

latest releases: v2.0.1, v2.0.0, v0.24.3...
23 months ago

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@email.com'
    },
		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

New Contributors

Full Changelog: v0.9.2...v0.10.0

Check out latest releases or
releases around novuhq/novu v0.10.0

Don't miss a new novu release

NewReleases is sending notifications on new releases.

Get notifications