How to Create Web Notification Bars for Your Website Using OptinMonster?

how-to-create-website-alert-banners-to-keep-visitors-informed-themaverickspirit Pin It

Have you ever seen an attractive notification bar at the very top of the shopping or service providing website?

You probably have even opened it to see what the website is offering. 

These website notification bar are meant to showcase new products or offers of the site.

An eCommerce site owner places these alerts to grab more users to check out their new offers, products, discounts or coupon codes. 

Among all the marketing ways, a notification or announcement banner on your website is one of the most effective ways to boost revenue and traffic.

With the right tool such as OptinMonster, you can add these notification bars to your website quite easily. 


So what exactly is the notification bar and why is it so important? 

Let’s find out, shall we?

What is a Website Notification Bar?

A website notification bar is a promotional banner that you see either on the top of the website or at the bottom of the webpage. 

The primary aim of these notifications is to attract as many users as it can to check out what’s new on the site. 

Most of the websites use notification bars to convey –

  • New offers,
  • New products,
  • Changes in the services,
  • Limited period services or anniversary deals, and more. 
How to build email list using OptinMonster lead generation wordpress plugin

Users can either click on the notification to navigate to the new product page or click on the ‘X’ icon to close the notification.

Benefits of the Website Notification Bars

Website notification bars can do miracles if done correctly. It can gain you more customers thereby boosting the revenue.

Here are some of the benefits you will get from Website notification banners

  1. Web alert bars make it easy for users to redirect to the desired URL. It saves a lot of user efforts and time.
  1. Website notification bars deliver your promotional message to the customers faster than any other medium. 
  1. With creative notifications text, a website visitor might sign up for your mailing list.
  1. There is a high chance that your existing customers will recommend your new offers and services to others after seeing the website notification. 
  1. As the banner will be on the homepage, it will attract more audiences to stop by to see your new products.  
  1. Users will feel more comfortable as website notification doesn’t ask for personal details. 

Steps to Create a Website Notification Bar Using OptinMonster

Below are the steps to create a notification banner for your site. 

Note – You can set up a website announcement bar matching the theme of your website using OptinMonster.

Step 1 – Login to OptinMonster Account

Firstly, you need to login to your OptinMonster Account


Step 2 – Create New Campaign

Click on Create New Campaign appearing in the top right-hand of the dashboard.


Step 3 – Choose Floating Bar Campaign Type

Next, you need to choose the Floating Bar from the campaign types.


Step 4 – Select Notification Bar Template

Once you have selected the campaign type, you can then choose the template.

Note – OptinMonster offers over 50 pre-designed templates to create website banner alerts. Get All OptinMonster Templates Now


We are using Alert template because of its bright red color but you can always change its color to match your brand and website colors.

And, if you don’t find a suitable website notification bar template, you can always create a website alert bar from scratch and customize it to shape your idea.

Step 5 – Name Your Campaign & Select Websites

Once you finalize the template, you will be asked to name the campaign and select your websites that you want to create the campaign for.


You can enter multiple websites and you can use the same notification bar on multiple websites.

Step 6 – Edit Campaign Settings

Once you have done the above step, it will get open in OptinMonster editor where you can modify the following settings –

a. Position of the Notification Bar

To change the position of your alert bar, Go to Floating Settings, and turn on the toggle switch appearing in front of Load Floating Bar at Top of Page


b. Text of the Campaign

Next, you need to change the content of your campaign.


You can easily change the text just by clicking on the text you want to modify. It will open an editor where you can write the desired text.

c. Button of the Campaign

Just like content, all you need to do is to click on the button to modify the button text, width, alignment, color, icon, icon spacing, etc.


Make sure you change the action URL of your campaign from button settings.


Step 7 – Change Display Rules to Immediate (Optional)

With this extra step, you can target your customers in a better way.

Go to Display Settings appearing at the top menu and change time on page to is immediate.


This small change will improve the user experience of your website’s notification bar.

Step 8 – Save The OptinMonster Campaign

Next, you need to save your campaign.


Step 9 – Publish The Campaign

Lastly, you need to click on the Publish button and then toggle the status to Live to make the campaign live.


Final Look of Web Announcement Bar On Your Website

Once you design the complete website alert or announcement bar on OptinMonster and hit Publish.

Here is the reference image on how the web alert bar will look on your website.


Top 5 Examples of Why You Should Have a Website Notification Bars

Here are some examples to help you get started. 

1. Social Snap


At the top of the website, you will see a notification banner of the new offer period. There is a call to action button which will take the user to the webpage of the offer.

In this case, the website takes you to the ‘Pricing’ page to show a 30% discount offer. 

The notification bar also tells when the offer will end. That timer increases the chance of users buying the service before the end period. 

2. Moosend


The second example is an email campaign to claim the offer. The notification text shows a new offer. Users can claim it by entering an email address. 

This method will serve two purposes. One is adding new emails to the mailing list. The second is to analyze how many people are interested in the service.

3. SendPulse


On the home page of SendPulse, you will see a discount coupon code offer.

This type of notification can gain user’s interest with a simple message of coupon code and a discount amount.

This is a good example of transparency and quick delivery of the offer.  

4. TemplateMonster


TemplateMonster has created an eye-catchy notification banner about their new subscription plan.

If you see, it’s a simple message of a discounted price for a certain plan. But the highlighted text “Unlimited Access” does all the magic.

5. Amazon


Amazon uses notification bars at the top of the webpage as well as scrollable banners on the home page. The notification bars are often about discount on specific bank credit/debit cards. 

The scrollable banners show multiple offers with a discount period and percent. For example, Prime day sale from 6th-7th Aug with up to 60% off. 

Amazon website notifications are an example of multiple offer options for users to choose from. 

Conclusion – How to Create a Web Alert Bar in WordPress?

From the above examples, it is clear that the notification bar should be –

  • Easily spottable by users. 
  • It should be eye catchy revealing exciting offers.
  • It should navigate the user to the landing webpage via a call to action.

There are so many ways to design creative Notification bars for your website. The more you make it attractive enough to check, the more audience you’ll gain. 

You might already have a marketing plan for your website including emails and social media.

Adding these tiny notification banners on your website will make a considerable contribution to your marketing plan.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share via
Copy link