Contextual Consent

This tutorial explains how to use Klaro's "contextual consent" feature, which enables you to ask for the users' consent before showing e.g. embedded Youtube videos or other content. The consent notice you see on this page demonstrates how this mechanism works. You can test the consent mechanism and simply reload the page to reset the state of the consent manager. Here's the consent manager (make sure to check out the examples below before before interacting with it):

Example: Let's Rick Roll!

Let's assume we want to embed a Youtube video in our website. We can do this by embedding the iframe code shown below / on the right. To enable the contextual consent, we simply replace the src attribute with data-src and add a data-name attribute. In addition, we also create a service with the same name in our config file (see config below), and Klaro will do the rest. Let's roll!

Example: Let's tweet!

The same technique works with other HTML elements like divs: Simply add a data-name entry to the element, add a corresponding service with the same name to your config, and let Klaro add a placeholder.

Example Config

Here's the corresponding example Klaro config. We used the "Accept All" flow but exempted the embedded Youtube content from it by setting contextualConsentOnly to true. Contrary to that, Twitter links will be automatically enabled when the user grants consent via the consent notice.

var klarConfig = {
    acceptAll: true,
    services: [
        {
            purposes: ['marketing'],
            name: "demo-youtube",
            contextualConsentOnly: true,
        },
        {
            purposes: ['marketing'],
            name: "demo-twitter",
        }
    ]
}