How to add a cookie consent banner to your website

A cookie consent banner is the small notice that appears when someone first lands on your site, asking whether they agree to non-essential cookies and trackers. Under laws like the GDPR, the UK PECR rules and India's DPDPA, the banner is only the visible tip of the system. The real work happens underneath: non-essential scripts such as analytics, advertising pixels and chat widgets must not run until the visitor gives consent.

That distinction matters because a banner that only displays a message but lets Google Analytics or the Meta pixel fire on page load is not compliant. Regulators have been clear that consent must be obtained before the tracker loads, not after. So the goal of adding a banner is two things at once: show a clear choice, and block trackers until that choice is made.

The fastest way to add a banner is to drop one script into the head of your HTML. After you create a website in your ConsentX dashboard you get an embed snippet that looks like a single line referencing embed.js with your site key. Paste it as high as possible in the head so it loads before your other scripts.

Place it above your analytics and advertising tags. Order matters because ConsentX needs to register first so it can hold back the trackers below it until the visitor decides. If you tag your trackers correctly in the dashboard, the loader will keep them blocked on first visit and release them the moment consent is granted.

This approach works on any hand-coded site, static site generator, or framework where you control the HTML head. It is also the cleanest method because there is no plugin layer in between.

If your trackers are already managed in Google Tag Manager, you can add ConsentX through GTM too. Create a new Custom HTML tag, paste the embed snippet into it, and set it to fire on the Consent Initialization trigger so it runs before everything else.

The cleaner pattern is to pair the banner with Google Consent Mode. Instead of letting GTM tags fire freely, you gate them on consent state, and ConsentX updates that state when the visitor chooses. That way GTM itself holds tags back until consent is granted, which is exactly the behavior regulators expect.

Avoid the common mistake of loading ConsentX through GTM while your analytics tag still fires on All Pages with no consent check. If the tracker is not gated, the banner is decorative and you remain exposed.

On WordPress you do not need a heavy plugin. The simplest route is to add the embed snippet to your theme's header through a header-and-footer code plugin or your theme's custom head-code field, so it loads site-wide in the head.

If you run an SEO or caching plugin, place the snippet where it is not stripped or deferred, because deferring the consent loader can let trackers slip through before it initializes. After adding it, clear any page cache so visitors get the new head markup.

WordPress sites often load trackers through multiple plugins at once, so use the dashboard's tracker discovery to find every script and tag it before you rely on the banner.

On Shopify, add the embed snippet to your theme by editing theme.liquid and pasting it inside the head element near the top. Shopify themes load several first-party and app scripts, so positioning the loader high in the head is important.

Shopify also has its own customer privacy and consent API for the storefront. Where possible, connect ConsentX to that signal so Shopify-native pixels respect the visitor's choice alongside your other trackers. Test with a checkout flow, because checkout pages sometimes load scripts that your storefront pages do not.

Testing is the step most teams skip, and it is the one that decides whether you are actually compliant. Open your site in a fresh private browsing window, then open your browser developer tools and watch the Network tab while the page loads. Before you click anything on the banner, you should see no requests to analytics or advertising domains.

Next, click Reject and reload. Trackers should stay absent and no marketing cookies should appear in the Application or Storage tab. Then click Accept and confirm the trackers now load and the cookies appear. If trackers fire before you choose, the script is either placed too low in the head or the tracker is not tagged for blocking.

Repeat the test on a few key page types, including your homepage, a product or content page, and any page with a chat widget or embedded video, since these often pull in extra third-party scripts.