Saltar al contenido

Idioma

Menú de la documentación

Personalización del banner

Cambia el diseño, los colores, los textos y los idiomas del banner de consentimiento, añade CSS propio, enlaza las preferencias y publica versiones sin riesgo.

Última actualización: 29 de octubre de 2026

Cada sitio de Cookiesh tiene una única configuración de banner. Las reglas por región deciden qué experiencia de consentimiento recibe cada visitante (opt-in, opt-out o aviso), y la configuración del banner decide cómo se ve y qué dice. Edítala en Banners → Appearance y previsualiza los cambios en directo antes de publicarlos.

Diseños

Elige el diseño que mejor encaje con tu sitio. Todos los diseños tienen un tema claro, uno oscuro y uno automático, que sigue el ajuste prefers-color-scheme del visitante.

Diseño Ideal para Comportamiento
bar Webs de marketing Barra a todo el ancho en la parte inferior de la ventana
box Webs de contenido y blogs Tarjeta compacta en una esquina que no tapa el contenido
modal Apps que no deben ejecutar nada antes de una elección Diálogo centrado que bloquea la página hasta que el visitante elige

Todos los diseños reservan su propio espacio y se cargan después de tu contenido, así que no provocan cambios de diseño. En los banners opt-in, Rechazar todas aparece siempre en la primera capa, con el mismo tamaño y peso que Aceptar todas. Los reguladores consideran un patrón oscuro esconder la opción de rechazo, así que esto no se puede desactivar.

Colores, fuentes y marca

En Appearance → Style puedes definir:

  • Color de marca. Se usa en el botón principal, los interruptores y los anillos de foco. Cookiesh lo compara con el fondo y te avisa si el contraste no llega al nivel AA de WCAG.
  • Fuente. inherit (el valor por defecto) usa la fuente de tu sitio, así el banner parece nativo sin cargar archivos adicionales.
  • Radio de las esquinas y sombra, para ajustarlos a tu sistema de diseño.
  • Logotipo. Opcional; se muestra en el centro de preferencias.

En los planes Pro y Enterprise también puedes quitar el distintivo “Powered by Cookiesh”.

Textos y traducciones

Cookiesh incluye textos de banner revisados en más de 40 idiomas. Elige el idioma en este orden:

  1. El atributo data-language de la etiqueta script, si existe.
  2. El atributo lang de tu elemento <html>.
  3. El idioma del navegador del visitante.
  4. El idioma por defecto que configures en el panel.
<script
  src="https://sdk.cookiesh.eu/v1/consent.js"
  data-site-id="ck_live_8f2a91"
  data-language="de"
  async
></script>

Para cambiar los textos, abre Appearance → Copy, elige un idioma y edita el título, el cuerpo y las etiquetas de los botones. Los cambios solo se aplican a ese idioma. Sé concreto: nombra las finalidades (“medir el tráfico”, “mostrar anuncios personalizados”) en lugar de escribir “mejorar tu experiencia”.

CSS personalizado

En los planes Pro y Enterprise, Appearance → Custom CSS te permite ir más allá de las opciones integradas. El banner se renderiza dentro de un shadow root, así que los estilos de tu sitio no pueden romperlo y los suyos no se filtran a tu sitio. Dale estilo con propiedades personalizadas de CSS y los nombres ::part() expuestos:

cookiesh-banner {
  --ck-color-primary: #4f46e5;
  --ck-color-background: #0a0b10;
  --ck-color-text: #ededf2;
  --ck-radius: 12px;
  --ck-font-family: inherit;
}

cookiesh-banner::part(button-primary) {
  text-transform: none;
  letter-spacing: 0;
}

cookiesh-banner::part(title) {
  font-weight: 600;
}

Partes disponibles: container, title, body, button-primary, button-secondary, link, toggle y category.

Enlace a las preferencias

Los visitantes deben poder cambiar de opinión tan fácilmente como dieron su consentimiento. Añade a tu pie de página un enlace que vuelva a abrir el centro de preferencias. Sirve cualquier elemento con data-cookiesh-open:

<button type="button" data-cookiesh-open="preferences">Configuración de privacidad</button>

También puedes llamar a cookiesh.openPreferences() desde tu propio código (consulta la API de JavaScript). Si prefieres no añadir un enlace, activa el botón flotante de privacidad en Appearance → Floating button.

Publicación y versiones del banner

Los cambios se quedan en borrador hasta que haces clic en Publish. Cada publicación crea una nueva versión del banner, y cada registro de consentimiento guarda la versión que vio el visitante, así que siempre puedes demostrar qué texto aceptó cada persona.

Si cambias las categorías, los proveedores o las finalidades, marca Ask again antes de publicar. Así, los visitantes que eligieron con una versión anterior verán de nuevo el banner en su próxima visita. Los cambios puramente visuales, como los colores o las fuentes, no requieren una nueva elección.

Los cambios publicados llegan a tu sitio en aproximadamente un minuto. Nunca necesitas volver a desplegar tu sitio.