Začínáme

ConsentBadge je vizuální builder cookie consent banneru s plnou podporou Google Consent Mode v2. Výsledkem je standalone HTML/CSS/JS kód, který vložíte na web přes Google Tag Manager nebo přímo do HTML.

Rychlý start ve 3 krocích

Otevřete builder — přejděte na /builder a vyberte šablonu, která se vám líbí, nebo začněte od nuly.
Upravte design a texty — nastavte barvy, fonty, kategorie cookies, texty banneru a pokročilé volby jako Consent Mode nebo vícejazyčnost.
Exportujte a nasaďte — zkopírujte vygenerovaný kód a vložte ho do GTM jako Custom HTML tag, nebo přímo do HTML stránky.

Požadavky

Pro samotný builder stačí moderní prohlížeč (Chrome, Firefox, Safari, Edge). Pro nasazení banneru na web potřebujete buď přístup ke Google Tag Manageru, nebo možnost editovat HTML kód webu.

Tip

Vygenerovaný banner nemá žádné externí závislosti. Je to čistý HTML/CSS/JS o velikosti menší než 30 KB.

Builder přehled

Builder je rozdělen do pěti záložek. Každá záložka se zaměřuje na jinou část konfigurace banneru.

Šablony

Vyberte si z 12 přednastavených designů. Šablona předvyplní barvy, fonty i layout — vše můžete dále upravit.

Design

Nastavte barvy pozadí, textu, tlačítek, zaoblení rohů, stíny, font a další vizuální vlastnosti banneru.

Kategorie

Definujte kategorie cookies (analytické, preferenční, marketingové). Přidejte popisky a nastavte výchozí stav.

Texty

Upravte texty banneru pro každý jazyk — nadpis, popis, texty tlačítek a cookie policy.

Pokročilé

Konfigurace Google Consent Mode v2, regionální nastavení, vícejazyčnost, API klíč pro server-side consent a další.

Tip

Používejte šablony pro rychlý start. Šablona nastaví rozumné výchozí hodnoty a vy pak upravíte jen to, co potřebujete.

Nasazení přes GTM

Google Tag Manager je doporučený způsob nasazení. Banner se načte ještě před ostatními tagy díky triggeru Consent Initialization, což zajistí správné fungování Google Consent Mode.

Krok 1: Otevřete Google Tag Manager

Přihlaste se do tagmanager.google.com a vyberte kontejner pro váš web.

Krok 2: Vytvořte nový tag

Klikněte na Tags → New → Tag Configuration → Custom HTML.

Krok 3: Vložte kód z builderu

V builderu klikněte na tlačítko Exportovat kód a zkopírujte celý vygenerovaný HTML kód. Vložte ho do pole Custom HTML v GTM.

Krok 4: Nastavte trigger

V sekci Triggering vyberte Consent Initialization - All Pages. Tento trigger zajistí, že se banner načte jako úplně první — ještě před inicializací ostatních tagů.

Krok 5: Publikujte kontejner

Uložte tag, klikněte na Submit a publikujte novou verzi kontejneru. Banner se okamžitě začne zobrazovat na webu.

Proč Consent Initialization?

Trigger Consent Initialization se spouští jako úplně první — ještě před All Pages. Díky tomu banner nastaví výchozí stav souhlasů (consent default) dříve, než se spustí GA4, Facebook Pixel nebo jiné tagy. Bez tohoto triggeru by mohly tagy odeslat data ještě před tím, než uživatel udělí souhlas.

Přímé vložení

Pokud nepoužíváte Google Tag Manager, můžete banner vložit přímo do HTML kódu stránky. Vložte exportovaný kód těsně před uzavírací tag </body>.

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8" />
  <title>Můj web</title>
</head>
<body>

  <!-- Obsah stránky -->
  <h1>Vítejte na mém webu</h1>

  <!-- ConsentBadge banner — vložte před </body> -->
  <script>
    // Zde vložte kód z builderu
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag("consent", "default", {
      ad_storage: "denied",
      ad_user_data: "denied",
      ad_personalization: "denied",
      analytics_storage: "denied",
      functionality_storage: "denied",
      personalization_storage: "denied",
      security_storage: "granted",
      wait_for_update: 500
    });
  </script>

</body>
</html>

Důležité

Při přímém vložení je nutné zajistit, aby se kód banneru načetl před skripty Google Analytics, Facebook Pixel a dalšími. Umístěte consent default blok co nejvýše v <head> a samotný banner před </body>.

Google Consent Mode v2 umožňuje tagům Google (GA4, Google Ads, Floodlight) přizpůsobit své chování podle stavu souhlasů uživatele. ConsentBadge implementuje oba požadované příkazy: consent default (výchozí stav při načtení stránky) a consent update (aktualizace po interakci uživatele s bannerem).

