# 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](/docs/deployment/self-hosting/docker-compose) if you haven't deployed yet)
- Access to your website's HTML to add a script tag

## Setup

1. **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`) |
   | **Cookie Policy URL** | Link to your cookie policy page (required) |
   | **Privacy Policy URL** | Link to your privacy policy page (optional) |
   | **Consent Expiry** | Number of days before consent expires and the banner reappears (default: 365) |
   | **Default Language** | The fallback language for the banner (default: `en`). The SDK uses this when the visitor's language is not available. |

   Consent mode and presentation are **not** chosen at create time — they are resolved automatically from the visitor's location. See [Geolocation and Regulations](/docs/product/cookie-banner/geolocation).

2. **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.

3. **Customize translations (optional)**

   Go to the **Translations** tab. Built-in translations for 14 languages (en, de, es, fr, id, it, ja, ko, nl, pl, pt, tr, uk, zh) 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.

4. **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.

5. **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.

6. **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:

   ```html
   <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>

   <!-- Required in the header or footer -->
   <probo-settings-link>Cookie settings</probo-settings-link>
   ```

   Replace `YOUR_BANNER_ID` and the base URL with the values shown in the console. The settings link is not optional: in opt-out jurisdictions — which is most of the world outside Europe — the banner never opens on its own, so this link is the only way a visitor reaches their choices. Under CCPA it shows “Your Privacy Choices” with the official opt-out icon and opens the Privacy Choices panel.

   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`:

   ```html
   <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>
   ```

7. **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.

8. **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:

   ```html
   <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](/docs/product/cookie-banner/blocking-resources) for the full guide.

## What Happens Next

Once the banner is live:

- New visitors see only what their regulation requires. In opt-in jurisdictions the banner opens and blocks non-essential cookies until they choose; in opt-out jurisdictions nothing opens and cookies fire immediately, with the settings link available to opt out. See [Geolocation and regulations](/docs/product/cookie-banner/geolocation) for the full mapping.
- 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.
- `<probo-settings-link>` in your header or footer lets visitors change their preferences at any time. Under CCPA the link shows “Your Privacy Choices” with the official opt-out icon, opening the Privacy Choices panel — see the [JavaScript SDK](/docs/product/cookie-banner/javascript-sdk#settings-link) 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.