Cookie Banner Quickstart

This guide walks you through creating a cookie banner in the Probo console and adding it to your website.

Prerequisites

A running Probo instance (see Self-Hosting if you haven’t deployed yet)
Access to your website’s HTML to add a script tag

Setup

Create a banner in the Probo console

Navigate to Cookie Banners in the sidebar and click Create Banner. Fill in the required fields:

Field	Description
Name	An internal name to identify this banner (e.g. “Main Website”)
Origin	The full origin of your website (e.g. `https://www.example.com`)
Privacy Policy URL	Link to your privacy policy page
Consent Expiry	Number of days before consent expires and the banner reappears (default: 365)
Consent Mode	Choose Opt-in (recommended for GDPR) or Opt-out
Default Language	The fallback language for the banner (default: `en`). The SDK uses this when the visitor’s language is not available.

Configure cookie categories

After creating the banner, go to the Settings tab. Five default categories are created automatically: Necessary, Analytics, Advertising, Functional, and Uncategorised.

You can:
- Reorder categories using the up/down arrows to control display order
- Add custom categories with a name and description
- Delete normal categories you don’t need — any cookies in them are automatically moved to the Uncategorised category. System categories (Necessary and Uncategorised) cannot be deleted.
Customize translations (optional)

Go to the Translations tab. Built-in translations for English, French, German, and Spanish are created automatically. You can:
- Edit UI text for any language — banner title, description, button labels, and ARIA attributes
- Translate category names and descriptions per language
- Add new languages for any locale not included by default
- Set the default language in the banner settings — the SDK falls back to this when the visitor’s language is not available
Changes to translations create a new draft version, just like any other configuration change.
Add cookies to each category

Switch to the Cookies tab to document the specific cookies used in each category. For each cookie, provide:
- Name — The cookie name (e.g. _ga)
- Duration — How long the cookie persists (e.g. “2 years”)
- Description — What the cookie does
You can also move cookies between categories using the move button on each cookie row. This is useful for organizing newly detected cookies that land in the Uncategorised category — move them to the appropriate category (e.g. Analytics, Advertising) so visitors see accurate groupings.

This information is displayed to visitors in the preference panel so they can make informed decisions.
Publish the banner

Click Publish Changes in the banner header. This creates a published version of your configuration that the SDK will serve to visitors.

Add the snippet to your website

Go to the JS / CSS snippets tab and copy the script tag. Add it to your website’s HTML, ideally just before the closing </body> tag:

<script
  src="https://unpkg.com/@probo/cookie-banner/dist/cookie-banner.iife.js"
  data-banner-id="YOUR_BANNER_ID"
  data-base-url="https://your-probo-instance.com/api/cookie-banner/v1/"
  data-position="bottom-left"
></script>

Replace YOUR_BANNER_ID and the base URL with the values shown in the console.

The SDK automatically detects the visitor’s language from your page’s <html lang="..."> attribute or the browser’s language setting. To force a specific language, add data-lang:

<script
  src="https://unpkg.com/@probo/cookie-banner/dist/cookie-banner.iife.js"
  data-banner-id="YOUR_BANNER_ID"
  data-base-url="https://your-probo-instance.com/api/cookie-banner/v1/"
  data-lang="fr"
></script>

Activate the banner

Back in the console, click Activate to make the banner live. Only one banner can be active per origin at a time.
Tag third-party scripts

Mark any scripts or elements that require consent with the data-cookie-consent attribute. For example, to gate an analytics script:
```
<script
  type="text/plain"
  data-cookie-consent="analytics"
  data-src="https://analytics.example.com/tracker.js"
></script>
```
The SDK automatically activates these elements when the visitor grants consent for the matching category. See Blocking Resources for the full guide.

What Happens Next

Once the banner is live:

New visitors see the consent dialog and can accept all, reject all, or customize their preferences.
Consent is stored in a probo_consent cookie and recorded server-side for audit purposes.
Third-party resources tagged with data-cookie-consent load only when the visitor has consented to the matching category.
A floating settings button lets visitors change their preferences at any time. You can replace it with your own link (e.g. in the footer) using the <probo-settings-link> element — see the JavaScript SDK docs for details.
When you update categories or banner settings, a new draft version is created. Publish it to push changes to visitors. Existing consent remains valid until it expires or the visitor updates their preferences.