Iubenda logo
Genera tus documentos

Documentación

Tabla de contenidos

Cómo personalizar el diseño y comportamiento del banner de cookies (Guía para principiantes)

Puedes modificar fácilmente el diseño y las funciones estándar del banner de consentimiento de cookies en tu sitio web. Puedes cambiar el color de fondo, las dimensiones, el contenido, la posición, los botones “Aceptar” y “Personalizar” y las funciones básicas.

Este artículo se centra en cómo realizar cambios básicos en la apariencia y la posición del aviso de cookies.

Para obtener una visión más detallada de la configuración, consulta esta guía completa sobre la instalación y la personalización de nuestra solución de gestión de cookies (incluye cómo modificar ampliamente las imágenes del banner, el comportamiento general de la Cookie Solution y la obtención del consentimiento).

Para comenzar a personalizar tu aviso de cookies, dirígete a tu dashboard > [tu sitio web/app], luego haz clic en Editar en el área de la Cookie Solution. Esto te llevará directamente al panel de personalización:

Personalizzazione della grafica e del comportamento del cookie banner di iubenda

Aquí puedes:

  • Cambiar la posición del banner (superior, inferior, superior izquierda/derecha flotante, inferior izquierda/derecha flotante, centro flotante o superior/inferior central flotante).
  • Añadir un efecto de “lightbox” opcional a través de la función de superposición de fondo.
  • Personalizar el widget de privacidad (ver más abajo).
  • Cambiar los elementos visuales básicos del banner, como el color del tema (oscuro, claro o personalizado).
  • Personalizar el encabezado con los colores y el logotipo de tu marca (ver más abajo).
  • Eliminar la marca iubenda de la segunda capa seleccionando la casilla White label.
  • Activar/desactivar los botones “Aceptar” y “Personalizar“.
  • Activar/desactivar el botón “Rechazar” (ver más abajo).
  • Activar/desactivar el botón de cierre del banner (“x”).
  • Activar/desactivar el consentimiento al continuar con la navegación. Anula la selección si no quieres obtener el consentimiento mediante el desplazamiento por la página y al continuar con la navegación. Cuando esta opción no está seleccionada, los consentimientos solo se registran cuando el usuario cierra explícitamente el banner/modal o hace clic en el botón “Continuar con la navegación” (dentro del modal).
  • Activar/desactivar el consentimiento mediante el desplazamiento por la página. Anula la selección si no quieres obtener el consentimiento mediante el desplazamiento por la página (más detalles en Cookies y RGPD: ¿que es realmente necesario?).
  • Activar/desactivar el consentimiento mediante la interacción con la página. Anula la selección si no quieres obtener el consentimiento haciendo clic en un botón/enlace en la página.
  • Activar/desactivar el consentimiento por categoría. Selecciónalo si quieres dar a los usuarios un control más detallado sobre las categorías de cookies u otros identificadores a los que dar su consentimiento. Lee la documentación para una configuración adecuada.
  • Habilitar el Marco de Transparencia y Consentimiento de IAB, recomendado si eres un editor propio que trabaja con anunciantes externos (como Google Ads).

Widget de privacidad

Esta función opcional permite a tus usuarios acceder y editar las preferencias de seguimiento en cualquier momento después de configurar sus preferencias iniciales.

A menos que añadas manualmente la opción para editar las preferencias de consentimiento como un enlace en el pie de página, si habilitas el Marco de Transparencia y Consentimiento de IAB, esta función se muestra automáticamente como un pequeño widget que se desplaza por la página.

Para personalizar, haz clic en el menú desplegable Aviso

y elige tus opciones preferidas en “Widget de privacidad”:

Opciones para personalizar con tu marca

Puedes personalizar el encabezado del banner de cookies con los colores y el logotipo de tu marca. Por ejemplo, para nuestro sitio hemos utilizado los colores y el logotipo de nuestra empresa:

Para habilitar esta función, marca la opción Logotipo y colores personalizados en el configurador:

Una vez que hayas añadido el logotipo elegido y el texto y los colores de fondo, se agregarán los parámetros brandTextColor, brandBackgroundColor y logo a tu fragmento de código de la Cookie Solution.

? Sugerencia para el logotipo: usa un SVG blanco sobre fondo transparente para obtener el mejor resultado.

Echa un vistazo a la demostración en CodePen o consulta nuestra guía avanzada para obtener más información sobre las opciones para personalizar con tu marca.

Botón “Rechazar”

Una vez habilitada, esta función permitirá a tus usuarios negarse a dar su consentimiento a las cookies haciendo clic en este botón en lugar de en el icono de cierre estándar. Esta opción es particularmente relevante para los usuarios que operan en el Reino Unido, ya que la ICO ahora requiere que se muestre un botón de rechazar.

Para habilitar esta función, marca la opción “Botón rechazar” en el configurador:

Como resultado, "rejectButtonDisplay": true se agregará al fragmento de código de la Cookie Solution.

* Ten en cuenta que una vez que esta opción esté habilitada, se deshabilitará el icono de cierre en la esquina superior derecha del banner de cookies.

Como ocurre con la mayoría de los elementos de la Cookie Solution, el color y el texto del botón son totalmente personalizables. Echa un vistazo a la demostración en CodePen o consulta nuestra guía avanzada para obtener más información sobre personalización y callbacks.

Opciones avanzadas

Al hacer clic en Opciones avanzadas, se abrirá una lista completa que te permitirá personalizar todo, desde la animación del banner, el texto del enlace de la política de cookies, los botones y el contenido del banner hasta el CSS del banner, el tiempo de duración de las cookies y las callbacks.

iubenda Cookie Solution - Opzioni Avanzate

Gestiona el consentimiento de cookies con nuestra Cookie Solution

Genera un banner de cookies

Más información

  • La guía avanzada explica con más detalle cómo realizar modificaciones avanzadas en el banner de cookies y su comportamiento.
  • Cookie Solution de iubenda: Introducción y Guía de Inicio
  • Introducción al bloqueo previo de cookies
  • Cookies y RGPD: ¿que es realmente necesario?
  • Preguntas y respuestas sobre la gestión del consentimiento de cookies