⚠️ To implement this feature, you will need to work with code. If JavaScript is not your friend, share this page with your favorite developer!

Some services may unfortunately be hidden if the visitor does not accept cookies:

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

Fortunately, Axeptio allows you to avoid this with contextual consent. You can present your cookies differently, clearly highlighting the benefit for the user.

✅ This feature controls the loading of an iframe (YouTube, Google Maps, etc.) only after the user accepts the cookies.

How it works

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

Step 1: Add the script with the main logic

We’ve written a script that behaves as described above: it displays a message or replacement button until the visitor accepts the service, and automatically loads the content once consent is given.

You can use it as-is or customize it to your needs.

👉 Insert this script in your site’s <head> or in a tag within your Google Tag Manager container.

// Register a function to run 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'));
        }
      });
  });
});

Step 2: Adapt the iframe embed code to delay loading until consent

To delay loading until the user gives consent, we slightly modify the standard iframe behavior.

Instead of placing the URL directly in the src attribute (which would trigger automatic loading), store it in a custom data-src attribute.

Also add the attribute data-requires-vendor-consent to indicate that this content requires a specific service’s consent.

The script from Step 1 will then monitor user consent and, only when accepted, move the URL back to the src attribute to start loading the content.

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

Exemple pour YouTube

Standard YouTube embed code:

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

To unlock this iframe, you need to give the user a way to validate the cookie so the iframe can be displayed.

Example of a very basic button:

<!-- Container shown until consent for the service is 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 watch 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 widget.
Highlights the relevant service cookie so the user can accept it directly.
Once accepted, the main script loads the iframe and hides this block.

⚠️ Important for the Step 1 script to work properly:

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

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

Example of contextual consent implementation