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

[scopsy]

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 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

• feat: add scrolling to user preference list by @ainouzgali in feat: add scrolling to user preference list #1985
• fix: remove blog.johnnyreilly.com Google Analytics tag by @johnnyreilly in fix: remove blog.johnnyreilly.com Google Analytics tag #1992
• Update README.md by @amarkmcconn in Update README.md #1994
• feat: add transaction id filter to activity list by @ainouzgali in feat: add transaction id filter to activity list #1984
• Spelling by @jsoref in Spelling #1923
• Updated architecture.md by @Kritika30032002 in Updated architecture.md #1893
• added Bashkir language translations by @myshri123 in added Bashkir language translations #1844
• Fix several grammar issues and typos in docs by @wanderer163 in Fix several grammar issues and typos in docs #1933
• fix: web manifest update by @MaximFedarau in fix: web manifest update #1999
• remove use of deprecated api endpoint by @djabarovgeorge in remove use of deprecated api endpoint #2009
• fix(cypress): notifications editor flaky tests by @p-fernandez in fix(cypress): notifications editor flaky tests #1644
• modified .eslintrc.js by @MuzzammilRafiq in modified .eslintrc.js #1835
• fix: validate mongo object id by @djabarovgeorge in fix: validate mongo object id #2024
• react interface tests by @djabarovgeorge in react interface tests #2001
• fix: missing entity validations by @djabarovgeorge in fix: missing entity validations #2027
• fix: so empty state can be provided to popover notification center by @davidsoderberg in fix: so empty state can be provided to popover notification center #2028
• feat: update vercel integration by @BiswaViraj in feat: update vercel integration #2021
• feat: Abstracted content engine by @Swahjak in feat: Abstracted content engine #2003
• feat(infra): add dev env setup script and plug it in jarvis by @p-fernandez in feat(infra): add dev env setup script and plug it in jarvis #1975
• fix: missing initialisation for content engine by @BiswaViraj in fix: missing initialisation for content engine #2036
• fix: copy bell theme instead of using merge by @sofferjacob in fix: copy bell theme instead of using merge #2010
• chore(docs): local env setup script doc by @p-fernandez in chore(docs): local env setup script doc #2037
• fix(api): if no webhookurl provided there is a typeerror by @p-fernandez in fix(api): if no webhookurl provided there is a typeerror #2047
• fix(api): send push message potential push bug by @p-fernandez in fix(api): send push message potential push bug #2048
• Fix nested handlebar variables by @guywal in Fix nested handlebar variables #2039
• feat/docs: refactor docker compose files and docs for local development by @Cliftonz in feat/docs: refactor docker compose files and docs for local development #1291
• fix interface exports by @djabarovgeorge in fix interface exports #2059
• fix: integrations store stretching by @MaximFedarau in fix: integrations store stretching #1833
• A new Typo checker repo action! by @Chii-Onan in A new Typo checker repo action! #1359
• [NV-1175] - Enforce environment param in dal query by @djabarovgeorge in [NV-1175] - Enforce environment param in dal query #2025
• feat: Added Termii webhook parser by @abhilipsasahoo03 in feat: Added Termii webhook parser #1750
• feat(web): mailersend integration by @LetItRock in feat(web): mailersend integration #2101
• chore(docker): improve-docs by @p-fernandez in chore(docker): improve-docs #2095
• GitPod integration setup by @vrabe in GitPod integration setup #1842
• Feat migrate mantine notification center by @ainouzgali in Feat migrate mantine notification center #2000
• feat: Check for shouldRun by @BiswaViraj in feat: Check for shouldRun #2083
• feat: utilize entire screen height on workflow editor by @Ian-Yy in feat: utilize entire screen height on workflow editor #2012
• feat(provider): Add @infobip-community as a SMS provider by @ukmadlz in feat(provider): Add @infobip-community as a SMS provider #2045
• chore: Updated stateless package to 0.9.0 by @Cryptic-ai in chore: Updated stateless package to 0.9.0 #2114
• feat(provider): Add burstSMS as an SMS provider by @dlmcauslan in feat(provider): Add burstSMS as an SMS provider #2080
• feat: New Outlook365 provider by @Cryptic-ai in feat: New Outlook365 provider #2117
• fix: added functionality to override subscriber preference for system critical messages by @BiswaViraj in fix: added functionality to override subscriber preference for system critical messages #2125
• NV-1142 feat(web): migrate to mantine v5 by @LetItRock in NV-1142 feat(web): migrate to mantine v5 #1986
• Implements clickatell sms provider by @Abobos in Implements clickatell sms provider #703
• fix: misleading resend invite on self-host by @djabarovgeorge in fix: misleading resend invite on self-host #2100
• NV-1200 Missing security headers by @scopsy in NV-1200 Missing security headers #2130
• feat: test amazon ses connection by @L-390 in feat: test amazon ses connection #1537
• feat: Initial Container Optimization by @Cliftonz in feat: Initial Container Optimization #1990
• Docker file test branch merge by @scopsy in Docker file test branch merge #2138
• Add .deepsource.toml by @deepsource-autofix in Add .deepsource.toml #2140
• Fix Yoda conditions by @deepsource-autofix in Fix Yoda conditions #2142
• feat: added sparkpost provider by @krshkun in feat: added sparkpost provider #1331
• feat: Rename nodemailer integration to custom smtp by @shtelzerartem in feat: Rename nodemailer integration to custom smtp #1821
• chore(infra): fix-shellcheck-errors-from-deepsource by @p-fernandez in chore(infra): fix-shellcheck-errors-from-deepsource #2151
• chore(infra): apply suggestions from deepsource for js code by @p-fernandez in chore(infra): apply suggestions from deepsource for js code #2152
• Removed duplicate ISubscriberPayload in subscriber.interface by @viktorlarsson in Removed duplicate ISubscriberPayload in subscriber.interface #2157
• fix: added vertical space between pills issue [NV-1258] Add space between pills #2110 by @Aadarsh805 in fix: added vertical space between pills issue #2110 #2176
• fix: remove only flag by @djabarovgeorge in fix: remove only flag #2219
• fix: pass sender from email and name for SendInBlue provider by @achadha235 in fix: pass sender from email and name for SendInBlue provider #1815
• feat: added segment analytics and dotenv by @BiswaViraj in feat: added segment analytics and dotenv #2145
• NV-1302 feat(ws): upgrade socket.io v4 by @vinhnguyen1211 in NV-1302 feat(ws): upgrade socket.io v4 #2223
• [NV-1285] (JS-0414) Add Missing key for properties by @ttlgeek in [NV-1285] (JS-0414) Add Missing key for properties #2216
• feat(notification-center): allow for an easier styling with a styles prop by @LetItRock in feat(notification-center): allow for an easier styling with a styles prop #2156
• feat(ci): build api and web Docker images with Depot by @jacobwgillespie in feat(ci): build api and web Docker images with Depot #2131
• Depot deployments by @scopsy in Depot deployments #2244
• fix: use sender name with from email in ses provider by @ArturHamannRonconi in fix: use sender name with from email in ses provider #2226
• fix: upgrade the dropzone version by @BiswaViraj in fix: upgrade the dropzone version #2250
• feat(notification-center): build the web component to umd module by @LetItRock in feat(notification-center): build the web component to umd module #2214
• Nv 1203 lack of rate limiting mechanism by @BiswaViraj in Nv 1203 lack of rate limiting mechanism #2247
• feat: added user lockout mechanism by @BiswaViraj in feat: added user lockout mechanism #2210
• Nv 1202 username enumeration by @BiswaViraj in Nv 1202 username enumeration #2257
• fix: unhandled no template steps scenario by @scopsy in fix: unhandled no template steps scenario #2264
• Format code with prettier by @deepsource-autofix in Format code with prettier #2262
• Remove unused serverless package by @scopsy in Remove unused serverless package #2261
• Fixing a possible severe security vulnerability. by @Cxxshyy in Fixing a possible severe security vulnerability. #2273
• feat: remove pii from sentry reports by @scopsy in feat: remove pii from sentry reports #2276
• fix: reload of preview on change in json input field by @davidsoderberg in fix: reload of preview on change in json input field #2275
• fix(web): Remove .only flag by @scopsy in fix(web): Remove .only flag #2279
• fix: added roles to the divs having onclick and onkeyup functions issue [NV-1329] (JS-0765) Prefer that non-interactive, visible elements (such as <div>) that have click handlers use the role attribute #2243 by @Aadarsh805 in fix: added roles to the divs having onclick and onkeyup functions issue #2243 #2272
• Change the empty state copy for the URL for button by @Cxxshyy in Change the empty state copy for the URL for button #2281
• fix(infra): resolve some deepsource javascript issues by @p-fernandez in fix(infra): resolve some deepsource javascript issues #2286
• use-case seen cache poc by @djabarovgeorge in use-case seen cache poc #2240
• Fix/unique infobip provider by @ukmadlz in Fix/unique infobip provider #2249
• Cache trigger subscriber dal query by @djabarovgeorge in Cache trigger subscriber dal query #2263
• feat: add trigger notification template cache by @djabarovgeorge in feat: add trigger notification template cache #2266
• Nv 1353 cache user dal query by @djabarovgeorge in Nv 1353 cache user dal query #2271
• feat: add integration cache on trigger flow by @djabarovgeorge in feat: add integration cache on trigger flow #2285
• Remove redundant usage of "undefinded" on an optional param by @Cxxshyy in Remove redundant usage of "undefinded" on an optional param #2300
• fix(api): topic flows should use external subscriber id (user's custom id) by @p-fernandez in fix(api): topic flows should use external subscriber id (user's custom id) #2282
• feat(api): add endpoint to rename the topic by @p-fernandez in feat(api): add endpoint to rename the topic #2284
• feat: added infinite api scroll for vercel projects by @BiswaViraj in feat: added infinite api scroll for vercel projects #2302
• feat(api): add tests for triggering a event to a single topic by @p-fernandez in feat(api): add tests for triggering a event to a single topic #2283
• feat(api): test suite for multiple payloads and multiple subscribers by @p-fernandez in feat(api): test suite for multiple payloads and multiple subscribers #2306
• feat(package): implement topics functionality by @p-fernandez in feat(package): implement topics functionality #2307
• feat(api): when adding subscribers provide succeeded and failed subsc by @p-fernandez in feat(api): when adding subscribers provide succeeded and failed subsc #2309
• fix: pushes pagination to bottom by @BhuvaneshPatil in fix: pushes pagination to bottom #2298
• fix: no return in map function by @ShashwatAgrawal20 in fix: no return in map function #2303
• feat: Missing events by @scopsy in feat: Missing events #2310
• stacked prs of usecase cache by @djabarovgeorge in stacked prs of usecase cache #2294
• feat: upgrade cypress version to 12 by @scopsy in feat: upgrade cypress version to 12 #2311
• cache ttl variant by @djabarovgeorge in cache ttl variant #2296
• chore(notification-center): umd bundle deployment for nc web component by @LetItRock in chore(notification-center): umd bundle deployment for nc web component #2255
• feat: trigger a notification to a topic by @p-fernandez in feat: trigger a notification to a topic #2248
• Fix notification template invalidation by @djabarovgeorge in Fix notification template invalidation #2319
• feat: create invalidate cache service by @djabarovgeorge in feat: create invalidate cache service #2295
• feat(notification-center-vue): allow to use custom notification bell button by @LetItRock in feat(notification-center-vue): allow to use custom notification bell button #2293
• docs(notification-center-vue): updated the docs about how to use the vue notification center component by @LetItRock in docs(notification-center-vue): updated the docs about how to use the vue notification center component #2318
• Reduce cypress flakiness test by @scopsy in Reduce cypress flakiness test #2320
• [NV-1367] (JS-0050) Avoid use of == and != issue#2287 by @ShashwatAgrawal20 in [NV-1367] (JS-0050) Avoid use of == and != issue#2287 #2292
• feat: add exception throw on invalid subscriber id by @djabarovgeorge in feat: add exception throw on invalid subscriber id #2323
• feat: add cache documentation by @djabarovgeorge in feat: add cache documentation #2308
• Nv 1205 weak password policy by @BiswaViraj in Nv 1205 weak password policy #2269
• Notification template actions accessible with api key by @ainouzgali in Notification template actions accessible with api key #2327
• feat: widget and embed styles prop (NV-1385) by @LetItRock in feat: widget and embed styles prop (NV-1385) #2324
• feat: moved token to auth header by @BiswaViraj in feat: moved token to auth header #2328
• Source map for sentry by @scopsy in Source map for sentry #2332
• feat: migrate to tanstack query v4 by @LetItRock in feat: migrate to tanstack query v4 #2316
• fix: so nodemailer can be used without user and password by @davidsoderberg in fix: so nodemailer can be used without user and password #2335
• feat: add socket event notification_received by @davidsoderberg in feat: add socket event notification_received #2336
• Nv 1400 typeerror cannot read properties of null by @BiswaViraj in Nv 1400 typeerror cannot read properties of null #2350
• feat: add triage label on communtiy issues by @scopsy in feat: add triage label on communtiy issues #2352
• Fix: [nv-1368] template-literals non-string type bug by @abhinavsaurav in Fix: [nv-1368] template-literals non-string type bug #2347
• fix: add missing embed package for embed docker file by @scopsy in fix: add missing embed package for embed docker file #2357

