Are you in search of hiya bar examples for inspiration to create your personal?
A hiya bar may be a superb method to greet new visitors coming to your web site for the primary time. It can be a important second for partaking your returning customers.
Right this moment, we’ll share our favourite hiya bar examples that can assist you discover the suitable look, fashion, and messaging in your web site.
On your comfort, be happy to make use of the next desk of contents to navigate on to the hiya bar examples:
Let’s get clear on what a hiya bar is within the first place.
What Is a Hey Bar?
A hiya bar, extra generally often known as a “floating bar” or “banner bar,” is a small marketing campaign that sits on the highest or backside of your consumer’s browser display.
This resting bar usually has a welcome message of some variety and can be utilized to
- Greet new guests
- Welcome returning guests
- Present firm updates
- Recommend standard content material in your publish
- Provide a lead magnet
- And far more
A hiya bar is a superb different to a popup marketing campaign as a result of it may be much less intrusive and stay in your consumer’s display whereas they’re looking your content material.
Which means you may get extra interplay with hiya bars whereas holding UX excessive throughout your web site.
You need to use hiya bars to perform your advertising targets, as you’ll see in only a second from our hiya bar examples. They can be utilized to
- Develop your e mail record
- Enhance registrations for webinars
- Present reductions and buy incentives like free delivery
- Redirect to product pages to extend gross sales
- And extra
Hey banners are a improbable device in your advertising device belt and one which you need to take into account if you happen to haven’t already.
Now that we’re clear on what a hiya bar is, let’s take a look at some hiya bar examples you may be impressed by.
Hey Bar Examples
This publish will present you just a few standard hiya bar examples from throughout the net. Then, we’ll present a small The best way to Make It part on the finish.
With that in thoughts, let’s take a look at our favourite hiya bar examples.
Keep in mind, “hiya bar” and “floating bar” confer with the identical factor and will likely be used interchangeably all through the remainder of the publish.
And since that is such an in-depth useful resource for hiya bar examples, we’ve damaged each down by its main perform. However we additionally give perception into create the marketing campaign and why our chosen instance is nice.
Let’s dive into the record.
1. Develop Your Mailing Record
The primary of our hiya bar examples is a straightforward floating bar from ActiveCampaign that shows on the backside of the web page:
This straightforward floating bar with an e mail signup type works nice for constructing your e mail advertising record.
The marketing campaign makes use of OptinMonster’s Postal theme, which contrasts with the principle internet web page. ActiveCampaign modified the copy to incorporate social proof (“hundreds have improved their advertising”) and curiosity (“see why”).
This can be a successful mixture, leading to 800 new signups each month. Learn the entire ActiveCampaign case research for extra particulars.
The best way to Make It
For this, ActiveCampaign used OptinMonster’s Postal Template:
When you see what the template appears like within the editor, you’ll discover that they made just a few modifications:
- Altering the button colour
- Including the Title area to the signup type
- Put the textual content over the signup type somewhat than to the facet
With our inline textual content editor and drag-and-drop builder, these adjustments seemingly took lower than 5 minutes to make.
Which means inside 5 minutes, ActiveCampaign had an expert hiya bar operating reside on their web site.
2. Entice New Leads
Advisor Coach additionally received nice outcomes by utilizing a floating bar marketing campaign on all weblog posts.
The black hiya bar contrasted with the white internet pages, and the yellow name to motion button stood out.
Though we’d have gone for extra distinction to make the button textual content pop, this floating bar labored effectively for Energetic Marketing campaign. On these pages, they doubled their conversions.
Case Examine: See how The Advisor Coach elevated sitewide conversions by 360% with OptinMonster.
The best way to Make It
One factor that the Advisor Coach was involved about was concentrating on cell customers.
That’s as a result of a lot of their site visitors got here from smartphones, so that they wanted campaigns that will look nice on cell units.
With OptinMonster’s template choices, you possibly can filter out template kinds by system:
From there, they used out Cut up template and adjusted the background colour from white to black within the marketing campaign builder:
Solely minor modifications wanted to be made after that with our inline textual content editor.
Once more, this marketing campaign was seemingly created in below 5 minutes.
3. Drive Extra Gross sales
Digital Marketer appreciated our hiya bar different a lot that they used it on two websites: their very own and TruConversion.
This notification bar optin makes use of Sure / No buttons as an alternative of an optin type, making it simple to drive site visitors to the suitable touchdown web page.
In each instances, they used contrasting colours for his or her floating bars. Additionally they triggered the concern of lacking out (FOMO) in guests by placing a particular finish date for his or her provide.
The outcomes: an 8.45% conversion price for one hiya bar, and 6.62% for the opposite.
The best way to Make It
For this, we’ll deal with the Sure/No facet of the marketing campaign creation. Including a Sure/No characteristic is a good way to spice up engagement together with your marketing campaign.
That’s as a result of as soon as folks start a course of, they’re extra more likely to end. And because it’s simpler to get folks to click on “Sure” than kind of their private contact info, a Sure/No marketing campaign is one of the best ways to get issues rolling.
Within the OptinMonster editor, you possibly can click on Sure/No on the high of the display:
Then click on the button that claims Allow Sure/No for This Marketing campaign:
And your Sure/No view will robotically seem within the editor:
You’ll solely want minor adjustments to seek out the suitable messaging that connects together with your viewers. This results in our subsequent hiya bar instance.
4. Join With Your Viewers
Whereas researching hiya bar examples, we discovered an excellent one from Canines Naturally.
This can be a nice instance due to the copy. It entices prospects with a lead magnet and a giant quantity and makes it clear it’s related by together with the present 12 months.
Plus, this floating bar makes use of OptinMonster’s Sure/No varieties, which have confirmed to transform effectively.
The best way to Make It
What stood out to us was the intelligent copy. “Copy” means the persuasive wording used to get folks to interact together with your marketing campaign.
To vary the wording in any OptinMonster marketing campaign, hiya bars included, you should utilize our inline editor:
This lets you shortly change your marketing campaign’s copy to seek out the message that almost all resonates together with your viewers.
5. Educate Your Web site’s Guests
Right here’s one other inventive use of OptinMonster, which is nice for content material producers. Envira Gallery retains it easy by utilizing its floating bar optin to encourage guests to maneuver deeper into the positioning.
Envira’s used a Sure/No type however has switched off the No button to offer a button redirecting guests to a bit of pillar content material.
That is sensible as a result of it avoids asking for something upfront and rewards the press with a precious useful resource. You need to use this floating bar to direct your guests to content material you recognize converts.
The best way to Make It
Earlier, we coated allow the Sure/No characteristic. However now, let’s take a look at eradicating the No possibility out of your hiya bar, like within the instance above.
Hover your mouse over the Sure/No button and find the garbage can icon:
Click on on that to take away the Sure/No area out of your marketing campaign. Then click on + Add Blocks on the high of your editor:
Lastly, find the Button block so you possibly can drag and drop it into place (the place the Sure/No button block was once):
You’ll discover you could additionally simply change the button textual content within the left-hand modifying menu.
6. Provide Lead Magnets
The OptinMonster floating bar optin instance on Jeff Bullas’ web site mirrors his navigation bar, which suggests it tends to mix in when guests scroll. Nonetheless, it’s efficient when guests first land on the positioning.
This black hiya bar combines compelling social proof (“5 million guests a 12 months”) with the engaging provide of free info.
The inexperienced name to motion button is extremely seen – guests will discover it.
The best way to Make It
What makes this marketing campaign so efficient is the design. Once more, that inexperienced button is why the marketing campaign stands out a lot within the first place.
In any other case, it might merely mix in with the remainder of the positioning.
In order for you a easy modification like that, you possibly can simply change the button colour. Simply click on on the button in your marketing campaign block and pull up the modifying instruments on the left-hand facet:
Then you possibly can modify the colour of your marketing campaign to make it completely match your model OR stand out to seize your consumer’s consideration.
7. Create a Sense of Urgency
Should you’re enthusiastic about hiya bar examples straight impacting the underside line, take a look at Kennedy Blue.
This darkish blue floating bar grabs guests’ consideration because it contrasts with the pastel tones on the remainder of the positioning. The white textual content is extremely seen, and, mixed with the countdown timer and coupon code, creates urgency for guests.
It’s no shock that this floating bar boosted gross sales by 50%.
Associated Useful resource: See our record of 6 extremely simple floating bar hacks to spice up conversions.
The best way to Make It
Right here you’ll discover that the important thing to Kennedy Blue’s success was in creating urgency for the customers. For that, they used a countdown timer.
Doing that’s simple. Click on + Add Blocks on the high of your editor (we did this earlier so as to add a button):
Then find the block Countdown Timer from the left-hand facet menu. From there, you possibly can drag and drop it into place:
You’ll discover that the styling of the countdown timer will want some adjustments. Whenever you click on on the Countdown Timer block, you’ll see the modifying choices within the left-hand facet menu:
This lets you shortly and simply make the mandatory modifications to construct urgency in your customers.
8. Give Reductions and Coupons
Whereas we’re with regards to making gross sales, a hiya bar on the pricing web page paid off for LifterLMS.
Like the instance above, the corporate included a transparent provide with a coupon code and used a countdown timer to create urgency. In simply 5 months, this marketing campaign introduced in $23,700 in gross sales and seven,000 new leads that Lifter would have missed.
The best way to Make It
This one’s tremendous simple. Need to create the hiya bar instance from above? The one with the countdown timer AND the embedded coupon?
You need to use OptinMonster’s Countdown template:
This has every thing you’ll want to replicate LifterLMS’s marketing campaign to see the identical unimaginable outcomes.
9. Goal Campaigns to Your Excellent Purchaser
Optimize My Airbnb makes use of a few of the strategies we’ve already seen to make its hiya bar stand out.
For instance, the inexperienced background contrasts with the positioning, making the bar seen.
The yellow name to motion button stands out, too, and there’s a transparent assertion of what’s on provide when guests join. The usage of sure/no varieties will even assist this marketing campaign convert effectively. Listed below are some extra inventive methods to combine sure/no varieties into your advertising.
The best way to Make It
One factor about campaigns like these is that they could now be the suitable for each web page in your web site.
Generally, you’ll desire a hiya bar in your homepage somewhat than a product web page. You could want to have a floating bar in your weblog posts, however you’ve gotten different campaigns operating for touchdown pages.
Regardless of the purpose, organising campaigns for particular pages is tremendous simple. Go to Show Guidelines in your OptinMonster editor:
Then you possibly can choose the URL path you need this to point out up on. You possibly can select from many choices, like:
- Any web page
- The homepage
- Pages aside from the homepage
- URL precisely matches
- And far more
With just some clicks from this displayed drop-down menu, you possibly can place your hiya bars precisely the place you need. And the perfect half is that you just don’t want any tech abilities or coding expertise to take action.
10. Increase Conversions on Touchdown Pages
As you’d count on, we use floating bars, too. They’re our favourite method to announce a sale or a deal. Sometimes, you’ll see our floating bar optin on the high of the OptinMonster pricing web page, the place guests can entry it.
We often keep on with the default countdown timer colour scheme: a white notification bar with black textual content, a pink countdown button, and a yellow coupon code.
Does it work effectively for us? We’re going to say that we use it yearly on all our websites, so what do you assume?
The best way to Make It
Like LifterLMS, this makes use of the Countdown template:
One factor you could wish to notice in regards to the countdown timer is that you’ve two choices:
Static countdown timers have a hard and fast begin and finish date. Then again, dynamic countdown timers begin when the consumer first sees it and finish after a particular period of time.
That approach, everybody has the identical time to take you up in your provide.
So let’s say you’ve gotten a brand new web site customer named Frank who comes on a Tuesday. Frank sees that he has seven days to buy and redeem his low cost. Which means Frank’s sale ends subsequent Tuesday.
However then you definately get one other new customer on Wednesday. We’ll name her Sarah.
Sarah’s countdown timer additionally provides her seven days to take you up in your provide, so her low cost will expire subsequent Wednesday.
Despite the fact that Frank and Sarah noticed their deal on totally different days, a dynamic countdown timer will give them the identical period of time to redeem the provide.
To vary your countdown timer from static to dynamic, click on on the countdown timer in your OptinMonster editor.
Then you possibly can change the kind of timer you need within the left-hand facet modifying menu:
Doing this lets you create extra focused incentives in your viewers. Because of this, you possibly can count on conversion charges to go approach up.
11. Combine With Your Electronic mail Supplier
Stacy Portugal’s floating bar picks up the colour within the web site’s emblem to create visible concord.
The white textual content contrasts properly with the notification bar’s background, and there’s a transparent and easy name to motion to obtain the positioning’s lead magnet.
The best way to Make It
This marketing campaign makes use of our Cut up template with a slight modification within the background and button colour. What’s essential right here, nevertheless, is delivering the lead magnet as soon as the brand new customer indicators up.
You’ll wish to combine the hiya bar together with your e mail service supplier (ESP) or use Monster Leads™ to retailer your new contacts.
Each may be completed from the Integrations portion of your OptinMonster editor:
From the left-hand facet menu, you possibly can choose your ESP from the drop-down record. Should you used TotalSend, for instance, you’d select that possibility:
OptinMonster syncs natively with most main ESPs available on the market. And if you happen to don’t see yours on the record, you possibly can join any ESP with webhooks.
However generally, you could wish to retailer your new leads individually out of your ESP. This helps you retain a backup of your new leads in case of bother together with your ESP. For that, you’ll choose Monster Leads™ from the drop-down menu:
You possibly can hook up your ESP and Monster Leads™ concurrently. When new leads go to your ESP, you possibly can arrange an automatic e mail collection to ship your lead magnet.
12. Empower Your Viewers
The US Pupil Mortgage Heart received nice outcomes utilizing OptinMonster as a hiya bar different. The group received sensible and used a number of OptinMonster campaigns to advertise its lead magnet and generate a 10% enhance in gross sales.
This yellow hiya bar instance contrasts with the muted tones on the positioning and makes use of Sure/No type with the No button turned off to offer a single name to motion.
The best way to Make It
This can be a very refined and easy-to-make marketing campaign. You could possibly replicate this marketing campaign in below 3 minutes utilizing our Alert template:
All you’d have to do is change the textual content, background colour, and button colour. Then you possibly can add the hyperlink to a touchdown web page or product web page by modifying the Button Motion. For that, click on the button to drag up the modifying instruments on the left-hand facet.
Subsequent, change the Button Click on Motion to say “Redirect to a URL” and add the URL within the area field beneath:
Then when customers click on your Sure button, they’ll be redirected the place you need them.
13. Design Skilled Campaigns Rapidly
Lastly, right here’s one other instance of the countdown timer floating bar in motion. This time, it’s on WPForms. You have to catch the pink timer to evoke urgency, and guests have a transparent deal on provide.
The best way to Make It
That is one other instance of OptinMonster’s Countdown timer template. Once more, this can be a nice one to make use of in a pinch since you gained’t want to switch a lot.
As soon as you modify the copy, add your coupon, and modify the colours, you possibly can add this countdown timer to your product web page’s URL, as we’ve seen earlier than:
Then kind within the URL of your pricing web page, and your marketing campaign will likely be able to roll!
The Finest Approach To Make Hey Bars
Beneath every hiya bar instance within the final part, we gave you a fast glimpse at make them.
And in every instance, we used OptinMonster:
That’s as a result of OptinMonster is the perfect and best method to get a hiya bar up and operating in your web site in minutes.
With over 50 prebuilt templates, you don’t must be an expert designer to make beautiful floating bars. And to switch these templates, you don’t want ANY coding or technical abilities.
OptinMonster has a codeless drag-and-drop visible builder that permits you to create high-converting hiya bars in your web site.
And as we already mentioned, you possibly can goal these hiya bars to the suitable components of your viewers in just some clicks. This may be completed with any of OptinMonster’s show guidelines.
Among the hottest guidelines embody:
- Exit-Intent® Expertise: Get better guests as they’re abandoning your web site for good (additionally used to decrease cart abandonment charges).
- OnSite Retargeting®: Preserve customers engaged by exhibiting contemporary campaigns to returning guests.
- Geolocation: Personalize the consumer journey by concentrating on customers primarily based on their bodily location.
- Web page-level: Increase conversions by matching your particular affords together with your on-page content material.
And that’s it! These have been 13 hiya bar examples you can begin utilizing at present.
Construct Skilled Hey Bars FAST!
Printed by Farjad Taheer
Farjad Taheer by no means misses a Liverpool FC recreation; he is a foodie and an expert content material marketer. When off-screen, you’ll seemingly discover Farjad figuring out, spending time with household, or hanging out together with his associates.
