iFrame

Learn how to use Novu to quickly send multi-channel (SMS, Email, Chat, Push) notifications with iFrame embed

Requirements

To follow the steps in this quickstart, you’ll need:

• A Novu account. Sign up for free if you don’t have one yet.
• Basic knowledge of HTML and JavaScript.

You can also view the completed code of this quick start in a GitHub repo.

Create a workflow

Before triggering a notification, we need to create a workflow. A workflow is like a blueprint that all the notifications are supposed to follow.

The recipients of a triggered notification are called subscribers.

The workflow includes the following:

• Workflow name and Identifier
• Channel-tailored content:

Channel	Content Style	Custom Variables {{handlebars}} format
Email	HTML	✅
	Visual Editor	✅
SMS	Text	✅
Chat	Text	✅
In-App	Text	✅
Push	Text	✅

These are the steps to create a workflow:

1. Click Workflow on the left sidebar of your Novu dashboard.
2. Click the Create Workflow button on the top right.
3. The name of the new workflow is currently “Untitled”. Rename it to a more suitable title.
4. Select In-App as the channel you want to add.

Select the in-app channel.

1. Click on the recently added “In-App” channel and configure it according to your preferences. Once you’re done, click “Update” to save your configuration.

Configure the in-app node as per your needs.

I’ll briefly explain the function of each label in the image above:

• 1-Preview: This shows you a glimpse of how each notification item will look in the Notification Center UI.
• 2-Avatar: If turned on, each notification item will show the avatar of the subscriber.
• 3-Action: With this, you can add a primary and secondary call to action button to each notification item.
• 4-Notification Feeds: This displays a stream of specific notifications. You can have multiple feeds to show specific notifications in multiple tabs.
• 5-Redirect URL: This is the URL to which a subscriber can be directed when they click on a notification item.
• 6-Filter: This feature allows you to configure the criteria for delivering notifications. For instance, you can apply a filter based on a subscriber’s online status to send them an email if they were online within the last hour. Read more about filters.
• 7-Editor: You can add text that you want to be displayed in each notification item. Additionally, you can specify custom variables using {{ }}. This means you can inject variables from your code into a notification item’s text via a payload.

In our case, we’ll use the custom variables functionality, as shown below:

We’re gonna use custom variables here.

Feel free to add only text for now and rename the workflow to quickstart. It automatically creates a slug-like Identifier that will be needed in later steps to trigger a notification. Rename the workflow to ‘quickstart’.

Now, we’ll learn how to create subscribers on Novu - Recipients of Notifications!

Create a subscriber

If you click “Subscriber” on the left sidebar of the Novu dashboard, you’ll see the subscriber list. By default, there will only be one subscriber as you’re automatically added as a subscriber when you sign up for Novu:

One subscriber is automatically created when you sign up.

Now, let’s create a subscriber on Novu. After creating a subscriber, we’ll trigger a notification to this subscriber. Subscribers are identified by a unique subscriberId.

With Novu, you can create a subscriber using any of its SDKs (Node.js, PHP, .NET, Go, Ruby, Python and Kotlin). The code to create a subscriber in Novu is:

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

const novu = new Novu('<NOVU_API_KEY>');

await novu.subscribers.identify('123', {
  firstName: 'Sumit',
  lastName: 'Saurabh',
});

You can get your API key from the Novu dashboard. Replace <NOVU_API_KEY> with it. Now, if you’ll go to the Novu dashboard, you shall see the subscriber we created above with subscriberId of 123.

You can also update information about an already existing subscriber using the subscriber.update method as shown below:

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

const novu = new Novu('<NOVU_API_KEY>');

await novu.subscribers.update('123', {
  firstName: 'Saurabh', // new first name
  lastName: 'Sumit', // new last name
});

Embed iFrame Notification Center in a your web app

1. Create a simple HTML file, you can call it index.html

2. Copy the following code snippet, it contains a basic html structure with some design elements to make things look more pretty

   Note that we are using fontAwesome library as a stylesheet dependency.

   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
   
       <title>iFrame Quickstart</title>
       <style>
           body {
               font-family: Arial, sans-serif;
               background-color: #f4f4f4;
               margin: 0;
               padding: 0;
               display: flex;
               justify-content: center;
               align-items: top;
               min-height: 100vh;
           }
   
           .container {
               text-align: center;
               padding: 20px;
               border-radius: 10px;
               background-color: #ffffff;
               box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
           }
   
           h1 {
               color: #333333;
           }
   
           p {
               color: #666666;
               line-height: 1.6;
           }
   
           .fa {
               cursor: pointer;
           }
   
           .fa:hover {
               color: #0056b3;
           }
       </style>
   </head>
   
   <body>
   
       <div class="container">
           <h1>iFrame Notification Center Icon Bell</h1>
           <div id="notification-bell">
               <i class="fa fa-bell fa-2x"></i>
               <span id="unseen-badge"></span>
           </div>
           <p>Click on the notification bell to see the feed</p>
       </div>
       </div>
   
       <script>
       </script>
   </body>
   
   </html>
   

3. To activate the iFrame, you should include the following code as a script in your html app.

   <script>
     (function(n,o,t,i,f) {
       n[i] = {}; var m = ['init', 'on']; n[i]._c = [];m.forEach(me => n[i][me] = function() {n[i]._c.push([me, arguments])});
       var elt = o.createElement(f); elt.type = "text/javascript"; elt.async = true; elt.src = t;
       var before = o.getElementsByTagName(f)[0]; before.parentNode.insertBefore(elt, before);
     })(window, document, 'https://embed.novu.co/embed.umd.min.js', 'novu', 'script');
   
     novu.init(
       '<REPLACE_applicationIdentifier>',
       {
         unseenBadgeSelector: '#unseen-badge',
         bellSelector: '#notification-bell',
       },
       {
         subscriberId: '<REPLACE_WITH_subscriberId>',
       }
     );
   </script>
   

   You’ll notice two things used above - applicationIdentifier and subscriberID.

   An application identifier is a public key used to identify your application. You can get your own application identifier from the Novu dashboard settings.

   And subscribers are users to which notifications will be sent. They are identified by a subscriberID which you can also find in the Novu subscribers dashboard.

4. Now open your html application, you should see something like this:

If you have replaced the applicationIdentifier and **subscriberID ,**when you will click the bell, you will see the following:

To learn how to design and modify your iFrame component, feel free to visit the more in-depth iFrame section.

Trigger a notification

We can trigger a notification by simply clicking on the Get Snippet button

Switch to Run a Test option

Change the subscriberId that we have created (123)

Click on Run Trigger

This will take the workflow we created above with the identifier quickstart and send a notification to the subscriber with subscriberId of 123.

Now we will open our web application and see a red dot next to the bell icon, this indicate that we have an unseen notification in our feed.

When we will click on it, we will see our notification.

Conclusion

Great job! If you’ve reached this point, you should now have successfully set up the notification center, created a subscriber, a workflow, triggered a notification and saw it in your web application using iFrame embed.

If you want to learn more about iFrame embed component, please visit this section of the documentation.