How to add a cookie banner to your website: no code required (with examples!)

How to add a cookie banner to your website: no code required (with examples!)
Colin Newcomer
Colin Newcomer on May 13, 2019 6 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 actually create a cookie banner for my site?

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

In the rest of this post, you'll get a quick primer on whether or not your site actually needs a cookie consent banner. Then, we'll share a step-by-step tutorial for how you can use a free tool to create a cookie consent banner for your site without needing to have any special knowledge.

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.

So...long story probably need a cookie consent banner 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. So 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.

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.

Beyond The Barre uses an attention-grabbing bottom bar for its cookie consent:

Attention-grabbing bottom bar for cookie consent

Decksender switches things up by moving the cookie banner to the top of the page:

Cookie banner at the top of the page

INUSUAL opts to show the cookie consent banner as a slide-in in the bottom left corner (you could just as easily switch this to the right):

Cookie consent banner as a slide-in in the bottom left corner

Now for the fun part — how you can create a cookie consent banner like those examples for your own website. All three of those examples use Getsitecontrol, which is a versatile tool that lets you add seven different "widgets" to your website. Widgets can be live chat boxes, email opt-in forms, surveys, guessed it — cookie consent banners.

Using a simple interface, you'll be able to customize your cookie 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 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 go to Site settings → Install in your Getsitecontrol dashboard to verify that the code is working:

Getsitecontrol install code settings

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

Step 2: Create A New Promo Widget

To display your cookie consent notification, you'll use Getsitecontrol's Promo widget. To create a new promo widget, click on the Create widget option in your Getsitecontrol dashboard and then select Promo:

Create Getsitecontrol cookie banner widget

First off, you should choose where to position your cookie banner using the Position options. While Getsitecontrol gives you nine different position options, typically the best approach is to use one of these four positions (highlighted below):

  • Top bar
  • Bottom bar
  • Left slide-in (gives you the most space for text content)
  • Right-slide (gives you the most space for text content)

Choose Getsitecontrol cookie banner position

These positions are still attention-grabbing and able to display the full text, but they don't completely take over your visitor's experience like a modal popup would.

For cookie consent notifications, you should also avoid the four options on the right as they only display their text content after a visitor clicks on them.

Step 4: Choose Your Color Theme

You probably want your consent banner's colors to match the rest of your site. To control that, you can use the Colors area to set the colors for:

  • Background
  • Button
  • Regular text
  • Button text

If you're not sure how to choose colors that work together, you can use the Apply theme option to help. All you need to do is select a single color that matches your site. Then, Getsitecontrol will automatically configure all the other colors so that they work well together:

Select Getsitecontrol cookie banner color

Step 5: Add Your Content

Now that you've got the style and location of your consent banner all figured out, it's time to actually write the consent message to your visitors. To configure your banner's content, go to the Content tab.

There's no requirement for the exact text that you use — but again, the goal here is to get "clear, informed consent". Here are some recommendations for how to configure the content settings to best achieve that:

  • 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 at our Privacy policy.
  • Button text – i agree
  • Target URL – leave this blank

If you use a top bar or bottom bar, you won't be able to add a description, so you'll need to add all of the text to the Title field.

Configure Getsitecontrol cookie banner content

You can see how your text will appear to visitors using the live preview on the right side of the interface.

To avoid pestering visitors as they move around your site, you want to ensure that your cookie consent notice stops appearing after a visitor clicks the I agree button. To do that, you can use the Behavior tab.

Under the Stop to display the widget options, select the box for under the following conditions. Then, choose after the user performs the action:

Configure Getsitecontrol cookie banner behavior

In this case, "the action" is the visitor clicking the button to consent to cookie usage. You don't need to change any other settings in the Behavior or Targeting areas.

Now, you're pretty much done! All you need to do to make your cookie consent notice live is click the OK button at any place in the interface:

Save Getsitecontrol cookie banner

Then, choose the option to Activate now:

Activate Getsitecontrol cookie banner

Once you do that, visitors should start seeing the cookie consent notice. And once they click the button to agree to cookie usage, they'll no longer see the cookie 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 customizable cookie consent banner without needing to write a single line of code.

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.

Main illustration by Icons8

Tips for your marketing strategy