# Cookie Banner Quickstart

Acest ghid vă ghidează prin crearea unui banner cookie în consola platformei și adăugarea acestuia pe site-ul dvs. web.

## Prerequisites

- O instanță care rulează platforma (vezi [Architecture & Migration Reference](/docs/deployment/self-hosting/docker-compose) dacă nu ați implementat-o încă) - Acces la HTML-ul site-ului dvs. pentru a adăuga o etichetă script

## Setup

1. ** Creați un banner în consola de platformă**

   Navigați la **Bannere cookie** din bara laterală și faceți clic pe **Create Banner**. Completați câmpurile necesare:

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

   Modul de consimțământ și prezentarea sunt **nu** selectate la momentul creării – ele sunt rezolvate automat din locația vizitatorului. vezi [Geolocalizare și Reglementări](/docs/produs/cookie-banner/geolocalizare).

2. **Configure cookie categories**

   După ce ați creat banner-ul, accesați fila **Settings**. Cinci categorii implicite sunt create automat: Necesare, Analytics, Publicitate, Funcțional și Uncategorized.

   Puteți: - **Reorder categorii** folosind săgețile în sus/în jos pentru a controla ordinea de afișare - **Add custom categories** with a name and description - **Delete normal categories** you don't need - any cookies in them are automat moved to the Uncategorised category.

3. **Customize translations (optional)**

   Se creează automat traduceri încorporate pentru 14 limbi (en, de, es, fr, id, it, ja, ko, nl, pl, pt, tr, uk, zh). Puteți: - **Edit UI text** pentru orice limbă - banner titlu, descriere, etichete de buton și atributele ARIA - **Translate categorii de nume și descrieri** pentru fiecare limbă - **Add new languages** for any local 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

   Modificările aduse traducerilor creează o nouă versiune de proiect, la fel ca orice altă modificare de configurare.

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

   De asemenea, puteți muta cookie-urile între categorii folosind butonul de mutare de pe fiecare rând de cookie-uri. Acest lucru este util pentru organizarea cookie-urilor nou detectate care se află în categoria Uncategorized - mutați-le în categoria corespunzătoare (de exemplu, Analytics, Advertising) astfel încât vizitatorii să vadă grupări exacte.

   Aceste informații sunt afișate vizitatorilor în panoul de preferințe, astfel încât aceștia să poată lua decizii în cunoștință de cauză.

5. **Publish the banner**

   Faceți clic pe **Publicare modificări** în antetul bannerului. Acest lucru creează o versiune publicată a configurației dvs. pe care SDK-ul o va servi vizitatorilor.

6. ** Adăugați fragmentul la site-ul dvs.**

   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 lets visitors reopen preferences (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**

   Înapoi în consola, faceți clic pe **Activare** pentru a face banner-ul live.

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

   SDK-ul activează automat aceste elemente atunci când vizitatorul acordă consimțământul pentru categoria corespunzătoare. vezi [Resurse de blocare](/docs/produs/cookie-banner/resurse de blocare) pentru ghidul complet.

## Ce se întâmplă în continuare

Odată ce banner-ul este viu:

- New visitors see the dialog appropriate for their regulation (opt-in, opt-out, or notice) and can accept, reject, customize, or acknowledge as applicable.
- 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 banner starts closed and 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.