Ultimate Guide to Adding a Cookie Banner to Your Website

Ultimate Guide to Adding a Cookie Banner to Your Website
Colin Newcomer Colin Newcomer Apr 19, 2023 —  7 min read

You've probably noticed how it seems like every single website you visit nowadays includes some notification about using cookies.

Now you might be wondering… does my site need one of those cookie consent notices? And if so, how can I create one?

The answer to the first question is “probably”. And as for the second question, that's what this post is all about!

In this post, you'll get a quick primer on whether your site actually needs a cookie consent banner. Then, we'll share a step-by-step tutorial for how you can use Getsitecontrol to create a cookie consent banner for your site without any special knowledge.

You’ll be able to create a banner that slides in from the side of the screen 👇

… or appears as a compact floating bar at the top or bottom of the page:

If your website receives visitors from the European Union, you probably need a cookie consent banner if you want to stay on the good side of European Union regulations.

Originally adopted in 2011 and expanded with the GDPR in 2018, the European Union's rules on cookies essentially require that you get “clear, informed consent” from visitors in order to use cookies that track user data.

That's technically not every single website, but with the popularity of tools like Google Analytics, Facebook Pixel, social media share buttons, and others, there's a fairly good chance that your website uses at least some tracking cookies.

So in practice, most sites that receive visitors from the European Union need a cookie consent banner. And in this global world, that's most sites — period.

Long story short… you probably need it if you want to comply with the European Union's regulations.

The purpose of a cookie banner is to get informed consent to use cookies before visitors start using your site.

This means that you need to:

  • Display the cookie consent banner immediately upon a user's first visit.
  • Receive informed consent from visitors to use cookies. Usually, this is done by linking out to your privacy/cookie policy, as well as a button that indicates consent.

In the sections below, we’ll show you how to do exactly that.

Ok, so you need a cookie banner. Now — where do you put it?

You can place your cookie banner wherever you want, as long as it's visible enough to attract readers' attention and get informed consent.

Let's start off with a few examples, and then we'll show you how you can duplicate any of these examples on your own site without needing to write a single line of code.

The Vinyl Factory uses a minimalistic bottom bar for its cookie consent:

The Vinyl Factory uses a bottom banner to display their cookie consent message

Notice how this banner informs visitors of the purposes for collecting cookies and explains what happens when a visitor clicks ACCEPT.

ASI, Advertising Specialty Institute switches things up by moving the cookie banner to the top of the page:

The ASI has placed their cookie banner at the top of a page

This bar is even more informative than the previous example, and it’s also more eye-catching because of the dark theme and the website-matching button color.

INUSUAL opts to show the cookie consent banner as a slide-in in the bottom left corner:

INUSUAL uses a slide-in to display their cookie banner

Slide-ins are more versatile than bars, and you can just as easily place them on the right side or at the top of the screen.

Now for the fun part — how you can create a cookie consent banner for your website.

All three examples above are powered by Getsitecontrol, which is a tool that lets you add different types of widgets to your website. Widgets can be floating contact buttons, email popups, online feedback forms, or… you guessed it – cookie consent banners.

Using a simple interface, you'll be able to customize your banner's:

  • Placement
    Including all the examples above, plus more

  • Text
    Including an option to link to your privacy policy

  • Button
    Both the text and color of your button

  • Colors
    To match your site's design

And it also includes a special responsive mode that makes sure your cookie consent notice works great for mobile visitors, too. Here's how to use Getsitecontrol to create a cookie consent notification…

Step 1: Add Getsitecontrol to your website

While you'll do most of the work in the Getsitecontrol’s web interface, you'll first need to add Getsitecontrol to your website so that you can actually display your cookie consent banner once you publish it.

To do that, you'll need to create a Getsitecontrol account. Then, you'll need to add the Getsitecontrol code snippet to your site. If you're using WordPress, the simplest way to add the snippet is via the official Getsitecontrol plugin. It will handle the integration for you. For other sites, you'll need to manually add the code before the closing </body> tag on your site.

