Web toolbar or web bar is one of the simple and easy ways to increase user engagement on your site. Hello Bar is one of such a free toolbar which you can add in your site. It offers multiple ways to increase the user engagement and you can insert the notification bar for free. In this article, we will explain the step by step process of adding Hello Bar in WordPress site with generating installation code and customizing the look.
What Hello Bar Can Do?
You can do the followings with Hello Bar.
- Show a bar to drive traffic to a specific page or collect emails for subscription. You can also use this bar to show announcement or phone number for call back.
- Show beautiful push notifications to get subscribers to your blog content.
- You can display the bar on top like a notification bar, show on click as a modal, full-page pop-up, as a slider or as an alert.
- You can customize the way how it looks and position wherever you want on the site.
Add Hello Bar in WordPress
Follow the below steps to setup Hello Bar in WordPress.
Step1 – Starting with Site URL
Open Hello Bar website, enter your site URL in the box that shows.
In next step, you will be prompted to signup for an account.
After signing up and creating your account, you will see a dashboard. Click on “Create a pop-up” button from the sidebar to create your first Hello Bar widget.
Step2 – Set Your Goal
Choose the purpose of installing Hello Bar in your WordPress site. You have multiple options and we will explain with “Target a URL” to drive traffic to a specific page in your site. The target page could be a product page selling item or deal page showing a special coupon for your readers. You will see the preview after selecting a goal and display type. Click “Next” button to continue further.
Step3 – Choose a Type
After choosing the goal the next step is to choose a type of the bar you want to show on the site. You have multiple options to show a notification bar on top, alert, modal, etc. We will use “Bar” option which will show a top bar.
You will see an instant preview of the bar on your site and click “Next” button to start customizing the bar.
Step4 – Customizing Hello Bar Design
The “Design” section has multiple options to customize each element on the bar.
The preview will show with a default template that may not fit well on your site. Click on the “Change Template” button under “Template” tab. Now, you will see a huge list of pre-defined template from which you can choose the best one. Also, we recommend to select “Autodetect colors from site” button and preview the bar that automatically blend with your site’s layout.
Under “URL target” tab, you can change the previously provided site URL to a new page. You can also select the page to open in a new window (otherwise it will open in the same window).
Under “Bar Styling” and “Button Styling” tabs, you can customize the colors, position of the bar (top or bottom) and size. The remaining two options “Landing Question” and “Countdown Timer” are premium options which you can’t use it with free plan.
Step5 – Settings and Targeting
Click “Next” button to move on to the “Settings” section. Here, you can adjust few things like allowing visitors to hide the bar, push or overlap the content, etc.
The next targeting section allows you to control who can see the bar – you can allow everyone or only mobile visitors to see the bar. Also, choose what action you want to take after a conversion. For example, if the visitor clicked on the Hello Bar call to action button, then you may not want to show the bar for the rest of session. Alternatively, you can load the bar on each page load or after certain days of interval.
Step6 – Preview and Adjust Text
After finishing all your customizations, check the Hello Bar preview in desktop, mobile and tablet by toggling the device icon. If you find the text is too long or short, click on it and enter right from the preview section. You can also adjust text color, size, insert emoticon and insert a link.
Step7: Choose Platform for Installation
Click on the “Publish Now” button to create the Hello Bar as per your design. This will take you back to the dashboard with a warning message showing “Note! You Hello Bar has not been installed yet! You won’t see any results until it’s been installed”. Click on the “Install” link next to this message or click “Install” option from the sidebar menu items.
Alternatively, click on the small down arrow next to your profile name on top right corner and choose “Installation Instructions” option. Now, you will see the installation script along with a list of different platforms. You can install Hello Bar in WordPress, Wix, get the installation code to insert manually on any platforms or send the code in email to your developer to assist you.
Step8 – Add Hello Bar in WordPress Site
You have two options to insert the installation code in WordPress.
I Can Install Code Myself
First option is to edit theme file and insert the code manually. Click on “I can install code myself” option and copy the installation script. Actually, you can insert the code manually in any platforms including WordPress.
- Login to your server remotely using FTP.
- Navigate to “/public_html/wp-content/themes/your-theme/” section.
- Locate “header.php” file and edit the file.
- Paste the Hello Bar installation code before the closing </head> tag.
- Save the changes and upload the file back to your server.
Instead of using FTP, you can insert the code by navigating to “Appearance > Theme Editor” from WordPress panel and insert the code in your theme’s header.php file. Alternatively, you can use File Manager app in your hosting account for the same purpose.
I Use WordPress
Though manual insertion works well, it is an hassle. Also, you have to use a child theme so that you will not loose the changes when updating your theme. The simple and easy option is to use a dedicated Hello Bar plugin and insert the code.
- First click on “I use WordPress” option and copy the code snipeet from Hello Bar.
- Next, login to your WordPress admin panel and navigate to “Plugins > Add New” section.
- Search for “hello bar” to find Hello Bar plugin.
- Install and activate the plugin in your site.
- Go to “Hello Bar” menu and paste the code in the snippet box.
- Enable the check box below the text box that says, “Load the Hello Bar code in your site’s Header (before </head>)”.
- Click on “Activate Hello Bar” button. You will see a success message like “Congratulations! Hello Bar i now installed on your site”.
- You can change the pasted code snippet by clicking on “Start Over” button. This will delete the previously pasted code and open the snippet box for pasting a new code.
- View your site and confirm the bar is showing properly and make sure to test the link and call to button are working as expected.
If you need any kind of assistance then click on “I need help” option in the installation instructions section of your Hello Bar account. Type your email and send the query to Hello Bar team, they will check and respond on how to resolve your issue.
Step9 – Editing Your Bar and Viewing Reports
You can log in to Hello Bar site and go to “Manage” section. Here, you will all previously created bars.
You can edit the bar anytime after successful installation by clicking on the gear icon against the bar and choosing “Edit” option.
The bar displayed on your site will be automatically adjusted according to the changes and you need not to copy and paste the code every time. You can also pause or delete the bar and generate a separate bar for your mobile users. The dashboard section will show detailed reporting of how many users viewed the bar and clicked the button. You can download the report and check it offline if required. Watch the video presentation on how to add Hello Bar in your site.
Drawbacks of Hello Bar in WordPress Site
Though Hello Bar is easy to install and works effectively, there are many reasons you may not like it:
- The free version shows a Hello Bar logo and link back to their site with a tracking link. This will be unprofessional for showing in WordPress site with custom domain and paid hosting.
- There are plenty of free, easy and good looking alternatives to insert notification bar or newsletter in WordPress.
- You have to create and manage the bard outside WordPress site. There are no integration within WordPress admin panel to view the reporting.
- Loading external script in the header will create render blocking resources problem and impact your page loading speed.
- You have no option to control the visibility of the bar on certain pages. For example, you may be interested in showing the bar only in posts and not in static pages. However, inserting the code in header section will show the bar throughout your site.
- The premium plan is very costly and you can even purchase a commercial WordPress theme for that budget with all features.
If you are a new blogger trying out notification or pop-up setup, then we recommend using Hello Bar till that time you get decent traffic to your site. However, once you have an established site, you may use dedicated WordPress plugin to manage everything from admin panel.