Weg met die digitale puist: Zo verwijder je het Cookiebot logo uit je cookiebanner

Je hebt uren gezwoegd op je design. De typografie staat strak, de witruimte ademt en de “digitale openingszin” (hero sectie) knalt van het scherm. En dan komt de “Ja ik wil”-banner om de hoek kijken. Noodzakelijk? Helaas wel. Maar moet Cookiebot daar per se hun eigen logo in je gezicht duwen?

Ik vind van niet. Jouw website is een overtuigmachine, geen reclamezuil voor een ander bedrijf. Zelfs als je de hoofdprijs betaalt aan “pegels” voor hun premium pakket, blijft dat logo vaak hardnekkig staan. Het growth-team daar vindt dat logo blijkbaar belangrijker dan jouw conversie-optimalisatie.

Gelukkig hoef je niet te gokken, want gokken is dokken. Met een beetje CSS en een slimme GTM-trigger maken we je design weer schoon.

De twee stappen om het cookiebot logo van je cookiebanner af te halen

Stap 1: De codesnippet

Gebruik deze CSS om die elementen simpelweg op display: none te zetten. Daarmee verberg je het logo ondanks dat Cookiebot hem vanaf hun kant probeert te tonen op je cookiebanner.

<style>
a#CybotCookiebotDialogPoweredbyCybot,
div#CybotCookiebotDialogPoweredByText,
#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo,
.CookiebotWidget-main-logo {
    display: none !important;
}
</style>

Kopieer bovenstaande code naar je klembord. Je hebt hem zo nodig.

Stap 2: De Implementatie in Google Tag Manager

Ga naar je Google Tag Manager. We gan daar een Custom HTML tag aanmaken:

1. Ga naar ‘Tags’ > ‘New’ en noem ‘m iets logisch zoals: Custom HTML – Hide Cookiebot Logo.
2. Kies bij Tag Configuration voor Custom HTML en plak het eerder genoemde CSS-script in het tekstvlak.
3. Belangrijk: Selecteer onder Consent Settings de optie ‘No additional consent required’. We fixen immers het design, we stelen geen data hier.

Je hebt vervolgens twee triggers in Google Tag Manager nodig om te zorgen dat het logo op elk moment onzichtbaar blijft:

1. Klik op Triggering.
2. All Pages: Spreekt voor zich, dit verbergt het cookiebot logo bij het laden van de pagina.
3. Cookie consent update: Deze is cruciaal. Zodra iemand zijn instellingen wijzigt, probeert Cookiebot dat logo namelijk doodleuk opnieuw te injecteren.
   • Maak een nieuwe trigger aan in GTM, kies voor Custom Event en vul bij Event Name exact dit in: cookie_consent_update.
4. Sla op, druk op verzenden. Zing eventueel een liedje (GTM inside joke) en geniet van je schonere cookiebanner.

Een voorbeeld van hoe je de snippet in GTM zou kunnen zetten.

Extra code snippets en tips voor Cookiebot

Wil je het lettertype in de Cookiebot cookiebanner gelijktrekken aan dat van je website? Gebruik dan onderstaande code. Let wel op: Het lettertype moet in je website zelf wel beschikbaar (lees correct embedded) zijn, anders zal deze code niks doen.

/*Font styling in de banner (zelfde als je website)*/
#CybotCookiebotDialog {
  font-family: poppins, sans-serif !important;
}

Wil je niet alleen het logo verwijderen uit de cookiebanner maar ook het zwevende privacy-icoon linksonder? Gebruik dan deze code:

<style>
/*Verberg de privacy trigger*/
#CookiebotWidget {
  display: none !important;
}
</style>

Let wel op dat je het toegangkelijk maakt om op een andere manier de consent te managen, bijvoorbeeld vanaf een linkje onderin je website footer. Iemand in de EU moet namelijk altijd zijn keuze gemakkelijk weer kunnen wijzigen zodat jij volledig compliant bent.