Ultimate Guide to Adding a Cookie Banner to Your Website

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:
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 moreText
Including an option to link to your privacy policyButton
Both the text and color of your buttonColors
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:
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.
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.
Subscribe to our newsletter →Get the print version
Download a PDF version of our blog post for easier offline reading and sharing with coworkers.
Download PDFPopup all you want
Email opt-in forms, promos, coupon boxes, surveys and bounce-stoppers.
Try Getsitecontrol for free →