CookieGuard Logo
CookieGuard

Consent infrastructure

LoginSign Up

CookieGuard Setup Guide

Everything you need to create, configure, and install a consent banner — from scratch or by editing an existing one.

Agent-assisted setup

Ask your coding agent to install it.

One prompt to add CookieGuard and make analytics, pixels, and other optional scripts respect consent.

Add CookieGuard to this project.

Read the CookieGuard setup guide at https://cookieguard.co/docs/guide and the integration recipes at https://cookieguard.co/docs/integrations. Implement the recommended integration for this codebase using these values:

- Site ID: [YOUR_SITE_ID]
- Publishable site key: [YOUR_PUBLISHABLE_SITE_KEY]

Identify the analytics, marketing, and preference scripts already used in this app. Make sure they do not run until the matching CookieGuard consent category has been granted. Keep essential scripts working, use the idiomatic approach for this framework, and avoid loading CookieGuard more than once.

When you are finished, report the files changed, the scripts and consent categories you found, any manual dashboard steps still needed, and how to verify the integration locally.

Add your Site ID and publishable site key from the CookieGuard dashboard before sending the prompt. New here? Create a free account.

How it works

CookieGuard shows a cookie consent banner on your website and records visitor preferences. Each banner is tied to a Site, which represents a single domain. You can have multiple banners per site and switch which one is active.

The banner is delivered by a single JavaScript snippet you add to your site's <head>. All design and content changes are made in the dashboard — no code changes needed after installation.

Step 1: Create a site
A site represents one domain or subdomain
  1. 1Log in to your dashboard at cookieguard.co/login
  2. 2Go to Sites in the sidebar and click Add Site
  3. 3Enter your domain (e.g. example.com) and save
  4. 4Copy your Site ID — you'll need it for the script tag later
Step 2: Get a publishable site key
The site-scoped key authorises browser requests for this site
  1. 1Go to Settings → API Keys in your dashboard
  2. 2Click Create Site Key and give it a name (e.g. “My website”)
  3. 3Copy the key — it is only shown once

This key appears in the public bootstrap URL and is not a server secret. Scope it to one site, restrict its allowed domain, and rotate it if abused. Do not reuse it for privileged server access.

Step 3: Create a banner
Banners have three tabs: General, Design, and Content
  1. 1Open your site and click New Banner
  2. 2Fill in the three tabs described below, then click Save

General tab

  • Banner name — internal label, not shown to visitors
  • Set as default — makes this the active banner for the site
  • Default language — the fallback language when the visitor's browser language has no matching translation

Design tab

Controls the visual appearance of the banner.

Layout

  • Bar — full-width strip at the top or bottom of the viewport
  • Floating — small card pinned to a corner
  • Modal — centered overlay with a backdrop

Position

  • Bar: top or bottom
  • Floating: bottom-left or bottom-right
  • Modal: always centered (not configurable)

Theme presets

Light, Dark, Accessible, Blue, Green — sets all colors at once. You can then override individual colors below.

Colors accordion

  • Background, Text, Border, Overlay (modal only)
  • Primary button (Accept All), Secondary button (Reject All), Tertiary button (Customize) — background and text colour each

Buttons accordion

  • Show “Reject All” — toggle to hide the Reject All button
  • Show “Customize” — toggle to hide the Customize button
  • Button style — per button: Filled (solid background), Outlined (transparent with border), Ghost (text only with underline)

Typography accordion

  • Font family: System default, Inter, Roboto, Lato, Open Sans
  • Font size: 12–18 px (slider)

Spacing & Borders accordion

  • Padding, Border radius (container), Button border radius, Max width

Animation accordion

  • Type: Slide, Fade, None
  • Duration in milliseconds

Advanced accordion

  • Z-index, Box shadow toggle
  • HTTPS logo URL and a bounded z-index control

Content tab

Controls all the text shown in the banner, per language.

  • Title — heading shown at the top of the banner
  • Description — body text explaining cookie usage
  • Button labels — Accept All, Reject All, Customize, Save Preferences
  • Cookie category descriptions — title and description for Necessary, Preferences, Analytics, Marketing
  • Policy links — link text and URL for your Privacy Policy and Cookie Policy
Adding languages
The banner auto-detects the visitor's browser language
  1. 1Content tab → click Add Language
  2. 2Enter a language code: fr, de, es, it, pt, nl, etc.
  3. 3Fill in all translations for that language
  4. 4Save — the banner will now serve this language to matching browsers automatically

Auto-detected browser languages: en-US, en-GB, de, fr, es, it, pt-BR, zh, ja, ko, th, hi. Any language code you add will also work — detection falls back to navigator.language.

To force a specific language, set data-language="fr" on the script tag instead of "auto".

Step 4: Install the banner
Add one script tag to your site's <head>

Copy the snippet from the Installation tab of your banner, or construct it manually:

<!-- Place first in head, before GTM/gtag/GA4/Ads and other optional tags -->
<script src="https://cookieguard.co/api/v1/bootstrap/YOUR_SITE_ID?key=YOUR_PUBLISHABLE_SITE_KEY&language=auto"></script>

Attributes

  • YOUR_SITE_ID — your Site ID from the dashboard
  • YOUR_PUBLISHABLE_SITE_KEY — your site-scoped browser key
  • language — "auto" to detect from the browser, or a fixed code like "fr"

For platform-specific instructions (Framer, WordPress, Shopify, etc.) the Installation tab in the dashboard has ready-to-use code for each platform.

Editing an existing banner
All changes take effect immediately — no reinstalling the script
  1. 1Dashboard → Sites → open your site → click the banner you want to edit
  2. 2Make changes across the General, Design, or Content tabs
  3. 3Click Save — the live banner updates immediately without any script changes

If you have multiple banners, set one as default using the toggle in the General tab. Only the default banner is shown to visitors.

Troubleshooting

Banner not showing?

  • Check that the script tag is in <head>, not at the bottom of <body>
  • Confirm the Site ID and API Key are correct
  • Make sure the banner is set as default (General tab → Set as default)
  • If you already accepted/rejected cookies, the banner won't re-show — clear cookies or use a private browsing window to test

Wrong language showing?

Check that a translation exists for the expected language code in the Content tab. If the browser language has no matching translation, the banner falls back to the default language set in the General tab.

Need help?

Contact support at support@cookieguard.co

Quick checklist
  • Site created with correct domain
  • API key generated and saved securely
  • Banner created and set as default
  • Design matches your brand
  • All required languages have translations
  • Privacy Policy and Cookie Policy URLs are correct
  • Script tag added to <head> on every page
  • Tested in a private browsing window