Installing the Cookie Banner
LegalBanner uses a single JavaScript snippet to display the consent banner on your site. Installation takes less than a minute.
Get Your Snippet
1. Go to Sites → select your site → Overview 2. Copy the installation snippet. It looks like this:
``html
`
Where to Place It
Paste the snippet into the section of your website's HTML template. It only needs to appear once — it will automatically load on every page.
- WordPress — Go to Appearance → Theme Editor → header.php, paste before
- Shopify — Go to Online Store → Themes → Edit Code → theme.liquid, paste before
- Next.js — Add to your root layout (app/layout.tsx
) inside thetag - Static HTML — Paste in your main HTML file's
section - Webflow — Go to Project Settings → Custom Code → Head Code
How It Works
1. The async attribute ensures the script loads without blocking your page
2. The script reads data-site-id to fetch your banner configuration
3. It renders the banner inside a Shadow DOM — completely isolated from your site's CSS
4. If the visitor has already consented, the banner won't appear again
Verify Installation
After adding the snippet, go back to your site's Overview page in the dashboard. The status will change to Detected once we receive the first ping from your domain.
If the status doesn't update within a few minutes, check that:
- The data-site-id` matches your site
- The domain is added to your site's domain list
- There are no Content Security Policy (CSP) headers blocking the script
That's It!
Your banner is now live. You can customize its appearance from the Banner tab in your site settings.