How to Add a Cookie Consent Banner to Any Website (WordPress, Shopify, Webflow)

The Problem: Most Cookie Banners Don't Actually Work

You've probably seen cookie banners on every website you visit. But here's a surprising fact: 83% of cookie consent banners are not actually compliant with GDPR or ePrivacy requirements. Many show a banner but don't actually block tracking scripts until consent is given. Others lack a reject option or don't keep proper consent records.

A truly compliant cookie banner needs to do three things: inform the user, block scripts until consent, and log the decision. LegalBanner handles all three automatically.

Step 1: Create Your Free Account

Head to legalbanner.com/signup and create a free account. No credit card required. The free plan covers one website with up to 5,000 pageviews per month.

Step 2: Add Your Website

In the dashboard, click "Add site" and enter your domain (e.g., example.com). LegalBanner will immediately start scanning your website for cookies and trackers.

Step 3: Review the Scan Results

Within seconds, you'll see a complete inventory of every cookie and third-party script on your site, automatically categorised:

Necessary — Session cookies, security tokens, load balancers
Analytics — Google Analytics, Hotjar, Mixpanel
Marketing — Facebook Pixel, Google Ads, LinkedIn Insight
Functional — Chat widgets, video embeds, preference cookies

You can review and recategorise any cookie if needed, though the automatic classification is accurate for 95%+ of cases.

Step 4: Customise Your Banner

Choose your banner layout (bar, modal, drawer, or fullscreen) and customise the colours, text, and position to match your brand. The live preview updates in real time.

Step 5: Add the Script Tag

Copy the single line of code and add it to your website's <head> section. Here's how for popular platforms:

WordPress

Go to Appearance → Theme Editor → header.php, or use a plugin like "Insert Headers and Footers" to paste the script tag in the <head> section.

Shopify

Go to Online Store → Themes → Edit Code → theme.liquid. Paste the script just before the closing </head> tag.

Webflow

Go to Project Settings → Custom Code → Head Code. Paste and publish.

Next.js / React

Add the script to your root layout or _document.tsx using a <Script> component with strategy="beforeInteractive".

Any Other Platform

If you can edit HTML, you can use LegalBanner. Just paste the script tag in the <head> of every page (or your shared layout/template).

That's It — You're Compliant

Once the script is live, LegalBanner automatically:

Blocks non-essential scripts until the user gives consent
Shows a customised, GDPR-compliant consent banner
Logs every consent decision in an audit-ready format
Sends Google Consent Mode v2 signals
Re-scans your site periodically to detect new cookies

No ongoing maintenance. No privacy lawyer required. Just one script tag.

How to Add a Cookie Consent Banner to Any Website in 5 Minutes