Code: Cookie-melding verbergen na klik

Samenvatting

Wil je een eenvoudige cookiemelding op je website die verdwijnt als de bezoeker op "Akkoord" klikt? En die niet opnieuw verschijnt als diezelfde bezoeker later terugkomt? Dat kan met een klein stukje code. De melding verschijnt onderaan het scherm, en de keuze van de bezoeker wordt onthouden.

⚠️ Belangrijk: Dit is bedoeld voor een simpele informatieve melding. Als je trackingcookies of analytics gebruikt die persoonsgegevens verwerken, heb je een volwaardige cookieconsent-tool nodig met categorieën en opt-in mogelijkheden. Dit snippet is dan niet voldoende.

Hoe werkt het

De code maakt een donkere balk onderaan het scherm met een korte tekst en een "Akkoord"-knop. Als de bezoeker op de knop klikt, wordt de balk verborgen en onthoudt de browser die keuze via localStorage (een soort geheugen in de browser). Bij een volgend bezoek verschijnt de melding niet meer.

Stappenplan

1. Ga naar Website-instellingen → tabblad Code → veld Body
2. Plak de onderstaande code
3. Pas eventueel de tekst, kleuren en positie aan naar je wensen

De code:

    <!-- Cookie-melding balk -->
    <div id="cookie-banner" style="
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #1a1a1a;
      color: #f0f0f0;
      padding: 16px 24px;
      font-size: 14px;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    ">
      <span>Deze website gebruikt cookies voor de basiswerking van de site.</span>
      <button id="cookie-accept" style="
        background: #ffffff;
        color: #1a1a1a;
        border: none;
        padding: 8px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
      ">Akkoord</button>
    </div>

    <script>
      (function() {
        var banner = document.getElementById('cookie-banner');
        var btn = document.getElementById('cookie-accept');

        // Toon banner alleen als nog niet geaccepteerd
        if (!localStorage.getItem('cookieAccepted')) {
          banner.style.display = 'flex';
        }

        btn.addEventListener('click', function() {
          localStorage.setItem('cookieAccepted', '1');
          banner.style.display = 'none';
        });
      })();
    </script>

Wat kun je aanpassen?

• Tekst: Wijzig de tekst in de span naar wat past bij jouw website
• Kleuren: Pas de background en color waarden aan naar je huisstijl
• Positie: Verander bottom: 0 naar top: 0 als je de balk bovenaan wilt
• Knoptekst: "Akkoord" kun je vervangen door "Begrepen", "Sluiten" of iets anders

Veelgestelde vragen

De bezoeker heeft op een ander apparaat al akkoord geklikt — waarom ziet hij de melding opnieuw?
Omdat localStorage per browser en per apparaat werkt. Iemand die op zijn telefoon akkoord klikt, ziet de banner op zijn laptop opnieuw.

Bezoekers in incognito/privémodus zien de melding steeds opnieuw — klopt dat?
Ja. In privémodus wordt localStorage gewist bij het sluiten van de browser. De keuze wordt dan niet onthouden.

Is dit voldoende voor de AVG?
Alleen als je géén trackingcookies of analyticstools gebruikt die persoonsgegevens verwerken. Zodra je dat wel doet (zoals Google Analytics), heb je een volledige consent-manager nodig met opt-in per categorie.

Ik heb al andere scripts in de Body-code — conflicteert dat?
Normaal gesproken niet. Plak dit snippet gewoon onder je bestaande code.