⚠️ Om deze functionaliteit te implementeren, moet u in de code duiken. Als JavaScript niet uw sterke kant is, stuur deze pagina dan naar uw favoriete ontwikkelaar!

Helaas zijn sommige services verborgen als de bezoeker cookies niet accepteert:

uw live chat (Zendesk, iAdvize, Gorgias, Crisp...)
extern gehoste video's (YouTube, Dailymotion, Vimeo...)
berichten van sociale media (X/Twitter, Instagram, TikTok, Facebook...)
interactieve kaarten (Google Maps, OpenStreetMap...)
beoordelingwidgets (Trustpilot, Avis Vérifiés/Skeepers...)
contactformulieren
of zelfs tracking pixels

Gelukkig stelt Axeptio u in staat dit te voorkomen dankzij contextuele toestemming. U kunt uw cookies anders presenteren en het voordeel voor de gebruiker duidelijk benadrukken.

✅ Deze functionaliteit bepaalt het starten van een iframe (YouTube, Google Maps...) wanneer de gebruiker cookies accepteert.

Werkingsprincipe

Zolang de bezoeker de cookies van een service niet heeft geaccepteerd, blijft de overeenkomstige inhoud (iframe, widget...) geblokkeerd.
In plaats daarvan geeft u een duidelijk bericht of vervangende knop weer waarmee u toestemming kunt geven voor deze specifieke service.
Wanneer hij op dit bericht of deze knop klikt, opent de Axeptio-banner automatisch met de cookie van de betreffende service gemarkeerd, zodat hij deze direct kan accepteren.
Zodra toestemming wordt gegeven, wordt de inhoud onmiddellijk geladen.

Stap 1: Het script toevoegen met de globale logica

We hebben een script geschreven dat zich gedraagt zoals hierboven beschreven: het geeft een vervangende bericht of knop weer zolang de bezoeker de service niet heeft geaccepteerd, en laadt de inhoud automatisch wanneer toestemming wordt gegeven.

U kunt dit script ongewijzigd gebruiken of het aanpassen aan uw behoeften.

👉 Integreer dit script in de <head> van uw website of in een tag van uw Google Tag Manager container.

In de <head>

// On enregistre une fonction à exécuter une fois que le SDK Axeptio est prêt
(_axcb = window._axcb || []).push(function(sdk) {

  // Quand l'utilisateur a terminé de faire ses choix de cookies
  sdk.on('cookies:complete', function(choices){
  
  // 1. Masquer les messages/boutons si le service a été accepté
  document
    .querySelectorAll('[data-hide-on-vendor-consent]')
    .forEach(el => {
      const vendor = el.getAttribute('data-hide-on-vendor-consent');
      el.style.display = choices[vendor] ? 'none' : 'inherit';
    });

  // 2. Charger les contenus (iframes) seulement si le service est accepté
  document
    .querySelectorAll('[data-requires-vendor-consent]')
    .forEach(el => {
      const vendor = el.getAttribute('data-requires-vendor-consent');
      if (choices[vendor]) {
        // On remplace data-src par src pour déclencher le chargement
        el.setAttribute('src', el.getAttribute('data-src'));
      }
    });
  });
});

In GTM

<script>
"use strict";

// On enregistre une fonction à exécuter une fois que le SDK Axeptio est prêt
(_axcb = window._axcb || []).push(function (sdk) {
  // Quand l'utilisateur a terminé de faire ses choix de cookies  
  sdk.on('cookies:complete', function (choices) {
    // 1. Masquer les messages/boutons si le service a été accepté  
    document.querySelectorAll('[data-hide-on-vendor-consent]').forEach(function (el) {
      var vendor = el.getAttribute('data-hide-on-vendor-consent');
      el.style.display = choices[vendor] ? 'none' : 'inherit';
    });
    // 2. Charger les contenus (iframes) seulement si le service est accepté  
    document.querySelectorAll('[data-requires-vendor-consent]').forEach(function (el) {
      var vendor = el.getAttribute('data-requires-vendor-consent');
      if (choices[vendor]) {
        // On remplace data-src par src pour déclencher le chargement       
        el.setAttribute('src', el.getAttribute('data-src'));
      }
    });
  });
});
</script>

