Hoe pas je je Squarespace cookiebanner aan?
De standaard cookiebanner van Squarespace is erg basic en heeft qua kleuren maar 2 opties: licht of donker. In deze blogpost leer je hoe je de cookiebanner beter kan laten matchen met de kleuren van je website.
Maar first things first:
Verschillende soort cookies
Je website (of eigenlijk Squarespace) plaatst cookies op de computer, tablet of telefoon van je websitebezoeker. Er zijn verschillende soorten cookies en voor sommige heb je geen toestemming van je websitebezoeker nodig om ze te laten plaatsen (functionele cookies), maar voor sommigen wel (analytische cookies).
Als je geïnteresseerd bent in bezoekersaantallen en de analytics van Squarespace, dan ontkom je er niet aan analytische cookies te laten plaatsen. Deze staan ook standaard aan in Squarespace. Je kunt deze uitzetten via Settings > Cookies & Visitor Data > Disable Squarespace Analytics Cookies.
Heb je ook Google Analytics gekoppeld aan je site dan verzamel je zeker analytische cookies en moet je cookiebanner dus aanstaan.
Als je alleen met functionele cookies werkt dan heb je dus geen cookiebanner nodig.
Volgens de AVG moet je de websitebezoeker de keuze geven om cookies wel of niet te laten plaatsen. Je kunt in de cookiebanner dus 2 buttons zetten: akkoord en niet akkoord. In de Squarespace settings heet dit Opt-in & Out.
Cookieverklaring
Zet in de tekst van je cookiebanner een link naar je cookieverklaring. Deze verklaring zet je een pagina in de Not Linked sectie van je site. Stel op het SEO- tabblad van de pagina van je cookieverklaring in dat deze verborgen wordt voor zoekmachines.
Voor je cookiebanner heb je de keuze tussen een paginabrede balk of een kleiner ‘blokje’ in één van de hoeken van je site. Die kan donker zijn of licht. Als default staat het donkere thema ingesteld (Dark).
Verder kan je deze cookiebanner dus niet stylen in de Squarespace settings (dwz een andere kleurtje geven, het lettertype en de button veranderen etc). Dit kan alleen met CSS. Alle codes staan hieronder.
CSS voor de cookiebanner
CSS voeg je toe via Design > CSS.
De kleuren en fonts kan je uiteraard zelf wijzigen. Gebruik voor de kleuren de betreffende hex-code.
/* Lijntje om cookiebanner*/
.sqs-cookie-banner-v2 {
border: 1px solid red;
}
/* Lettertype en kleur bannertekst */
.sqs-cookie-banner-v2 p {
font-family: 'Raleway';
color: blue!important;
}
/* Lettertype en kleur button */
.sqs-cookie-banner-v2 button {
font-family: ‘Raleway’;
color: blue!important;
border-color: red!important;
border-radius: 20px;
}
/* Kleur van link in bannertekst */
.sqs-cookie-banner-v2 p a {
color: green!important;
}
/* Achtergrond kleur banner */
.sqs-cookie-banner-v2.DARK {
background-color: white;
}Cookiebanner verbergen op 1 pagina
Wil je je bijvoorbeeld op je instagram (link in bio) pagina de cookiebanner verbergen?
Voeg dan deze code toe aan de Code Header Page Injection van de betreffende pagina:
<style>
.sqs-cookie-banner-v2 {
display: none !important;
}
</style>
Disclaimer: ik ben geen jurist. Raadpleeg voor de meest actuele informatie een jurist die hier dagelijks mee bezig is.
