Cookie Banner Quickstart

This guide guides you by creating a banner cookie in the platform console and adding it to your website.

Prerequisites

A running the platform instance (see Architecture & Migration Reference if you haven’t deployed yet)
Access your website’s HTML to add a script tag

Setup

Creating a banner in the platform console

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

Field	Description
Name	An internal name that identifies this banner (e.g. “Home Site”)
Origin	The complete origin of your website (for example `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	The number of days before the 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.

Form of consent and presentation are not selected at the time of creation – they are automatically resolved from the visitor’s location. Geolocation and Regulations.

Configure cookie categories

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

You can :
- Reorder categories Use the up/down arrow to control the order of display.
- Add custom categories With a name and a description
- Delete normal categories You do not need them – any cookies in them are automatically moved to the Uncategories category.
Customize translations (optional)

Mergeţi la Translations Embedded 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 tags and ARIA attributes
- Translate category names and descriptions per language
- Add new languages for any location that is not included by default
- Set the default language in banner settings – the SDK returns to this when the visitor’s language is not available
Changes to translations create a new version of the project, just like any other configuration changes.
Add cookies to each category

Schimbaţi la Cookies Tab to document the specific cookies used in each category. For each cookie, provide:
- Name Name of the cookie (e.g. _ga)
- Duration How long does the cookie last (e.g. “2 years”)
- Description Ce face cookie-ul
You can also move cookies between categories This is useful for organizing newly detected cookies that are in the category Uncategorized – move them to the appropriate category (e.g. Analytics, Advertising) so that visitors can see accurate groupings.

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

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

Add the snippet to your website.

Mergeţi la JS / CSS snippets Add it to your website’s HTML, ideally just before closing the </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 basic URL address with the values displayed in the console. The Settings link allows visitors to reopen their preferences (under CCPA it displays “Your Privacy Options” with the official opt-out icon and opens the Privacy Options panel).

The SDK automatically detects the visitor’s language from the <html lang="..."> attribute of your page or from your browser’s language setting.

<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 Only one banner can be active at a given time.
Tag third-party scripts

Mark any script or items that require consent with the data-cookie-consent attribute, for example, to access an analytical 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 gives consent to the appropriate category. Blocking Resources Pentru ghidul complet.

What happens next

Once the banner is alive:

New visitors see the appropriate dialog for their regulations (opt-in, opt-out or notification) and can accept, reject, customize or recognize as appropriate.
The consent is stored in a cookie probo_consent and recorded on the server for auditing purposes.
Third-party resources labelled with data-cookie-consent are only uploaded when the visitor has consented to the appropriate category.
<probo-settings-link> in your header or footer allows visitors to change their preferences at any time. under CCPA the banner starts closed and the link displays “Your Privacy Options” with the official opt-out icon, opening the Privacy Options panel – see the panel JavaScript SDK docs for details.
When you update categories or banner settings, a new version of the project is created. Publish it to push changes to visitors. Existing consent remains valid until it expires or visitors update their preferences.