How to add a cookie banner to your website

A banner is a question.The tags have to wait for the answer.

To add a cookie banner to your website, install the banner’s script first in your site’s <head>, then make every non-essential tag wait for it: let the banner load your pixels, mark the ones you pasted yourself, or set your tag manager to follow consent. A banner that only shows a message while Google Analytics and the Meta Pixel run underneath is decoration. Squarespace, Wix and Shopify have banners of their own, but each holds only some of what a site loads. The picker below says what yours holds and where a script goes.

Pick my platform Start free
7 platforms help centres read 30 October 2026

By the Builderify team

01 Install it first 02 Make the tags wait 03 Test it like a stranger
01 / The short answer

How do you add a cookie banner to a website?
Three steps, in this order.

The banner is the easy part. The work is making your tags wait for it. A script pasted into your site runs the moment the page loads, often before any banner appears, so the visit is reported before the visitor has been asked.

Not sure you need one? Do I need a cookie banner? answers that for the EU, the UK and the US, with a checker for your own site. The wider list of what the GDPR asks of a site is in the GDPR-compliant website checklist.

  1. 01

    Install the banner so it loads first

    Put the banner’s script at the top of your site’s <head>, above Google, Meta and every other tag. On Squarespace that is Code Injection, on Wix Custom Code, on Shopify theme.liquid, on Webflow Head code, on WordPress a plugin. Then switch on the rules: who is asked, and what Reject turns off.

  2. 02

    Make every non-essential tag wait

    Three ways, often mixed: let the banner load the tag from its ID; mark a pasted script with type="text/plain" and its category so the browser ignores it until a yes; or let Google Tag Manager follow the choice through Consent Mode v2 and consent triggers.

  3. 03

    Test it as a stranger would

    In a private window, with DevTools open: no third-party cookies and no tracking requests before you answer, none after Reject, and the tags you allowed after Accept. Then reopen the banner and change your mind.

02 / What it must do

What a compliant cookie banner must do
Six rules, each with its source.

For EU and UK visitors, a banner that asks has to do six things. The UK regulator’s guidance on consent covers all six in one page; the EU texts and the French regulator say the same. Check any banner against them, built in or bought, before you rely on it. This is general information, not legal advice.

01

Nothing optional runs before a yes

Analytics, ad pixels and embeds that set cookies stay off until the visitor chooses. Ignoring or closing the banner is not a yes.

ICO ePrivacy Directive, art. 5(3)

02

Reject is as easy as Accept

A Reject all button on the first screen, as prominent as Accept all. “Accept” beside “Settings” is not a match.

ICO CNIL EDPB taskforce

03

A choice per purpose

Visitors can allow analytics and refuse advertising: one switch per category, each saying what it is for.

ICO

04

Nothing pre-ticked

Optional categories start switched off. A pre-ticked box is not consent, and neither is silence.

Court of Justice, Planet49 ICO

05

A way to change your mind

Something on every page reopens the choices, and withdrawing is as easy as agreeing was.

GDPR, art. 7(3) ICO

06

A record of each choice

You must be able to show that a visitor agreed: what they chose and when.

GDPR, art. 7(1) ICO

In the US the shape is different: tags can run until a visitor opts out, and a growing list of states asks you to treat a browser’s Global Privacy Control signal as that opt-out. A banner set to opt-out mode is one way to offer it.

03 / Platform picker

What does your platform’s cookie banner hold?
And what needs holding another way.

Pick your platform, tick what your site runs and where your visitors are. You get the built-in option and what it holds, a verdict for each tag, where a consent script goes on that platform, and the code that makes your tags wait. Every platform fact was read on its own help centre on 30 October 2026.

Your platform
What your site runs
Your visitors

Squarespace · 3 tags · visitors: Both

Squarespace’s cookie banner can hold 2 of 3 if set up as described below; 1 needs holding another way.

Your platform’s own banner

Built in · checked 30 October 2026

Squarespace’s cookie banner

Holds
Squarespace’s own non-essential cookies and some third-party services connected through Squarespace, with Decline all and Manage cookies buttons.
Leaves out
Code you paste into Code Injection. Squarespace says custom code that sets non-essential cookies has to be made to work with the banner.
Plan
The banner has no plan listed. Code Injection, where a third-party banner goes, is on Core, Plus, Advanced and some legacy plans.

Tag by tag

Google Analytics If set up Held if you connect it with Squarespace’s own Google Analytics setting, which Squarespace says needs no banner code. Pasted into Code Injection, it runs. Paste the Measurement ID (G-…) under Connect and delete the gtag code: it loads only for visitors who allow Analytics.
Meta Pixel Not held Not held when pasted into Code Injection: Squarespace says custom code has to be made to work with the banner. Paste the Pixel ID under Connect, or keep your code and mark it as Marketing.
YouTube embeds If set up Squarespace lists YouTube among the services its banner can restrict when visitors can accept or decline. Move the iframe’s src to data-src and add data-bdf-consent="marketing". The beta auto-blocker can show a click-to-load box instead.