New Contributors

• @johnnyreilly made their first contribution in fix: remove blog.johnnyreilly.com Google Analytics tag #1992
• @amarkmcconn made their first contribution in Update README.md #1994
• @jsoref made their first contribution in Spelling #1923
• @Kritika30032002 made their first contribution in Updated architecture.md #1893
• @myshri123 made their first contribution in added Bashkir language translations #1844
• @MuzzammilRafiq made their first contribution in modified .eslintrc.js #1835
• @Swahjak made their first contribution in feat: Abstracted content engine #2003
• @sofferjacob made their first contribution in fix: copy bell theme instead of using merge #2010
• @guywal made their first contribution in Fix nested handlebar variables #2039
• @Ian-Yy made their first contribution in feat: utilize entire screen height on workflow editor #2012
• @ukmadlz made their first contribution in feat(provider): Add @infobip-community as a SMS provider #2045
• @Cryptic-ai made their first contribution in chore: Updated stateless package to 0.9.0 #2114
• @dlmcauslan made their first contribution in feat(provider): Add burstSMS as an SMS provider #2080
• @viktorlarsson made their first contribution in Removed duplicate ISubscriberPayload in subscriber.interface #2157
• @Aadarsh805 made their first contribution in fix: added vertical space between pills issue #2110 #2176
• @achadha235 made their first contribution in fix: pass sender from email and name for SendInBlue provider #1815
• @vinhnguyen1211 made their first contribution in NV-1302 feat(ws): upgrade socket.io v4 #2223
• @ttlgeek made their first contribution in [NV-1285] (JS-0414) Add Missing key for properties #2216
• @jacobwgillespie made their first contribution in feat(ci): build api and web Docker images with Depot #2131
• @ArturHamannRonconi made their first contribution in fix: use sender name with from email in ses provider #2226
• @Cxxshyy made their first contribution in Fixing a possible severe security vulnerability. #2273
• @ShashwatAgrawal20 made their first contribution in fix: no return in map function #2303
• @abhinavsaurav made their first contribution in Fix: [nv-1368] template-literals non-string type bug #2347

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

---

This discussion was created from the release v0.10.0 Release - Topics and new e-mail editor.