How to add a cookie consent banner to your website

A practical, no-fluff guide to adding a GDPR-ready cookie consent banner to any site, what it actually needs, how to install one in minutes, and the mistakes that get sites in trouble.

A guide by The Cookie Shooter. This is practical guidance, not legal advice.

What is a cookie consent banner?

A cookie consent banner is the notice that asks visitors whether they agree to non-essential cookies, such as analytics and marketing trackers, before those cookies are set. Under the EU's GDPR and ePrivacy rules, and the UK's equivalent, you generally must get clear, freely given consent before loading anything that is not strictly necessary for your site to work.

In plain terms: if you use Google Analytics, the Meta pixel, ad retargeting, or similar, you need to ask first, and you need to make saying no just as easy as saying yes.

What a compliant cookie banner actually needs

Before you add anything, it helps to know what a good banner must do:

The fast way: add a drop-in banner in three steps

You can wire all of this up by hand, but a drop-in widget handles the tricky parts. Here is the whole process using The Cookie Shooter as the example.

Step 1: Add the script

Paste one script tag right before the closing </body> tag on every page, or include the bundled file and set your options on a global object:

<script>
  window.TheCookieShooterConfig = {
    siteName: "My Site",
    cookiePolicyUrl: "/cookie-policy",
    lang: "auto"
  };
</script>
<script src="/the-cookie-shooter.js"></script>

That alone gives you a working banner that shows on the first visit and remembers the choice. No build step, no dependencies.

Step 2: Configure it

Set your site name, your cookie and privacy policy links, the language, and the size. You can also switch wording per language or let it auto-detect from the page. If you do not use any tracking at all, you are already done here.

Step 3: Gate your tracking scripts

This is the step most people miss. Tag every non-essential script so it only runs after consent. Set type="text/plain" and add a data-consent attribute:

<!-- Loaded only after Accept -->
<script type="text/plain" data-consent="analytics"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>

If you use Google tags, add Consent Mode v2 defaults in the <head> so consent starts denied and flips to granted on accept:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('consent', 'default', {
    ad_storage: 'denied',
    analytics_storage: 'denied',
    wait_for_update: 500
  });
</script>
Tip: anything you leave untagged runs normally and is treated as essential. So your layout, fonts, and core functionality keep working, only the trackers wait for a yes.

Adding it on your platform

Common mistakes to avoid

Do you have to build it yourself?

You have three broad options. You can hand-roll a banner, which is fine for a simple site but easy to get subtly wrong. You can use a full consent management platform like Cookiebot or OneTrust, which is powerful but heavy and usually a monthly subscription. Or you can drop in a lightweight widget that handles the essentials without the bloat.

Try it in five seconds

The Cookie Shooter is a drop-in cookie consent banner your visitors can actually shoot. One script tag, no dependencies, no tracking.

Get The Cookie Shooter See the live demo

Frequently asked questions

Do I legally need a cookie consent banner?

If your site reaches visitors in the EU, EEA, or UK and uses non-essential cookies such as analytics or marketing, you generally need consent before those cookies are set. Strictly necessary cookies do not require consent. Rules differ by region, so confirm your specifics with someone qualified.

Does a cookie banner slow down my site?

A lightweight, dependency-free banner adds very little. Because tracking scripts only load after a visitor accepts, the first page load can actually be faster.

Can I build a cookie consent banner myself?

Yes, but a compliant banner must block non-essential cookies until consent, make rejecting as easy as accepting, remember the choice, and let visitors change it. A drop-in widget handles these details so you do not have to.

Related guides