Install Builderify on Squarespace

Code Injection is on the Core, Plus and Advanced plans and some legacy plans.

  1. Copy the consent tag from Cookie Consent > Connect > Install in Builderify.
  2. In Squarespace, open Code Injection and paste the tag on the very first line of the Header field.
  3. In the Cookies & Data Privacy panel, turn Squarespace’s banner off and set Non-essential Cookies to Restrict, so visitors are asked once.
  4. Save, then test the published site in a private window.

The banner itself comes from your main Builderify snippet. The consent tag is the small extra tag that runs first, so it can hold the rest.

Who is asked

Rule: Ask where the law requires it

Asks first in consent-first places such as the EU, the UK, Switzerland, Brazil, Canada and South Korea, and lets tags run with an opt-out elsewhere. It goes by the browser’s time zone and, where the CDN reports it, the country; either one is enough to ask first.

Set under Cookie Consent > Rules. Global Privacy Control is honoured by default where opting out is the rule.

Your <head>, with the tags waiting

<!-- First in <head>, above every other tag -->
<script src="https://app.builderify.com/consent/your-site-id.js" data-cfasync="false"></script>

<!-- Google Analytics, Meta Pixel: paste each ID in Cookie Consent > Connect, then delete their code -->

<!-- Or keep your Meta Pixel code and mark it -->
<script type="text/plain" data-bdf-consent="marketing">
  /* your Meta Pixel code, unchanged */
</script>

<!-- YouTube embeds: src moves to data-src -->
<iframe data-bdf-consent="marketing"
        data-src="https://www.youtube.com/embed/VIDEO_ID"
        width="560" height="315"></iframe>
04 / By platform

Squarespace, Wix, Shopify, Webflow and WordPress cookie banners

Three of the big builders have a banner of their own, and each holds only part of a site. For each: the built-in option, what it holds and leaves out, the plan, and where a third-party banner’s script goes. Read on 30 October 2026.

Squarespace cookie banner

Squarespace has a built-in banner, switched on in the Cookies & Data Privacy panel, that restricts non-essential cookies from Squarespace and some third-party integrations until visitors accept.Squarespace You can add Decline all and Manage cookies buttons; after a choice, a manage-cookies sub-footer shows for 30 days, then the banner returns. Squarespace also says the banner restricts some third-party services, “but not all”.Squarespace

Leaves out
Code you paste in. Squarespace says custom code that sets non-essential cookies has to be made to work with the banner, and Google Ads added that way needs consent code of your own. Its own Google Analytics setting needs none.Squarespace

Third-party banner
First line of the Header field in Code Injection, on Core, Plus, Advanced and some legacy plans.Squarespace Then turn Squarespace’s banner off and set Non-essential Cookies to Restrict in the same panel, so visitors are asked once.Squarespace

How to add a cookie banner to a Wix website

Wix’s banner is now Usercentrics for Wix, added from Privacy & Cookies in your dashboard; the older Wix Cookie Banner is no longer available for new sites. The basic version is free; translations, custom text and some placement need a Usercentrics plan. It scans for Wix and third-party components, keeps a consent log, and has a privacy trigger visitors use to reopen their choices. It won’t appear unless your domain is connected,Wix and Wix asks you to upgrade before you connect one.Wix

Leaves out
Custom code is Essential by default, so it loads before consent until you open its Code Type tab and pick Marketing, Analytic or Functional.Wix Wix also says it cannot guarantee the banner blocks App Market apps.Wix

Third-party banner
Settings, then Custom Code under Development & integrations, + Add Custom Code, all pages, placed in Head. Custom code needs a published site with a connected domain.Wix Wix’s own elements and apps follow Wix’s banner, so decide which banner owns the site.

Shopify cookie banner

Shopify’s banner lives under Settings > Customer privacy > Cookie banner. With “Use automated settings” on, it shows to visitors in the UK and EEA if you have active markets there; you can also pick regions by hand. In those regions Shopify collects non-essential data only after consent, for its own tools, cookies and Shopify pixels. A browser’s Global Privacy Control signal counts as an opt-out of sale or sharing where you use Shopify’s data-sharing opt-out page.Shopify

Leaves out
Third-party cookies and pixels installed by hand or through apps: Shopify says you may need to add custom logic so they honour consent.Shopify

Third-party banner
Shopify’s steps: turn on the app’s banner, remove Shopify’s (the … menu, Remove cookie banner) and use the same regions in both, or data can be processed before consent.Shopify A script tag goes in theme.liquid via Edit code, which needs a theme you own.Shopify

