How to add a notification banner or popup to your website
Tags: webdev, react, beginners, tutorial
Published: 2021-12-02 20:02:04

A product's ability to capture the user's attention is crucial, and dynamic prompts/notification is one such efficient way to engage users.✨

It allows you to communicate with users by directing their attention to the navigation bar and can be used for a variety of purposes, such as for announcing business news, showing off the best features, generating leads, and so on. 

This article will guide you step by step to build your own Dynamic Prompts/Notifications bar. 👩‍💻

> *We used React for the frontend, Canonic for the Part backend.*
> 

Let's begin! 📌

📝**Step 1: Create-react-app**

Lets start with creating a new react project - Use **create-react-app**

```bash
npx create-react-app dynamic-notifications
```

Next, to create a basic skeleton, just edit `src/App.js` 

```jsx
import React from "react";
import "./App.css";

function App() {
  return (
    <div className="app">
      <section className="app-body">
        <h3>Dynamic popups and notifications</h3>
        <p>These notifications come from the data stored on your Canonic app</p>
      </section>
    </div>
  );
}

export default App;
```

✨**Step 2: Add some styling**

Once you're done with the basic skeleton, it's time to add some styling to it. To add the styling use - Edit `src/App.css` 

```css
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h3 {
  font-size: calc(10px + 2vmin);
  margin-bottom: 8px;
}

.app {
  text-align: center;
}

.app-body {
  background-color: #020d57;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
}

.app-body p {
  font-size: calc(2px + 2vmin);
  margin: 0;
  opacity: 0.5;
}
```

After completing the steps above, run `npm start` and you should have something similar to this👇

![step2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpud72w91jeab2vq10ij.png)

🔔**Step 3: Add the Notification details** 

Now it's time to add the notification and some basic styles, add the HTML to `src/App.js`

```jsx
...
<div className="app">
	**<header className="app-notification"> 🚀 This is a notification </header>**
	<section className="app-body">
...
```

✨**Step 4: Make it look nice!**   

Let's add some styling to app, edit `src/App.css`

```css

...

.app-notification {
  position: absolute;
  background-color: #4760ff;
  padding: 8px;
  width: 100%;
  color: #fff;
}

.app-notification p {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

...
```

Once done with the stated steps, this is how it should look: 👇

![Step 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bmjjk88jvi9zl9w5mu6.png)
 

👩‍🔧**Step 5: Let's make it dynamic**

Let's move ahead and make it dynamic.

Here, we want to show a different popup based on certain criteria. However, if we do it on the front end, the logic can easily be exposed. Thus, let’s rather create an API where the logic is computed on the backend, using Canonic.

[**Clone this project**](https://app.canonic.dev/projects/6176d0597ebc7c002e0bf675/graph?utm_source=dev.to&utm_medium=organic_article&utm_campaign=30daysofcanonic_uc_1&utm_term=step5_clone_this_project&utm_content=day_4) and head on to the CMS to create a few notifications. 

![Step 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d78lwgcphkd8z95ttfvf.png)
 

🚀**Step 6: Create custom API**

Once done, head on to the API section and create an API to return random notifications. 

![Step 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmjbjw2iv5x9i8i5cgm8.png)
 
Put the below code into the code section to return random notifications from the database. 

```javascript
module.exports = async function getRandom() {
  const count = await Notification.count();
  const random = Math.floor(Math.random() * count);
  return Notification.findOne().skip(random);
}
```

![Step 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47dgaf99963faen2jpz9.png)
 

🧪**Step 7: Let's test it!** 

In order to do the testing, navigate to the Docs section and select the newly created endpoint. Click Open In Playground and hit the play button. The data should now appear.

![Step 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av338ntleo86wy86tom9.png)
 

⚒**Step 8: Time to integrate backend**

We can easily integrate it by modifying `App.js` so that we fetch the data.

We'll use Axios to make the API call, install it using  -`npm install axios`. 

> Make sure to replace `"YOUR_API_URL_HERE"` with the URL for your endpoint. You should be able to get that from the docs section.
> 

```jsx
...
import axios from "axios"
...
function App() {
  const [notification, setNotification] = React.useState();

  const getNotification = React.useCallback(
    () =>
      axios("YOUR_API_URL_HERE").then(({ data }) => data.data),
    []
  );

  React.useEffect(() => {
    getNotification().then(setNotification);
  }, [getNotification, setNotification]);

	...

	<div className="app">
		{notification && (
      <header
        className="app-notification"
        dangerouslySetInnerHTML={{ __html: notification.text }}
      />
    )}
	...
```

🔔**Step 9: Refresh to get random notification**

After the successful implementation of all the above states steps, you will get a random notification each time you refresh.

![Step 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ms1ojcp0bxr1bxkmnejs.png)

![Step 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2al8thfcazomyfnxvhpb.png)
 

## 🎉 Voila!

You have successfully made your one dynamic prompt. 💃🕺

Check out the **live demo** [here](https://dynamic-notifications.netlify.app/?utm_source=dev.to&utm_medium=organic_article&utm_campaign=30daysofcanonic_uc_1&utm_term=voila_here&utm_content=day_4) and **sample code on github** [here](https://github.com/canonic-dev/canonic-samples#-dynamic-website-popups).

---

## Conclusion 

Hope this guide helps you. You can also check out our other guides [here](https://dev.to/canonic).

Join us on discord to discuss or share with our community. Write to us for any support requests at [support@canonic.dev](mailto:support@canonic.dev). Check out our [website](https://www.canonic.dev/30-days-of-canonic/?utm_source=dev.to&utm_medium=organic_article&utm_campaign=30daysofcanonic_uc_1&utm_term=conclusion_website&utm_content=day_4) to know more about Canonic.

---