If you're not sure how to do this, the Getsitecontrol documentation has detailed tutorials for most popular platforms, including:

Once you finish the process, you can use the Install code button in your Getsitecontrol dashboard to verify that the code is working:

Getsitecontrol installation code

Now, you're ready to create your actual cookie consent notification!

The fastest way to add a cookie consent notification to your website is to start with a template. Log into your Getsitecontrol dashboard and click on the +Create widget button. Then proceed to Design ideasMessagesCookies.

gallery of cookie banner templates

The templates in the gallery already include some generic text, however, you’ll be able to modify both copy and design if you want.

When ready, select the template you like and follow the prompts on the right-hand side to continue.

Selecting a widget template from the Getsitecontrol gallery

Now that you've got the template, it's time to adjust the consent message for your visitors. You’ll need to fine-tune the default text at your discretion and add a link to your cookie policy.

Getsitecontrol allows you to change your cookie banner color theme

There's no requirement for the exact text that you should put on your banner – but again, the goal here is to get “clear, informed consent”. So, here is an alternative copy you may want to use:

  • Title — This website uses cookies
  • Description — By continuing to use our site, you understand that we use cookies to improve your experience and collect analytics data. Learn more in our Privacy Policy.
  • Button text — I agree

To change the copy, just click on it and type a new message using the built-in text editor. To see how the banner will appear to mobile visitors, switch to the mobile mode below the preview window.

Cookie consent banner, mobile view in Getsitecontrol

💡 It’s typically recommended to clarify which types of cookies you’re collecting from your website visitors and for what purpose. It’s also a good practice to link to the page where visitors can read your Privacy Policy and Cookie Policy.

Step 4: Change the color theme (optional)

In the gallery, templates are available in two default color themes: black and white. However, if you want your banner's colors to match the rest of your site, you can do that using the Theme settings. Getsitecontrol allows you to change the font and set the colors for:

  • Background
  • Button
  • Message text
  • Button text

Changing the color theme for your cookie consent banner in Getsitecontrol

You can also use the Position menu at the top to change the banner’s position on the screen.

First things first, you want to display your cookie banner to first-time visitors of your website. To avoid pestering visitors as they move around your site, you want to ensure that the banner stops appearing after they click the I agree button. All of this can be set up in the Targeting tab.

Set proper targeting settings to make sure those who have accepted your cookie policy don’t see the banner again

By default, the banner will be displayed at once, on any page your visitors arrive at. All you need to change is two controls:

  • Display widget if: visitor is new
  • Stop displaying widget: forever after the visitor closes it

In this case, the “closure” is the visitor clicking the button to consent to cookie usage. You don't need to change any other settings in the Targeting tab.

💡 Keep in mind that if a visitor uses your website from a different device or clears their browser cache before the next visit, they’ll be considered first-time visitors again.

Now, you're pretty much done! Click Next → in the top right corner to finish configuring the banner and close the editor.

Then, choose the option to Activate now as suggested by the app:

Cookie banner activated

Once you do that, your website visitors will start seeing the cookie consent notice. And once they click the button to agree to cookie usage, they'll no longer see the banner.

Keeping your website on the good side of the cookie consent law isn't something you need a developer for. By using Getsitecontrol and the principles outlined in this post, you can set up your own custom cookie consent banner that communicates your policy and matches the design of your website. All of that – without needing to write a single line of code.

P.S. You can visit the gallery of cookie banner templates without creating a Getsitecontrol account. Feel free to click around and see how each banner looks in action. Then select the one you want to place on your website and follow brief step-by-step instructions.

Colin Newcomer is a freelance writer with a background in SEO and affiliate marketing. He helps clients grow their web visibility by writing primarily about WordPress and digital marketing.

You're reading Getsitecontrol blog where marketing experts share proven tactics to grow your online business. This article is a part of Customer engagement section.

Get the print version

Download a PDF version of our blog post for easier offline reading and sharing with coworkers.

Download PDF