In this scenario, you have a YouType-style iframe on your site and need the user's consent before launching it.

The goal here is to make triggering the iframe conditional on the user's acceptance.

Follow the steps below:

1. Include a specific piece of code in your site's header
2. Change the call for the iframe
3. Test that the iframe call works correctly

1. Include a specific piece of code in your site's header

Here is the code to include:

(_axcb = window._axcb || []).push(function(sdk) {
  sdk.on('cookies:complete', function(choices){
    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';
        });
      document
        .querySelectorAll('[data-requires-vendor-consent]')
        .forEach(el => {
          const vendor = el.getAttribute('data-requires-vendor-consent');
          if (choices[vendor]) {
            el.setAttribute('src', el.getAttribute('data-src'));
          }
        });
    });
  })

2. Change the call for the iframe

An iframe is usually loaded by the src attribute in its calling tag, which contains the URL for retrieving the target content to be displayed (here, a YouTube video).

Our goal here is to block the call to this target content so that we can ask the user for their consent.

So, let's rename the src as data-src, which causes the contents of the iframe to not load and to show a blank box in its place:

<iframe
  width=""
  height=""
  data-requires-vendor-consent="Youtube"
  data-src="https://www.youtube.com/watch?v=70Xg0cclf5Q">
</iframe>

✅  The data-requires-vendor-consent attribute returns the name of the cookie that must be accepted in order to trigger the iframe to display.

Now, all we have left to do is to implement a call to action in the box on your site to allow the user to give their consent.

In this call to action, we are calling a function included in the Axeptio SDK:

<div data-hide-on-vendor-consent="Youtube">
  <button onclick="window.axeptioSDK.requestConsent('Youtube')">
   Accept Youtube cookie
  </button>
</div>

3. Test that the iframe call works correctly

The Axeptio screen will then open the appropriate cookie category for the cookie so that the user can accept the cookie that conditions the video's launch.

The widget will open to the right location, and the required cookie will be highlighted.

The user must simply accept to see the video run.

✅  The cookies:complete event is then sent. The code included in the site's header will look and detect the attribute and change the data-src to src automatically.

✅  To take it a step further, see the article entitled Improve your consent statistics.