How to Add Top Notification Bar in Weebly?

Weebly is one of the easy site builders available for business owners to create website and online store quickly. The site editor offers drag and drop elements and you can install apps from the App Store. However, in most cases these stuffs are not sufficient and you need third-party services to get what you need. Adding top notification bar in Weebly is one such a feature you can easily get from third-party websites like Hello bar. In this article, we will explain how to add top notification bar in Weebly site using Hello bar.

How Notification Bar in Weebly Site Can Help?

Notification bar is kind of a web toolbar helps you to increase user engagement in your site. This is especially useful in the following scenarios:

• Offering discount for particular product and when clicked on the button users will be taken to that special discount page.
• Display a splash news to attract user’s attention.
• Drive traffic to any specific page in your site.
• Collect subscriber’s email addresses and sync up with MailChimp, AWeber or Campaign Monitor.

This article explains step by step process of how to add Hello Bar in Weebly site or on a specific page of your Weebly site with the example of driving traffic to a specific page.

Add Top Notification Bar in Weebly with Hello Bar

Follow the below step by step instructions to add Hello Bar in Weebly.

1. Adding Site in Hello Bar

Go to Hello bar website and generally you will see a live top notification bar on their site. Enter you Weebly site address in “Enter your site URL” box and click “Try It Free” button.

To start using the Hello bar on your site, you need register a free account. After that you will see the dashboard where you can customize the notification bar and get the embed code. Click on the “Create New Popup” menu from the sidebar to start the process.

Note: If you already have a Hello Bar account, login to that and hover over the existing website name to see the list. Now, click “Add New Site” button and add your site in Hello Bar account.

2. Defining Goal

Next step is to define your goal and Hello bar offers the following goal options:

Let’s take an example of “Target a URL” option which can help you to drive traffic to a specific page.

3. Choosing Type

When you choose “Target a URL”, you will see a list of options to show in the bar. The recommendation for URL targeting is to use the Hello Bar and hence choose the

Other options include adding a pop-up modal, slider, page takeover, alert bell or push notification.

4. Customizing Hello Bar

Selecting the type will take you to the editor where you can customize the design, settings and targeting options for your Hello Bar. Enter attractive message to be displayed in the bar which is an important aspect of driving traffic to the specified page. You also can enter the button text like “Click Here” or “Get it Now!!!” The best option is to choose one of the predefined templates that fits your site’s layout. You can see the live preview of the bar on your own in the editor which can help you to customize the button and other styling.

Click on the “Settings” option from the sidebar to customize animation, show close option for visitors, sticky on scroll, etc. Remember, you can’t hide the branding on a free Hello Bar account.

Finally, go to “Targeting” section to set who can see your notification bar and interval to show after conversion.

5. Generating Installation Code

After finishing your customizations, click on “Publish Now” button on top right corner of the editor. You will see a warning message saying, your Hello Bar is not installed yet. Click on the “Install” link from that notification or select “Install” option from the sidebar.

Hello bar provides multiple options to install the code on your website. You have options for WordPress and Wix but there are no default options for installing the code on your Weebly site. Click on the first option “I can install code myself” to view the installation code for your Weebly site. Simply click on the script to copy it in to the clipboard.

6. Installing on Weebly Site

Hello Bar can be installed on a Weebly site without any modification to your theme. You can display the bar on all pages of your site or on any specific page you want. Follow the below instructions in order to install it on all the pages:

• Login to Weebly account and select the site you want to edit.
• Click on the “Settings” tab in the editor and then go to “SEO” section.
• Paste the Hello bar code in the “Header Code” section.
• Click the “Save” button and save your changes
• Publish your site and the Hello Bar will be displayed on all your pages.

7. Installing on Weebly Page

Follow the below instructions in order to display Hello Bar in any specific page of your Weebly site.

• Go to “Pages” tab in Weebly editor.
• Click on the page you want to show the top notification bar from Hello Bar and go to “SEO Settings” section.
• Paste the installation code in “Header Code” section.
• Publish your site to see the Hello Bar showing only on that page.

You can paste the code in any other pages in the same manner.

8. Successful Installation

Once you added the installation code and published your site, check your site in browser to confirm it shows the top notification bar. Alternatively, you can click on the “Let’s check it” button on the Hello Bar sire to open your site in a new browser window. Now, your Weebly site will show a beautiful top notification bar. You can go to the dashboard in your Hello Bar account to get the analytics data of views, clicks, conversion, etc. It is also possible to edit the existing Hello Bar and the changes will be automatically reflected in your site and you do not need to replace the code every time.

Though Hello Bar logo shows in the top notification bar, it is aligned on the left corner without disturbing the content. Only problem is that the free account supports up to 5K page views per month. If you have larger site and really like Hello Bar, then upgrade to the premium Growth plan which will cost you $29 per month for 50K page views. You can upgrade further based on the page views to scale up with additional features.

Do I Have Any Alternative Options?

There are few notification bar apps available in Weebly App Center. However, all of them are premium apps or with intruding free link in the bar. For example, there is a Notification Bar app which is available for free and you can upgrade to $4.99 per month for removing the branding. For additional design customizations you can upgrade the plan to $11.99 per month.

The free notification bar will show an intruding branding link below your notification in the same bar which is unacceptable in any standards. Instead of paying $11.99 per month for this type of app, you can rely on Hello Bar which has multiple options like push notifications.