⚠️ To implement this functionality, you need to get your hands dirty with code. If JavaScript is not your friend, send this page to your favorite developer!

Unfortunately, some services end up hidden if the visitor does not accept cookies:

your online chat (Zendesk, iAdvize, Gorgias, Crisp...)
videos hosted externally (YouTube, Dailymotion, Vimeo...)
social media posts (X/Twitter, Instagram, TikTok, Facebook...)
interactive maps (Google Maps, OpenStreetMap...)
review widgets (Trustpilot, Verified Reviews/Skeepers...)
contact forms
or even tracking pixels

Fortunately, Axeptio allows you to avoid this thanks to contextual consent. You will be able to present your cookies differently, clearly highlighting the benefit for the user.

✅ This functionality conditions the triggering of an iframe (YouTube, Google Maps...) upon the user's acceptance of cookies.

How it works

As long as the visitor has not accepted the cookies of a service, the corresponding content (iframe, widget...) remains blocked.
Instead, you display a clear message or replacement button allowing them to agree to this specific service.
When they click on this message or button, the Axeptio banner opens automatically, with the service's cookie highlighted so they can accept it directly.
As soon as consent is given, the content loads instantly.

Step 1: Add the script with global logic

We have written a script that behaves as described above: it displays a replacement message or button as long as the visitor has not accepted the service, and automatically loads the content once consent is given.

You can use this script as-is, or customize it according to your needs.

👉 Integrate this script in the <head> of your site or in a tag of your Google Tag Manager container.

In the <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>

Step 2: Adapt the iframe integration code to defer loading until consent

To defer content loading until the moment the user gives their consent, we will slightly modify the standard iframe behavior.

Instead of placing the URL directly in the src attribute (which automatically triggers loading, which is not desirable in our case), we store it in a custom data-src attribute.

We also add a specific data-requires-vendor-consent attribute indicating that this content requires the consent of a given service.

The script from step 1 then monitors the user's consent and, only when they accept, it puts the URL back in the src attribute to trigger the actual loading of the content.

Get the code of your iframe.
Replace the src attribute with data-src.
Get the technical name of your service.
Add the data-requires-vendor-consent attribute with the technical name of your service as its value.

Example for YouTube

Standard YouTube integration code (copied via Share > Embed):

<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>

Modified version for contextual consent:

<iframe 
  width="560" 
  height="315" 
  data-src="https://www.youtube.com/embed/VIDEO_ID" <!-- src replaced by data-src --> 
  data-requires-vendor-consent="youtube" <!-- NEW attribute -->
  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>

Step 3: Add a replacement message or button

If you haven't already, add your service to your cookie banner now.

In order to unblock this iframe, you will need to offer the user an action that allows them to validate the cookie in question, so they can "unlock" the display of our iframe.

Here is a very basic button suggestion:

<!-- Container displayed as long as consent for the service is not given -->
<div data-hide-on-vendor-consent="ServiceName">

  <p>To view this content, you must accept the ServiceName cookie.</p>

  <!-- Customizable button -->
  <button onclick="window.axeptioSDK.requestConsent('ServiceName')">
    I accept the 🍪 ServiceName 
  </button>

</div>

Example for YouTube:

<div data-hide-on-vendor-consent="youtube">
  <p>To view this video, you must accept the YouTube cookie.</p>
  <button onclick="window.axeptioSDK.requestConsent('youtube')">
    I accept the 🍪 YouTube 
  </button>
</div>

What this button does:

Automatically opens the Axeptio banner.
Highlights the service's cookie so the user can accept it directly.
As soon as that's done, the main script loads the iframe and hides this block.

⚠️ Important points for the script from step 1 to work correctly:

The container must have the data-hide-on-vendor-consent attribute with the exact name of the service (same name as in data-requires-vendor-consent on the iframe).
The button (or clickable link) must call window.axeptioSDK.requestConsent('ServiceName') to trigger the Axeptio banner.

💡 You can customize the style, text, and even display a blurred preview of the content to encourage clicking.

Example of contextual consent implementation

Manage services that display content on your site (YouTube, Maps, chat...)