CookieGuard Setup Guide

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

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

1Log in to your dashboard at cookieguard.co/login
2Go to Sites in the sidebar and click Add Site
3Enter your domain (e.g. example.com) and save
4Copy your Site ID — you'll need it for the script tag later

Step 2: Get an API key

The API key authorises your site to load banners

1Go to Settings → API Keys in your dashboard
2Click Create API Key and give it a name (e.g. “My website”)
3Copy the key — it is only shown once

Keep your API key private. Do not commit it to public repositories.

Step 3: Create a banner

Banners have three tabs: General, Design, and Content

1Open your site and click New Banner
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
Custom CSS — paste any CSS here; it is appended after all generated styles. Use #cookieguard-banner to target the banner container.

/* Example: round the banner corners and add a coloured top border */
#cookieguard-banner {
  border-radius: 16px !important;
  border-top: 4px solid #4a6cf7 !important;
}

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

1Content tab → click Add Language
2Enter a language code: fr, de, es, it, pt, nl, etc.
3Fill in all translations for that language
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:

<script
  src="https://cookieguard.co/cookieguard.js"
  data-site-id="YOUR_SITE_ID"
  data-api-key="YOUR_API_KEY"
  data-language="auto"
  async
></script>

Attributes

data-site-id — your Site ID from the dashboard
data-api-key — your API key
data-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

1Dashboard → Sites → open your site → click the banner you want to edit
2Make changes across the General, Design, or Content tabs
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.

Custom CSS not applying?

Make sure your selectors target #cookieguard-banner or its children. Add !important to override generated inline styles if needed.

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