Webflow cookie banner

Webflow has no cookie banner of its own on 30 October 2026. Its consent methods apply only to Webflow Analyze and Optimize; for everything else Webflow points to consent apps in its Marketplace, or a banner you build with its Browser API, whose sample code it says is a starting point that may not meet every privacy law.Webflow Analyze and Optimize have a tracking default you can set to opt-out or to don’t-track-until-consent.Webflow

Leaves out
Every tag that isn’t Analyze or Optimize: GA, pixels, embeds and chat all need a banner that holds them.

Third-party banner
Site settings, Custom code, Head code, above everything else, then publish. Site-wide custom code needs a paid Site plan or a Core, Growth, Agency or Freelancer Workspace; the free Starter plan doesn’t include it.Webflow

WordPress cookie banner: a plugin or a script

WordPress core has no cookie banner, so you add a banner plugin or a banner’s script. The WP Consent API plugin lets plugins share the visitor’s choice, but it shows no banner and needs a consent plugin beside it.WordPress.org Whatever you pick, check that it holds the tags, not just that it shows a banner. Two popular ones have free plans with limits: CookieYes stops at 5,000 pageviews, and Cookiebot Free covers a small site.

Leaves out
Everything, until a plugin or script holds it.

Third-party banner
Its own plugin, or a header-code plugin set to load first in the header. The Builderify plugin prints its consent tag before tags other plugins add, and registers with the WP Consent API when that plugin is installed.

Framer and hand-built sites

Framer has a Cookie Banner component built to work with Google Tag Manager and Google Consent Mode; it needs your GTM container ID.Framer Framer’s docs don’t say it holds custom code or embeds outside GTM, and Framer says adding the right banner is your responsibility.Framer A hand-built site has nothing built in: paste the banner’s script as the first line inside <head> on every page, or once in a shared header file.

05 / Hold your tags

How to block scripts until cookie consent
Three ways, and when to use each.

Every consent tool uses some mix of these three. The examples are Builderify Cookie Consent’s; other tools use their own attribute names, so check their docs.

01

Let the banner load the tag

Delete the pixel’s code from your site and give its ID to the banner, which loads it only for visitors who allowed its category. Builderify does this for thirteen tags, including Google Analytics 4, Google Ads, Meta, TikTok, LinkedIn, Microsoft Clarity and Hotjar, using each vendor’s own install code. It is the cleanest route: nothing to forget, nothing to mark.

02

Mark the tag you pasted

Change the script’s type to text/plain and name its category. The browser ignores a plain-text script, so it sits inert until the banner releases it, then runs as written. Embeds move src to data-src. Categories are necessary, preferences, analytics and marketing; an unknown name keeps the tag blocked.

03

Let the tag manager follow

With Google Tag Manager, the banner sets Google Consent Mode v2 before the container runs, and Google tags inside it follow the choice. Non-Google tags need a consent trigger: Builderify pushes bdf_consent_update to the dataLayer whenever a visitor decides. The Consent Mode v2 guide covers basic and advanced mode.

A pasted script and an embed, waiting

<!-- Before: runs for everyone -->
<script src="https://example.com/tracker.js"></script>

<!-- After: waits for Analytics -->
<script type="text/plain" data-bdf-consent="analytics"
        src="https://example.com/tracker.js"></script>

<!-- An embed: waits for Marketing -->
<iframe data-bdf-consent="marketing"
        data-src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

Google’s Consent Mode default, if you write it yourself

<!-- Before the Google tag, on every page -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied'
  });
</script>

Google says the default must run before any command that sends data, and that out of order, the defaults don’t work.Google A consent tool that supports Consent Mode writes this for you, then sends the update when the visitor decides.

The auto-blocker, and its limit

Builderify’s beta switch “Block known trackers automatically” (off by default) holds scripts from well-known tracking services even if you pasted them, and shows a click-to-load box for YouTube, Vimeo and Google Maps. Google tags are left to Consent Mode. A tag written in your page’s HTML can still be fetched by the browser before any script steps in: it never runs, but the request goes out. Marking it is the only way to stop that.

What the scanner sees

One in ten page views reports the cookie names its browser can read, four seconds after load, and again after a choice. Names only, never values. Known cookies are matched to their provider, purpose and lifetime; unknown ones wait for you to pick a category. Cookies a script can’t read, such as HttpOnly and third-party ones, have to be added by hand. Anything seen before an opt-in visitor answered is flagged.

Saying no, and changing it

Under opt-out rules, a browser sending Global Privacy Control has Marketing switched off without a click. Refusing or withdrawing a category deletes the cookies declared for it, and the page reloads once if that code had already run. Each decision is logged with its consent ID and kept for 24 months, with the IP truncated. Want counts from visitors who say no? See tracking visitors who reject cookies.