Stap 2: De iframe-integratiecode aanpassen om het laden uit te stellen tot toestemming

Om het laden van inhoud uit te stellen tot het moment waarop de gebruiker toestemming geeft, wijzigen we het standaardgedrag van de iframe enigszins.

In plaats van de URL rechtstreeks in het kenmerk src te plaatsen (wat automatisch laden activeert, wat in ons geval niet wenselijk is), slaan we het op in een aangepast kenmerk data-src.

We voegen ook een specifiek kenmerk data-requires-vendor-consent toe dat aangeeft dat deze inhoud toestemming van een bepaalde service vereist.

Het script uit stap 1 controleert vervolgens de toestemming van de gebruiker en plaatst de URL alleen in het kenmerk src wanneer deze de inhoud daadwerkelijk wordt geladen.

Haal de code van uw iframe op.
Vervang het kenmerk src door data-src.
Haal de technische naam van uw service op.
Voeg het kenmerk data-requires-vendor-consent toe met als waarde de technische naam van uw service.

Voorbeeld voor YouTube

Standaard YouTube-integratiecode (gekopieerd via Delen > Insluiten):

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen>
</iframe>

Gewijzigde versie voor contextuele toestemming:

<iframe 
  width="560" 
  height="315" 
  data-src="https://www.youtube.com/embed/VIDEO_ID" <!-- src remplacé par data-src --> 
  data-requires-vendor-consent="youtube" <!-- NOUVEL attribut -->
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen>
</iframe>

Stap 3: Een vervangende bericht of knop toevoegen

Als u dit nog niet hebt gedaan, voeg nu uw service toe aan uw cookie-banner.

Om deze iframe te ontgrendelen, moet u de gebruiker een actie aanbieden waarmee hij de betreffende cookie kan valideren om zo onze iframe weer te geven.

Hier is een voorstel voor een zeer eenvoudige knop:

<!-- Container affiché tant que le consentement pour le service n'est pas donné -->
<div data-hide-on-vendor-consent="NomDuService">

  <p>Pour visionner ce contenu, vous devez accepter le cookie NomDuService.</p>

  <!-- Bouton personnalisable -->
  <button onclick="window.axeptioSDK.requestConsent('NomDuService')">
    J'accepte le 🍪 NomDuService 
  </button>

</div>

Voorbeeld voor YouTube:

<div data-hide-on-vendor-consent="youtube">
  <p>Pour visionner cette vidéo, vous devez accepter le cookie YouTube.</p>
  <button onclick="window.axeptioSDK.requestConsent('youtube')">
    J'accepte le 🍪 YouTube 
  </button>
</div>

Wat deze knop doet:

Opent automatisch de Axeptio-banner.
Markeert de cookie van de betreffende service zodat de gebruiker deze direct kan accepteren.
Zodra dat gebeurt, laadt het hoofdscript de iframe en verbergt dit blok.

⚠️ Belangrijke punten opdat het script van stap 1 correct werkt:

De container moet het kenmerk data-hide-on-vendor-consent hebben met de exacte servicenaam (dezelfde naam als in data-requires-vendor-consent op de iframe).
De knop (of klikbare link) moet window.axeptioSDK.requestConsent('NomDuService') aanroepen om de Axeptio-banner te activeren.

💡 U kunt de stijl, tekst aanpassen en zelfs een wazig voorbeeld van de inhoud weergeven om te stimuleren om te klikken.

Voorbeeld van contextuele toestemmingsimplementatie

Beheer de services die inhoud op uw website weergeven (YouTube, Maps, chat...)