> ## Documentation Index
> Fetch the complete documentation index at: https://v0.x-docs.novu.co/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](http://web.novu.co/?utm_campaign=docs-gs-quick-iframe)** if you don’t have one yet.
* Basic knowledge of HTML and JavaScript.

You can also **[view the completed code](https://github.com/novuhq/iframe-quickstart)** 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<br /><br /> | Content Style<br /><br /> | Custom Variables<br />`{{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.

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/1.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=7980f518ed6772280dc390f9701535eb" width="2000" height="1070" data-path="images/quickstarts/iframe/1.png" />

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.

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/2.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=823c7ab17d6492ef101a236d4bb54a16" width="2000" height="1378" data-path="images/quickstarts/iframe/2.png" />

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](/workflows/notification-workflows).
* **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:

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/3.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=669e8daa52a07b81d9bafd0a441890bd" width="2000" height="1118" data-path="images/quickstarts/iframe/3.png" />

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

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/4.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=e4ec7744a467855b5af23b61b5a72a21" width="2000" height="1122" data-path="images/quickstarts/iframe/4.png" />

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](https://web.novu.co/subscribers?utm_campaign=docs-quick-iframe)**, 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:

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/5.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=bf6c27c161bfa981c3854278d3fd2505" width="2000" height="1115" data-path="images/quickstarts/iframe/5.png" />

<Note> One subscriber is automatically created when you sign up. If you don't see the default subscriber, follow [how to create subscriber](/subscribers/subscribers#create-a-subscriber) documentation to learn on how to create one </Note>

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:

```jsx theme={null}
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:

```jsx theme={null}
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> Note that we are using fontAwesome library as a stylesheet dependency. </Note>

   ```html theme={null}
   <!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.

   ```jsx theme={null}
   <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](https://web.novu.co/settings?utm_campaign=docs-quick-iframe)**.

   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](https://web.novu.co/subscribers?utm_campaign=docs-quick-iframe)**.

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

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/6.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=436ec22579ac1f977e521f15481fe7f6" width="1909" height="994" data-path="images/quickstarts/iframe/6.png" />

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

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/7.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=00a8642edeec5c334d6eef196f6737c8" width="1909" height="994" data-path="images/quickstarts/iframe/7.png" />

To learn how to design and modify your iFrame component, feel free to visit the more in-depth [iFrame section](notification-center/client/iframe).

## Trigger a notification

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

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/8.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=414e6801dd139434c519d5ff7ed3cab1" width="1909" height="994" data-path="images/quickstarts/iframe/8.png" />

Switch to `Run a Test` option

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/9.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=1752319844e0f8dcd9163c828cebec5b" width="1909" height="994" data-path="images/quickstarts/iframe/9.png" />

Change the `subscriberId` that we have created (`123`)

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/10.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=cb97a0858e5182a3e016cea124d84a8c" width="1909" height="994" data-path="images/quickstarts/iframe/10.png" />

Click on `Run Trigger`

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/11.png?fit=max&auto=format&n=rGvFx0oDoBLPCuxk&q=85&s=6c4b0e280b2faa0cb09390d8fb144e9a" width="1909" height="994" data-path="images/quickstarts/iframe/11.png" />

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.

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/novu-v2-docs/rGvFx0oDoBLPCuxk/images/quickstarts/iframe/test.gif?s=41c45b44d48c0f21e1f2cbd448371c70" width="1920" height="1080" data-path="images/quickstarts/iframe/test.gif" />

## 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](/notification-center/client/iframe) of the documentation.