Contextual Consent

If you embed third-party content—such as maps, videos, or social media features—on your website, you must ensure that these providers do not collect personal data from visitors before consent has been obtained. To achieve this, you should implement our contextual consent solution when integrating such content.

Our contextual consent mechanism:

1. Blocks third-party content until the user has given consent.
2. Allows users to provide consent directly within the embedded content, thereby unblocking it.
3. Automatically unblocks content for users who have already consented to the purpose “Unlock additional website features.”

To implement contextual consent for any third-party provider (TPP), follow the steps below.

Select the correct contextual consent type
Copy-paste the respective code snippet
Replace TPP-specific placeholders

Some third-party integrations process personal data solely to provide their service, while others also use data for their own additional purposes (e.g. advertising). This means you’ll need to collect different consents depending on the specific third-party provider you want to embed on your website.

Shown below are the three scenarios for embedding third party content and guidance on which type of contextual consent to implement (type 1 and type 2).

Technical integration

Contextual consent only works if your Consenter Banner is configured correctly in the Consenter Manager. Make sure the

purposes used by the third-party provider match the purposes enabled in your banner

. If the purposes do not match, contextual consent cannot be applied.

Add the contextual consent scripts Place the contextual consent script at the top of the <head> section:

index.html

<!-- Integrate Consenter contextual consent -->
<!-- Paste the contextual consent script inside the <head> section -->
<script src="https://banner.consenter.eu/contextual-consent.js"></script>
<script
  src="https://banner.consenter.eu/YOUR_DOMAIN_ID/cb.js"
  async
></script>

Add Consenter attributes to your embed Remove the original src attribute, and add Consenter data attributes inside the <iframe> where you want to enable contextual consent. Put the URL that should load after consent into data-consenter-content-url, and in data-consenter-purpose-ids list the purpose IDs this service needs consent for — the same purposes you configured for it when you set up the banner. Replace the placeholders with your own values:
iframe
```

<iframe
  width="560"
  height="315"
  data-consenter-language="DE"
  data-consenter-tpp-id="YOUR_SERVICE_ID"
  data-consenter-tpp-label="YOUR-SERVICE-NAME"
  data-consenter-content-label="YOUR-CONTENT-DESCRIPTION"
  data-consenter-content-url="YOUR_SERVICE_URL"
  data-consenter-purpose-ids="additional-features,service-improvement,customise-ads"
>
  ...
</iframe>
```
The older per-purpose attributes (data-consenter-tpp-purpose-improve-the-service, data-consenter-tpp-purpose-marketing-analytics, data-consenter-tpp-purpose-customise-ads) still work but are deprecated and log a console warning. Migrate to a single data-consenter-purpose-ids attribute.

What each attribute does (quick reference)?

Attribute	What it does	Where to find it?
`data-consenter-tpp-id`	Tells Consenter which TPP this embed belongs to.	Always required. Find the TPP/service ID in Consenter Manager → Your Site → Active Banner → Hover over the service and click the copy button in the tooltip.
`data-consenter-tpp-label`	Display name shown to the user (e.g., “YouTube video”).	Required. Use something users immediately understand.
`data-consenter-content-url`	The URL that loads after the user unblocks / consents.	Required. Usually the original iframe/embed `src`. Remove the original `src` attribute so the content is blocked before consent.
`data-consenter-content-label`	Short description of the specific content (e.g., “Product Demo”).	Required. Helps users understand what they are enabling.
`data-consenter-language`	Sets the language of the contextual consent UI.	Optional. Supports `EN` and `DE`. If missing, the browser language is used when it is English; otherwise German is used.
`data-consenter-purpose-ids`	Comma-separated list of the purpose IDs this flow needs consent for.	Required. Declare exactly the purpose(s) your case needs — one or several. See the purpose-ID reference below.

Purpose IDs

Use the purpose IDs you configured for the service in the banner. The standard purpose IDs are:

Purpose	Purpose ID
Unlock additional website features	`additional-features`
Improve the service	`service-improvement`
Support marketing analytics	`marketing-analytics`
Customise online ads	`customise-ads`

You can copy any purpose’s ID from the Consenter Manager.

If unsure whether your TPP requires contextual consent of type 1 or type 2, check out our TPP configuration guides or refer to the privacy policy or documentation of the TPP.

Custom Integration

The ready-made contextual consent script renders our own gate over blocked content. If you want full control over the look and feel — your own “show the content” button, styling, and layout — you can build the gate yourself and drive consent through the Consenter API instead.

In this mode you load only the banner script (not contextual-consent.js), block the third-party content yourself, then:

call grantContextualConsent(tppId, purposeIds) when the user opts in, and
subscribe (or has) to reveal the content once it is consented.

See the JavaScript API for the full method reference.

index.html

<script src="https://banner.consenter.eu/YOUR_DOMAIN_ID/cb.js" async></script>

Example

This example keeps a video blocked behind a custom button, grants consent on click, and reveals the content once consent is saved. The same subscribe callback also reveals the content immediately for visitors who have already consented.

index.html

<div id="video-gate">
  <p>This video is provided by Vimeo and may process your data.</p>
  <button id="enable-video">Show the video</button>
</div>

<script>
  // Vimeo uses data for its own purposes, so it needs all three.
  var tppId = "YOUR_SERVICE_ID"; 
  var purposeIds = [
    "additional-features",
    "service-improvement",
    "customise-ads",
  ]; 

  function revealVideo() {
    document.getElementById("video-gate").innerHTML =
      '<iframe src="https://player.vimeo.com/video/VIDEO_ID" allow="autoplay"></iframe>';
  }

  function wireUp() {
    // state is an object keyed by purpose ID; fires now and on every change.
    window.consenter.subscribe(
      function (state) {
        var granted = Object.keys(state).every(function (id) {
          return state[id];
        });
        if (granted) revealVideo();
      },
      { serviceId: tppId, purposeIds: purposeIds },
    );

    document
      .getElementById("enable-video")
      .addEventListener("click", function () {
        var result = window.consenter.grantContextualConsent(tppId, purposeIds);
        if (result !== "success") console.error("Consenter:", result);
      });
  }

  if (window.consenter) {
    wireUp();
  } else {
    document.addEventListener("consenter:ready", wireUp);
  }
</script>

Use the same Service ID and Purpose IDs you would use for the attribute-based integration above. See Finding Your Service and Purpose IDs for where to copy them in the Consenter Manager.