⚠️ To implement this feature, you'll need to get your hands in the code. If JavaScript is not your friend, share this page with your favorite developer!
At Axeptio, we believe that you shouldn't hide your services, but show them off! Because it's super important that Thomas can read your tutorial on "How to forge a mushroom knife?" and Leah can ask you which hypoallergenic food her cat needs?
Unfortunately, some services are currently hidden if the user has not accepted the cookies:
- Your online chat
- Your externally hosted videos
- Your contact forms
- Even your tracking pixels
Fortunately, Axeptio now lets you avoid this, thanks to contextual consent. You'll be able to present your cookies differently, while clearly highlighting the benefit to the user.
And there are plenty of opportunities for this:
- A new product launch
- A presentation video
- Chat...!
The cookie is the limit!
✅ This feature conditions the triggering of an iframe (YouTube, Google Maps, etc.) when the user accepts cookies.
Code integration
You can include this code snippet in your site's <head> or implement it directly through Google Tag Manager.
(_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'));
}
});
});
});
Modifying the iframe
An iframe is usually loaded when the src attribute is populated with a URL.
Here, we'll block this URL from displaying simply by replacing the src attribute with data-src.
We'll also need to add the data-requiresivendors-consent attribute, which is for the name of the cookie for which we're seeking consent. In the example below, the cookie is a YouTube cookie.
⚠️ It is important to keep the cookie's name unchanged. You can find the exact name in the Axeptio back office, in the Site Integration section.
Here is an example:
- axeptio_activate_google_analytics
- axeptio_activate_Zendesk
- axeptio_activate_youtube
<iframe
width=""
height=""
data-requires-vendor-consent="youtube"
data-src="https://www.youtube.com">
</iframe>
To unblock the iframe, we'll need to allow the user to carry out an action to validate the cookie in question in order to "unblock" our iframe from displaying.
Here, we've simply added a button, with the following code:
<div data-hide-on-vendor-consent="youtube">
<button onclick="window.axeptioSDK.requestConsent('youtube')">
Accept the YouTube 🍪
</button>
</div>
In practice
 |
✅ The iframe loads successfully!