How to add a sticky bar to your website (plus best practices)

How to add a sticky bar to your website (plus best practices)
Artem Tiulnikov
Artem Tiulnikov 5 min read
💥 Join 5K subscribers

Need to display an announcement on your website without being intrusive? A sticky bar got you covered.

What is a sticky bar exactly?

Well, it is a multifunctional banner that you can place to the top or bottom of a page on your website. It can be used to:

  • Notify visitors
  • Collect emails
  • Display cookie message
  • Reduce bounce rate
  • Trigger pop-up forms

Here is an example of a simple sticky bar aimed to notify store visitors about an ongoing sale:

Similarly, you’d be able to place a cookie consent message, an email opt-in form, or any other announcement.

In this article, you’re going to learn how to add a stylish sticky bar to your website using Getsitecontrol – a tool to help you create popups, online forms, and sticky bars without coding.

With Getsitecontrol, you can use ready-made bars from the template gallery or create one from scratch. We’ll talk about the latter option below 👇

Here is how to create a sticky bar:

  1. Log in to your Getsitecontrol account and click Create widget

  2. Choose the type of widget you want to create from the dropdown menu in the top left corner and hit the Bar option. To create an alert bar, choose “I want to notify visitors”. To create an email subscription form, select “I want to collect emails”.

  3. Adjust Position, pick a template in the right-hand side of the screen, and click Continue →

Adjusting position of the alert bar in the Getsitecontrol admin dashboard

  1. Use the Content tab to change the copy. If you’re adding buttons, here you can also decide what happens upon button or background click.

  2. Use the Appearance tab to change the visuals. Access the font, the style, and the colors of your sticky bar in the Theme section and add images or stickers from the gallery if you’d like to.

  3. Check the Targeting tab if you want to display the sticky bar on selected pages of your website or to specific audience segments. If you leave the default settings, it will be visible sitewide.

  4. When you’re done, hit the Save & Close button in the top right corner. Remember to activate the bar by clicking Activate now.

Congratulations! You now have a neat sticky bar ready to notify website visitors about important updates or collect emails.

Now, let’s see what exactly sticky bars can be used for and talk about the best practices.

Five sticky bar examples you can copy for your website

A sticky bar is a versatile tool, its applications many. Below, I’m going to tell you about some of them.

Under the GDPR legislation, your website visitors are to consent to your collecting and processing their data.

Guess what? A sticky bar is a killer cookie consent collector.

And Getsitecontrol makes it super easy for you to add it to your website and start alerting your visitors to your cookie policy.

Make a click on the template above to see the widget in action. If you like it, follow the instructions to add this bar directly to your Getsitecontrol dashboard.

Quick tip. Want to make sure every website visitor sees your message? Then opt for eye-catching colors when creating a sticky bar.

2. Display an alert bar on exit intent

Exit-intent popups are incredibly popular. And while many use modal popups to prevent visitors from leaving a website, what’s really trending now is high, eye-catching sticky bars.

They appear from the bottom of a page when a visitor is about to exit and typically take up to 30-50% of the page space.

Like it? I thought as much.

You can add this template directly to your Getsitecontrol dashboard by hitting the See live preview link above. Or you can create a similar one from scratch by altering padding settings and a few lines in the CSS editor (the Appearance tab).

Once you’re done with the design, go to the Targeting settings and opt to start displaying the widget on Exit intent.

3. Use a sticky bar to collect email addresses

Adding a sticky bar to your website is a great way to collect emails. Why? Because it always remains in view and doesn’t distract visitors from consuming your content.

Want to boost email signup rate? Then offer lead magnets in exchange for a subscription and use power words in your call to action.

4. Notify visitors of changes on your website

Keep your audience in the loop by notifying them of important changes on your website or in your physical store. Tell them about your new releases, alert them to upcoming website maintenance, or an updated website policy.

With Getsitecontrol, you can place a sticky bar both on your website and in your cloud app. To specify where you’d like to display the announcement, go to the Targeting tab and type the URLs of the pages you want to include or exclude.

5. Use your sticky banner as a form trigger

You can also use sticky bars to launch contact and survey forms upon button click.

First off, you’ll need to create both a sticky banner and a form. Then, you’ll be able to set up the form to pop up when visitors hit the button on the sticky bar.

Here is how to do it in three easy-to-follow steps:

Step 1

Find your sticky banner in the Getsitecontrol dashboard and click Edit.

Step 2

Open the Content tab and consider changing the copy on the sticky bar to something relevant to conducting a survey or providing a contact form. For example:

  • Hey! Complete a short survey and get a 20% discount. Start survey

  • Need a helping hand to walk you through our product? Contact us

Step 3

Go to the Buttons section and hit the button text. Add Show widget action in the Action section. Then choose the form you would like to bring upon button click.

And that’s what your sticky banner with a form trigger may look like:

A sticky bar that launches a survey on button click

Which sticky bar would you start with first?

Sticky banners are an excellent means of conveying loud and clear messages to your audience. Make the most of them by collecting emails, offering discounts, notifying visitors of the latest updates or your cookie policy, launching forms, and preventing visitors from abandoning your website.

When designing a sticky bar, remember about your mobile audience too. In the Appearance tab, you can both preview and adjust the way widgets look on smartphone screens with different resolutions.

Tips for your marketing strategy