Cookie Banner — Rest of World

Implementación del banner de cookies para mercados que no están sujetos a los requisitos de rechazo explícito de GDPR (EU) ni CCPA (USA). Comparte estructura, CSS y el JavaScript compartido con las demás variantes, con dos diferencias:

Sin botón "Rechazar todo": la barra principal solo tiene dos botones — "Aceptar todo" y "Personalizar".
Logo: SVG inline de Hawkers (no imagen externa de Northweek).

Sin botón de rechazo

La ausencia del botón "Rechazar todo" es intencional para mercados sin obligación legal de ofrecer rechazo directo. No añadir este botón en mercados EU o USA.

Comportamiento

La barra principal aparece fija hasta que el usuario toma una decisión.
El overlay oscuro (#cookiebanner-overlay) bloquea el scroll cuando el panel de preferencias está abierto.
El panel de preferencias se abre con transición de opacidad y se cierra con el botón × o con "Confirmar selección".
Cada categoría de cookies es expandible/colapsable — el icono + (SVG) rota 45° para indicar estado abierto.
En móvil los botones se apilan verticalmente; en escritorio (≥600px) se disponen en fila invertida.

Variables de plantilla

Placeholder	Descripción
`[#LANGUAGE#]`	Código de idioma del documento (ej. `es`, `en`, `fr`).
`[#TEXTDIRECTION#]`	Dirección del texto: `ltr` o `rtl`.
`[#TITLE#]`	Título del banner y del panel de preferencias.
`[#TEXT#]`	Mensaje principal del banner.
`[#ACCEPT#]`	Texto del botón "Aceptar todo".
`[#CUSTOMIZE#]`	Texto del botón "Personalizar".
`[#COOKIESGENERALINTRO#]`	Introducción general a las cookies en el panel de preferencias.
`[#COOKIETYPE_NECESSARY_RAW#]`	Etiqueta de la categoría "Necesarias".
`[#COOKIETYPE_STATISTICS_RAW#]`	Etiqueta de la categoría "Estadísticas".
`[#COOKIETYPE_ADVERTISING_RAW#]`	Etiqueta de la categoría "Publicidad".
`[#COOKIETYPEINTRO_NECESSARY#]`	Descripción de las cookies necesarias.
`[#COOKIETYPEINTRO_STATISTICS#]`	Descripción de las cookies de estadísticas.
`[#COOKIETYPEINTRO_ADVERTISING#]`	Descripción de las cookies de publicidad.
`[#DETAILSHIDE#]`	Texto de "Ocultar detalles" en la categoría de necesarias (color azul `#3860be`).
`[#LEVELOPTIN_ALLOW_SELECTION#]`	Texto del botón "Confirmar selección" en el footer del panel.

note

A diferencia de EU & USA y Northweek, esta variante no usa el placeholder [#DECLINE#].

Categorías de cookies

Categoría	ID del checkbox	Modificable
Necesarias	`CybotCookiebotDialogBodyLevelButtonNecessary`	No (checkbox oculto, siempre activas)
Estadísticas	`CybotCookiebotDialogBodyLevelButtonStatistics`	Sí
Publicidad	`CybotCookiebotDialogBodyLevelButtonMarketing`	Sí
Preferencias	`CybotCookiebotDialogBodyLevelButtonPreferences`	No (oculto, vinculado a publicidad)

Comportamiento responsive

Propiedad	Móvil (`< 600px`)	Escritorio (`≥ 600px`)
Posición barra	Fija en la parte inferior	Centrada en la parte superior
Botones	Columna vertical (2 botones)	Fila horizontal invertida (accept → customize)
Panel preferencias	Pantalla completa	Modal centrado `575 × 601px`

Estructura HTML

<div id="cookiebanner" lang="[#LANGUAGE#]" dir="[#TEXTDIRECTION#]" ng-non-bindable>

  <!-- Overlay oscuro de fondo -->
  <div id="cookiebanner-overlay"></div>

  <!-- Barra principal — solo 2 botones (sin Rechazar) -->
  <div id="cookiebannerWrapper">
    <div id="header-text">
      <p class="c-header">[#TITLE#]</p>
      <p class="c-message">[#TEXT#]</p>
    </div>
    <div class="buttons-container">
      <button type="button"
        id="CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll"
        class="custom-button accept-button">
        [#ACCEPT#]
      </button>
      <!-- Sin botón "Rechazar todo" -->
      <button type="button" id="config-button" class="custom-button">
        [#CUSTOMIZE#]
      </button>
    </div>
    <div style="clear: both"></div>
  </div>

  <!-- Panel de preferencias -->
  <div class="cookiebannerPreferencesWrapper">
    <header>
      <!-- Logo Hawkers (SVG inline) -->
      <div class="cookiebannerPreferences__logo">
        <svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" viewBox="219 270 425 50">
          <!-- paths del logotipo Hawkers -->
        </svg>
      </div>
      <!-- Botón cerrar con SVG inline -->
      <button type="button" id="close-preferences">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#202020">
          <path clip-rule="evenodd" fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414
               L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1
               1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" />
        </svg>
      </button>
    </header>

    <main>
      <section class="preferences-privacy">
        <h2 style="margin-bottom: 8px">[#TITLE#]</h2>
        <p>[#COOKIESGENERALINTRO#]</p>
      </section>

      <section class="preferences-consent">
        <div style="margin-top: 16px">

          <!-- Necesarias (siempre activas) -->
          <div class="preferences-consent__option-wrapper">
            <button type="button" class="preferences-consent__option">
              <span class="preferences-consent__option__plus"><!-- SVG cruz --></span>
              <span>[#COOKIETYPE_NECESSARY_RAW#]</span>
              <span class="preferences-consent__option__right"
                style="font-size: 13px; color: #3860be">
                [#DETAILSHIDE#]
              </span>
              <input type="checkbox" id="CybotCookiebotDialogBodyLevelButtonNecessary"
                style="display: none" />
            </button>
            <aside><p>[#COOKIETYPEINTRO_NECESSARY#]</p></aside>
          </div>

          <!-- Estadísticas -->
          <div class="preferences-consent__option-wrapper">
            <button type="button" class="preferences-consent__option">
              <span class="preferences-consent__option__plus"><!-- SVG cruz --></span>
              <span>[#COOKIETYPE_STATISTICS_RAW#]</span>
              <input id="CybotCookiebotDialogBodyLevelButtonStatistics"
                class="preferences-consent__option__right hw-form-checkbox"
                type="checkbox" />
            </button>
            <aside><p>[#COOKIETYPEINTRO_STATISTICS#]</p></aside>
          </div>

          <!-- Publicidad -->
          <div class="preferences-consent__option-wrapper">
            <button type="button" class="preferences-consent__option">
              <span class="preferences-consent__option__plus"><!-- SVG cruz --></span>
              <span>[#COOKIETYPE_ADVERTISING_RAW#]</span>
              <input id="CybotCookiebotDialogBodyLevelButtonMarketing"
                class="preferences-consent__option__right hw-form-checkbox"
                type="checkbox" />
              <input style="display: none"
                id="CybotCookiebotDialogBodyLevelButtonPreferences"
                type="checkbox" />
            </button>
            <aside><p>[#COOKIETYPEINTRO_ADVERTISING#]</p></aside>
          </div>

        </div>
      </section>
    </main>

    <footer>
      <button type="button" class="confirm-selection"
        id="CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection">
        [#LEVELOPTIN_ALLOW_SELECTION#]
      </button>
    </footer>
  </div>

</div>

Clases y selectores CSS principales

Barra principal
Panel preferencias

Selector	Descripción
`#cookiebannerWrapper`	Contenedor de la barra. Fondo `#202020`, ancho máx. `700px`.
`#cookiebanner .c-header`	Título en blanco, negrita.
`#cookiebanner p.c-message ~ p`	Texto secundario bajo el mensaje principal.
`.buttons-container`	Flex column (móvil) / flex row-reverse (escritorio). Solo 2 botones.
`.custom-button`	Botón base: fondo `#202020`, texto blanco.
`.accept-button`	Variante: fondo blanco, texto negro (invierte colores).

Selector	Descripción
`.cookiebannerPreferencesWrapper`	Drawer de preferencias. `z-index: 0` inicial, `opacity: 0`.
`.cookiebannerPreferencesWrapper.open`	Estado visible: `z-index: 21474836475`, `opacity: 1`.
`#cookiebannerWrapper:has(+ .cookiebannerPreferencesWrapper.open)`	Eleva el z-index de la barra mientras el panel está abierto.
`#cookiebanner-overlay`	Fondo oscuro semitransparente que bloquea la UI.
`.preferences-consent__option-wrapper`	Fila de categoría con bordes laterales e inferior (el primero también superior).
`.preferences-consent__option.open ~ aside`	Muestra la descripción de la categoría cuando está expandida.
`.preferences-consent__option__plus`	SVG cruz (12×12px) que rota 45° al abrir la categoría.
`.preferences-consent__option__right:is(input)`	Checkbox de consentimiento alineado a la derecha (20×20px).
`.cookiebannerPreferences__logo`	Logo Hawkers SVG inline, ancho 100px.

Diferencias entre variantes

Aspecto	EU & USA	Northweek	Rest of World
Botón "Rechazar todo"	Sí	Sí	No
Logo del panel	SVG Hawkers inline	`<img>` CDN Northweek	SVG Hawkers inline
Icono expandir categoría	Carácter `+` (texto)	SVG inline (cruz)	SVG inline (cruz)
Color texto "Ocultar detalles"	Hereda color por defecto	Azul `#3860be`	Azul `#3860be`
`z-index` inicial del panel	Sin declarar	`0`	`0`

Notas

IDs reservados por Cookiebot

Los id de los botones (CybotCookiebotDialogBodyLevelButton*) son utilizados internamente por Cookiebot para registrar el consentimiento. No los cambies ni los elimines.

Abrir/cerrar categorías

El comportamiento de acordeón se controla añadiendo/quitando la clase open al elemento .preferences-consent__option. Al estar presente, el <aside> adyacente pasa de display: none a display: block y el SVG + rota 45°.

Activar el panel de preferencias

El panel se muestra añadiendo la clase open. CSS bloquea automáticamente el scroll del documento mediante :has(.cookiebannerPreferencesWrapper.open) en html y body.

Comportamiento​

Variables de plantilla​

Categorías de cookies​

Comportamiento responsive​

Estructura HTML​

Clases y selectores CSS principales​

Diferencias entre variantes​

Notas​