Hoy vamos a ver cómo personalizar el banner de cookies de Cookiebot aunque estemos en el plan gratuito.

En mi caso, el script de Cookiebot lo tengo instalado desde Google Tag Manager, pero podemos aplicarlo directamente a la web a través del HTML.

🧠 Esta personalización sirve también si estáis utilizando cualquier otro de los planes de Cookiebot.

Vayamos de lo más sencillo a lo más complejo:

Cómo modificar los textos del banner de cookies

Desde la propia administración de Cookiebot CMP, podemos modificar los textos a nuestro gusto:

🔗 Si quieres mantener tu contenedor de Google Tag Manager organizado, te dejo por aquí un breve artículo de tips para mantener GTM limpio: Reflexión sobre el orden en la analítica y 5 consejos aplicables en GTM

Modificar el propio banner

Ahora sí, a través del siguiente código CSS, podremos modificar nuestro banner de cookies para ocultar campos, eliminar el logo de Usercentrics o modificar colores para que cuadre con el look&feel de nuestro site.

/* Quitar logo de Cookiebot */
#CybotCookiebotDialogPoweredbyImage {
    display: none !important;
}

/* Fondo glassy con estilo de este site*/
#CybotCookiebotDialog {
    background: #ffffff26 !important; /* rgba(255, 255, 255, 0.15) */
    border-radius: 18px !important;
    box-shadow: 0 4px 30px #0000001a !important; /* rgba(0, 0, 0, 0.1) */
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border: 0.75px solid #ffffff47 !important; /* rgba(255, 255, 255, 0.28) */
    color: white !important;
    font-weight: 600 !important;
}

/* Cambiar el color del banner */
#CybotCookiebotDialog * {
    color: white !important;
}

/* Ocultar elementos específicos por ID: esto oculta la descripción superior, el campo de los tabs y otros elementos que podemos quitar*/
#CybotCookiebotDialogHeader,
#CybotCookiebotDialogNav,
#CybotCookiebotDialogBodyFieldsetInnerContainer,
#CybotCookiebotDialogBodyLevelButtonsSelectPane {
    display: none !important;
}

/* Botones generales */
.CybotCookiebotDialogBodyButton {
    border-radius: 8px !important;
    padding: 10px 20px !important;
    border: none !important;
    font-weight: bold !important;
    cursor: pointer !important;
    color: white !important;
    background: transparent !important;
    border: 1px solid #ffffff47 !important; /* rgba(255, 255, 255, 0.28) */
}

/* Botón Aceptar todas las cookies*/
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background: linear-gradient(128deg, #00B2FF75, #0070FF75) !important;
    color: white !important;
}

Podemos ir aplicando estos cambios a través de la Consola para verlos en tiempo real, para después implementarlos en la web a nivel Custom CSS o desde Google Tag Manager con una cHTML:

Sin duda, con estas modificaciones podremos hacer que nuestro banner de cookies de Cookiebot tenga el estilo que buscamos sin llegar a tener que cambiar de plan.

Resultado final