Cookie Banner Overview
Probo’s cookie banner is a simple, full-featured consent solution you can bundle directly into your app, use headless with complete UI control, or drop in with a single script tag. It is not a bloated CMP platform — it is a straight-to-the-point tool that covers what you actually need: consent collection, an auditable consent trail, third-party resource blocking, and built-in integrations with Google Consent Mode and PostHog.
Key Features
Section titled “Key Features”- Dependency-free and bundleable — Zero runtime dependencies. Install via npm and ship it with your app as an ES module, or load it from a CDN with a single script tag. No external service required at runtime beyond your own Probo instance.
- Headless or themed — Use the ready-to-use themed banner out of the box, or compose unstyled Web Component building blocks for complete control over every pixel. Framework-agnostic: works in React, Vue, Svelte, plain HTML — anything.
- Multi-regulation compliance — Supports opt-in (GDPR, ePrivacy) and opt-out (CCPA/CPRA) consent modes, Global Privacy Control (GPC) detection, and per-category cookie controls. See Compliance for the full list of supported regulations.
- Consent audit trail — Every consent action is recorded server-side with an anonymized IP address, user agent, per-category choices, and a reference to the exact banner version the visitor saw. See Audit Trail for details.
- Third-party blocking — Automatically prevent scripts, iframes, images, and other resources from loading until the visitor grants consent for the corresponding category.
- Built-in integrations — Automatically syncs consent state with Google Consent Mode v2 and PostHog, driven by per-category configuration in the console. No extra code needed.
- Multi-language support — Built-in translations for English, French, German, and Spanish. Customize all banner text per language, including category names and descriptions. The SDK automatically detects the visitor’s language from the page or browser.
- Versioned configuration — Every change to your banner creates a draft version. Publish when ready, and each consent record is tied to the exact version the visitor saw.
- Theming — Match your brand with CSS custom properties for colors, fonts, border radius, and more. Supports dark mode.
How It Works
Section titled “How It Works”The cookie banner system has three parts:
- Probo Console — Create and configure banners, define cookie categories, and review consent records. This is where you manage everything.
- Probo API — A REST API that serves banner configuration to visitors and records their consent decisions.
- JavaScript SDK (
@probo/cookie-banner) — A client-side library that renders the consent UI, communicates with the API, stores consent in a cookie, and blocks/unblocks third-party resources based on the visitor’s choices.
When a visitor loads your page, the SDK fetches the published banner configuration from the API in the appropriate language, checks for existing consent, and displays the banner if needed. After the visitor makes a choice, the SDK records consent via the API and activates any third-party resources the visitor has allowed.
Compliance
Section titled “Compliance”Probo’s cookie banner is designed to help you meet the requirements of multiple privacy regulations through its consent modes, audit trail, and resource blocking. The same banner adapts to different regulatory frameworks by switching between opt-in and opt-out behavior.
| Regulation | Region | How Probo Helps |
|---|---|---|
| GDPR | European Union | Opt-in mode blocks all non-essential cookies until the visitor explicitly consents. Per-category controls and a full audit trail provide the evidence required by Articles 7 and 30. |
| ePrivacy Directive | European Union | Consent is collected before any cookies are set, satisfying the prior consent requirement for terminal equipment access. |
| CCPA / CPRA | California, US | Opt-out mode allows cookies by default and provides a clear mechanism for visitors to opt out. |
| LGPD | Brazil | Opt-in mode with per-category consent and an auditable consent record. |
| PIPEDA | Canada | Meaningful consent with clear descriptions of each cookie category and purpose. |
| POPIA | South Africa | Prior consent collection with documented proof of each visitor’s choices. |
The SDK also detects Global Privacy Control (GPC). When a visitor’s browser sends the Sec-GPC: 1 header (via navigator.globalPrivacyControl), the SDK automatically records a GPC consent action that enables only necessary cookies — no banner is shown. This satisfies GPC requirements under CCPA and similar frameworks.
Audit Trail
Section titled “Audit Trail”Every consent action is recorded server-side as an immutable record. This gives you the evidence needed for compliance audits and regulatory inquiries.
Each consent record includes:
- Action — What the visitor chose: accept all, reject all, customize, or GPC (automatic).
- Per-category choices — The exact consent state for each cookie category (e.g. analytics: granted, advertising: denied).
- Banner version — A reference to the exact published banner configuration the visitor saw, so you can prove what was presented at the time of consent.
- Anonymized IP address — The visitor’s IP address is anonymized before storage. IPv4 addresses have the last octet zeroed (e.g.
192.168.1.123becomes192.168.1.0). IPv6 addresses are masked to a /48 prefix. The full IP address is never persisted. - User agent — The visitor’s browser user agent string.
- SDK version — The version of the JavaScript SDK that recorded the consent.
- Timestamp — When the consent was recorded.
Consent records are tied to your organization and can be reviewed in the Probo console. Because each record references a specific banner version, you can always reconstruct exactly what the visitor saw when they made their choice.
Multi-Language Support
Section titled “Multi-Language Support”Probo supports serving the cookie banner in multiple languages. When you create a banner, built-in translations for English, French, German, and Spanish are created automatically. You can customize these translations and add new languages from the console.
The system translates:
- All banner UI text (title, description, buttons, labels, ARIA attributes)
- Cookie category names and descriptions
- Cookie duration labels
- Content placeholder text (shown when resources are blocked)
The SDK resolves the visitor’s language using this priority:
- An explicit
langattribute on the component (ordata-langon the script tag) - The
langattribute on the page’s<html>element (base subtag, e.g.frfromfr-FR) - The browser’s
navigator.language - The banner’s default language (set in the console)
If the resolved language has no published translation, the banner falls back to its default language.
Consent Modes
Section titled “Consent Modes”Probo supports two consent modes:
| Mode | Behavior | Use Case |
|---|---|---|
| Opt-in | Non-essential cookies are blocked until the visitor explicitly consents | GDPR, ePrivacy — required in the EU |
| Opt-out | Non-essential cookies are active by default; the visitor can opt out | CCPA — common in the US |
Default Categories
Section titled “Default Categories”When you create a new banner, five default categories are set up automatically:
| Category | Type | Description |
|---|---|---|
| Necessary | System (required) | Essential cookies for basic site functionality. Cannot be disabled by visitors. |
| Analytics | Normal | Cookies that help you understand how visitors interact with your website. |
| Advertising | Normal | Cookies used to deliver relevant ads and track ad campaign performance. |
| Functional | Normal | Cookies that enable enhanced functionality like live chat or videos. |
| Uncategorised | System | Collects cookies that have not been assigned to a category yet. |
You can rename categories, add custom ones, reorder them, and move cookies between categories. Normal categories can be deleted — when you do, any cookies in them are automatically moved to the Uncategorised category. System categories (Necessary and Uncategorised) cannot be deleted.
Categories that contain no cookies are automatically hidden from the banner. Only categories with at least one cookie assigned to them are shown to visitors.