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

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.

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:

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

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

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