⚠️ To implement this feature, you will need to get your hands in the 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 to the user.

✅ This feature conditions the triggering of an iframe (YouTube, Google Maps...) when the user accepts cookies.

How it works

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

Step 1: Add the script with the global logic

We have written a script that behaves as described above: it displays a message or replacement 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>

// We register a function to execute once the Axeptio SDK is ready
(_axcb = window._axcb || []).push(function(sdk) {

  // When the user has finished making their cookie choices
  sdk.on('cookies:complete', function(choices){
  
  // 1. Hide messages/buttons if the service has been accepted
  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. Load content (iframes) only if the service is accepted
  document
    .querySelectorAll('[data-requires-vendor-consent]')
    .forEach(el => {
      const vendor = el.getAttribute('data-requires-vendor-consent');
      if (choices[vendor]) {
        // Replace data-src with src to trigger loading
        el.setAttribute('src', el.getAttribute('data-src'));
      }
    });
  });
});

In GTM

<script>
"use strict";

// We register a function to execute once the Axeptio SDK is ready
(_axcb = window._axcb || []).push(function (sdk) {
  // When the user has finished making their cookie choices  
  sdk.on('cookies:complete', function (choices) {
    // 1. Hide messages/buttons if the service has been accepted  
    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. Load content (iframes) only if the service is accepted  
    document.querySelectorAll('[data-requires-vendor-consent]').forEach(function (el) {
      var vendor = el.getAttribute('data-requires-vendor-consent');
      if (choices[vendor]) {
        // Replace data-src with src to trigger loading       
        el.setAttribute('src', el.getAttribute('data-src'));
      }
    });
  });
});
</script>

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

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

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 attribute data-src.

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

The script from step 1 then takes care of monitoring 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 for 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 the 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" 
  data-requires-vendor-consent="youtube" 
  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 unlock this iframe, you will need to offer the user an action that allows them to validate the cookie in question, in order to be able to "unlock" the display of our iframe.

Here is a proposal for a very basic button:

<!-- Container displayed as long as consent for the service has not been 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 cookie of the service in question 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 clicks.

Example of contextual consent implementation

About Axeptio's Javascript SDK

Choose your headband type

Organize your banner content

Manage consent conditioning logic

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