Mapování kategorií na consent typy

ConsentBadge používá 4 kategorie cookies, které se mapují na 7 consent typů Google:

Google Consent Type	Kategorie banneru	Výchozí stav
`ad_storage`	Marketing	denied
`ad_user_data`	Marketing	denied
`ad_personalization`	Marketing	denied
`analytics_storage`	Analytické	denied
`functionality_storage`	Preferenční	denied
`personalization_storage`	Preferenční	denied
`security_storage`	Nezbytné	granted

Konfigurace regionů

V pokročilém nastavení builderu můžete omezit výchozí consent stav na konkrétní regiony (např. EU/EEA). Mimo vybrané regiony se consent automaticky nastaví na granted. Toto odpovídá parametru consentModeRegions v konfiguraci.

// Příklad: consent default pouze pro EU
gtag("consent", "default", {
  ad_storage: "denied",
  analytics_storage: "denied",
  // ... další consent typy
  region: ["CZ", "SK", "DE", "AT", "PL"]
});

Google doporučuje nastavit wait_for_update na 500 ms. ConsentBadge tuto hodnotu nastavuje automaticky, aby tagy počkaly na interakci uživatele s bannerem.

JavaScript API

ConsentBadge vystavuje JavaScript API přes globální objekt window.OSCBR. Pomocí API můžete programově pracovat se souhlasy, znovu otevřít banner nebo vyčistit instanci pro SPA.

Instance banneru

// Přístup k instanci
const banner = window.OSCBR.instance;

// Odkaz na modal DOM element
const modalEl = window.OSCBR.modal;

Zjištění aktuálních kategorií

Metoda getCategories() vrátí pole kategorií, které uživatel aktuálně povolil.

const categories = window.OSCBR.instance.getCategories();
// Příklad výstupu: ["strictly-necessary", "analytical"]

if (categories.includes("marketing")) {
  // Načíst Facebook Pixel, LinkedIn Insight Tag apod.
}

Znovu otevřít banner

Pomocí showModal() můžete banner kdykoliv znovu zobrazit — například po kliknutí na odkaz „Nastavení cookies" v patičce webu.

// Tlačítko v patičce webu
document.getElementById("cookie-settings").addEventListener("click", () => {
  window.OSCBR.instance.showModal();
});

SPA cleanup

Pro single-page aplikace (React, Vue, Angular) nebo GTM preview režim použijte cleanup() k odstranění banneru a uvolnění event listenerů.

// Cleanup při unmount SPA komponenty
window.OSCBR.cleanup();

dataLayer events

Banner automaticky odesílá dva eventy do dataLayer:

cookiebarConsentInit

Odeslán při prvním načtení banneru (výchozí stav souhlasů).

cookiebarConsentUpdate

Odeslán po jakékoliv změně souhlasů uživatelem (kliknutí na „Přijmout vše", „Uložit nastavení" apod.).

// Příklad: Reagování na consent update v GTM
// Vytvořte Custom Event trigger s názvem "cookiebarConsentUpdate"
// a použijte ho pro spuštění tagů, které vyžadují souhlas.

// Nebo v JavaScriptu:
window.addEventListener("message", (e) => {
  // dataLayer push je automatický, ale můžete
  // poslouchat i přímo:
  if (e.data?.event === "cookiebarConsentUpdate") {
    console.log("Consent updated:", e.data);
  }
});

JSON Import/Export

Builder umožňuje uložit a načíst celou konfiguraci banneru ve formátu JSON. To je užitečné pro sdílení nastavení mezi členy týmu, verzování konfigurace v Gitu nebo rychlé přepínání mezi různými variantami banneru.

Uložení konfigurace

V builderu použijte klávesovou zkratku Ctrl+S (nebo Cmd+S na Macu), případně klikněte na tlačítko exportu. Konfigurace se stáhne jako .json soubor.

Načtení ze souboru

Klikněte na tlačítko importu v builderu a vyberte dříve uložený JSON soubor. Builder načte všechna nastavení a aktualizuje preview.

Drag & drop import

JSON soubor můžete také přetáhnout přímo do okna builderu. Soubor se automaticky načte.

Formát souboru

JSON soubor obsahuje tři hlavní klíče:

{
  "_schema": "consentbadge-config-v1",
  "_savedAt": "2025-01-15T10:30:00.000Z",
  "config": {
    "host": "example.com",
    "version": "1.0.0",
    "multilingual": true,
    "langAutoSelect": true,
    "defaultLang": "cs",
    "dismissible": false,
    "consentModeRegions": ["CZ", "SK"],
    "categoryConfig": {
      "analytical": { "defaultState": false },
      "preferences": { "defaultState": false },
      "marketing": { "defaultState": false }
    },
    "texts": [
      {
        "lang": "cs",
        "title": "Používáme cookies",
        "description": "...",
        "acceptAll": "Přijmout vše",
        "rejectAll": "Odmítnout vše",
        "save": "Uložit nastavení",
        "settings": "Nastavení"
      }
    ]
    // ... další nastavení
  }
}