Holding the Meta Pixel by hand, with fbq('consent', 'revoke')? The Meta Pixel cookie consent guide shows where it goes. Cookie Consent itself costs nothing per decision, scan or consent tag; page loads with the widget cost 10 credits per 1,000, every account gets 250 free credits a month, and one-time packs start at $9 with no monthly fee. See pricing. It enforces the choice and keeps proof; it is not compliance on its own, and it is not a certified IAB TCF platform.

06 / Test it

How to test a cookie banner
with nothing but DevTools.

Test the published site, in a private window, as someone who has never visited. Press F12 (Cmd+Option+I on a Mac) in Chrome or Edge. The Application tab lists cookies under Storage > Cookies; the Network tab shows every request. For a ready-made network filter, use the two-minute test in the cookie banner guide. Ticks stay in this tab only.

0 of 10 done

Before and after

The way back

07 / Mistakes

Common cookie banner mistakes
and the fix for each.

Most broken banners look fine. The failure is underneath: a tag that runs anyway, a second banner, or no way to say no later.

  1. 01

    The banner loads after the tags

    A pixel above the consent script has already run by the time the banner appears. Put the banner’s script first in <head>. With Cloudflare’s Rocket Loader, keep data-cfasync="false" on it so it isn’t delayed.

  2. 02

    Two banners on one site

    Your builder’s banner and a third-party one both asking. Pick one. On Shopify, if you keep Shopify’s regions on behind another banner, use the same regions in both, as Shopify asks.

  3. 03

    Wix custom code left as Essential

    Every snippet you paste into Wix is Essential until you change its Code Type, so Wix’s banner lets it run before anyone answers.

  4. 04

    Trusting Squarespace’s banner with pasted pixels

    Squarespace’s banner covers its own cookies and some connected services. A pixel in Code Injection is yours to hold.

  5. 05

    A Reject button one click deeper

    Accept all on the first screen and Reject inside “Settings” is the pattern regulators name first.

  6. 06

    Testing in the editor

    Wix’s banner doesn’t appear without a connected domain, and Framer’s custom code runs only on the published site. Test the live site, in a private window.

  7. 07

    No way back

    Without a link or button on every page, a visitor who said yes can’t say no later.

  8. 08

    Tag Manager firing everything on page load

    A banner in front of GTM changes nothing if the tags inside fire on All Pages with no consent settings.

  9. 09

    Thinking the banner covers server events

    A banner works in the browser. Events your server or shop platform sends, such as Meta’s Conversions API, never pass through it.

Questions

Cookie banners, before you install one.

Paste the banner's script first in your site's head, above every other tag, then make each non-essential tag wait for the visitor's choice: let the banner load it from its ID, mark a pasted script as type="text/plain" with its category, or let Google Tag Manager follow Consent Mode. Then test in a private window that nothing tracks before a choice or after Reject. A banner that only shows a message while your pixels run underneath does not do the job.

Not on its own. On 30 October 2026 Squarespace's help said its banner restricts non-essential cookies from Squarespace and some third-party integrations, and that custom code which sets non-essential cookies has to be made to work with the banner. Its own Google Analytics setting needs no extra code. A pixel pasted into Code Injection needs a consent tool or code of your own to wait for consent.

Only if you categorise it. Wix treats custom code as Essential by default, so it loads before consent; open the snippet's Code Type tab and choose Marketing, Analytic or Functional. Wix's current banner is Usercentrics for Wix, whose basic version is free, and it only appears on a site with a connected domain. Wix also says it cannot guarantee the banner blocks App Market apps.

Yes, under Settings > Customer privacy > Cookie banner. With automated settings on, it shows to visitors in the UK and EEA if you have active markets there, and you can choose regions by hand. It governs Shopify's own cookies and Shopify pixels; for pixels added by hand or through apps, Shopify says you may need custom logic so they honour consent. To use another banner, remove Shopify's and keep the same regions in both.

Not of its own, as of 30 October 2026. Webflow's consent settings cover only Webflow Analyze and Optimize, and for everything else it points to consent apps in its Marketplace or a banner you add with custom code. Site-wide custom code needs a paid Site plan or a Core, Growth, Agency or Freelancer Workspace; the free Starter plan does not include it.

Sources

Every platform help page above was read on 30 October 2026; platforms change these settings often, so check yours before you rely on it. The Builderify details were checked against the product the same day. This page is general information, not legal advice. Harbour Bakery is made up.

← All guides

Stop losing the visitors
you already paid for.

More leads from the traffic you already have, and follow-up that sends itself. Free to start. No card, no monthly fee.

Start free See what it does