Ultimate Guide to Adding a Cookie Banner to Your Website

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

Do I need a cookie consent banner on my website?

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.

Here's what you need to include on your cookie consent notification

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.

Three great examples of cookie banners in action (you'll learn how to recreate any of these)

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.

1. The bottom bar cookie consent banner

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

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

2. The top bar cookie consent banner

ASI, Advertising Specialty Institute switches things up by moving the cookie banner to the top of the 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.

3. The slide-in cookie consent banner

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

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.

How to create your own cookie banner without a single line of code

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:

• Shopify
• Joomla
• Squarespace

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

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

Step 2: Select a template from the gallery

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 ideas → Messages → Cookies.

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.

Step 3: Add your consent message

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.

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.

💡 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

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

Step 5: Control when your cookie consent notice appears

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.

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.

Step 6: Activate your cookie consent banner

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:

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.

Adding a cookie consent notice doesn't have to be difficult

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.