Klíč _schema slouží k identifikaci verze formátu. Builder při importu zkontroluje kompatibilitu a upozorní vás, pokud je soubor ve starší nebo neznámé verzi.

CLI

ConsentBadge CLI umožňuje generovat cookie consent bannery přímo z příkazové řádky — bez nutnosti otevírat builder.

Instalace

CLI nevyžaduje globální instalaci. Spusťte ho přímo přes npx:

npx consentbadge generate --preset dark-elegant --output banner.html

Dostupné příkazy

consentbadge generate

Vygeneruje HTML banner soubor z presetu nebo konfiguračního JSON souboru.

consentbadge init

Interaktivní průvodce — vytvoří konfigurační soubor consentbadge.json.

consentbadge validate

Zkontroluje konfiguraci proti GDPR pravidlům a hlásí chyby.

consentbadge preview

Otevře vygenerovaný banner v prohlížeči pro náhled.

consentbadge list-presets

Zobrazí všechny dostupné design presety.

Příklad: Generování z presetu

# Vygenerovat banner s presetem a českými + anglickými texty
npx consentbadge generate \
  --preset glassmorphism \
  --lang cs,en \
  --domain .example.cz \
  --output cookie-banner.html

Příklad: Práce s konfigurací

# 1. Vytvořit konfiguraci průvodcem
npx consentbadge init

# 2. Ověřit konfiguraci
npx consentbadge validate --config consentbadge.json

# 3. Vygenerovat banner
npx consentbadge generate --config consentbadge.json

Tip

CLI je ideální pro CI/CD pipelines — vygenerujte banner automaticky při každém buildu.

MCP Server

MCP (Model Context Protocol) server umožňuje AI agentům (Claude Code, Cursor a další) konfigurovat bannery konverzačně. Řeknete agentovi co chcete a on banner nakonfiguruje za vás.

Instalace pro Claude Code

claude mcp add consentbadge -- npx tsx packages/mcp/src/index.ts

Instalace pro Cursor / jiné klienty

// claude_desktop_config.json nebo .cursor/mcp.json
{
  "mcpServers": {
    "consentbadge": {
      "command": "npx",
      "args": ["tsx", "packages/mcp/src/index.ts"]
    }
  }
}

Dostupné nástroje (27)

MCP server poskytuje 27 nástrojů organizovaných do 6 skupin:

Konfigurace

get_config, apply_preset, reset_config

Design

set_colors, set_typography, set_layout, set_effects, set_button_styles, reorder_buttons, set_dark_mode

Texty

add_language, remove_language, update_texts, list_available_languages

Kategorie

add_category, remove_category, update_category, reorder_categories

Nastavení

update_consent_mode, update_behavior, update_cookie

Výstup

validate_config, generate_banner, preview_banner, list_presets, export_config, import_config

Jak to funguje

Server udržuje konfiguraci banneru v paměti po celou dobu session. Každý nástroj konfiguraci čte nebo upravuje. Na konci zavoláte generate_banner a dostanete hotový HTML.

# Příklad konverzace s AI agentem:
# "Vytvoř tmavý banner pro e-shop na .example.cz, česky a anglicky"

# Agent postupně zavolá:
# → apply_preset("dark-elegant")
# → set_colors({ theme: "#1E40AF" })
# → add_language("cs")
# → update_cookie({ host: ".example.cz" })
# → validate_config()
# → generate_banner({ outputPath: "banner.html" })

Tip

MCP server nevyžaduje žádnou databázi ani API klíče. Běží lokálně jako subprocess vašeho AI editoru.

Dokumentace

Začínáme

Rychlý start ve 3 krocích

Požadavky

Builder přehled

Nasazení přes GTM

Krok 1: Otevřete Google Tag Manager

Krok 2: Vytvořte nový tag

Krok 3: Vložte kód z builderu

Krok 4: Nastavte trigger

Krok 5: Publikujte kontejner

Přímé vložení

Google Consent Mode v2

Mapování kategorií na consent typy

Konfigurace regionů

JavaScript API

Instance banneru

Zjištění aktuálních kategorií

Znovu otevřít banner

SPA cleanup

dataLayer events

JSON Import/Export

Uložení konfigurace

Načtení ze souboru

Drag & drop import

Formát souboru

CLI

Instalace

Dostupné příkazy

Příklad: Generování z presetu

Příklad: Práce s konfigurací

MCP Server

Instalace pro Claude Code

Instalace pro Cursor / jiné klienty

Dostupné nástroje (27)

Jak to funguje