Integrate Your Banner, Tools, and More

This page explains how to integrate the Consenter Cookie Banner into your website and ensure that third-party tools only process personal data after valid consent has been obtained.

Before your Consenter Banner can appear on your website, you need to add a small script to your site. This script loads the banner.

Attention: Do you want to integrate a consent banner or contextual consent?

For some purposes, it is better to ask your end users for their consent via contextual consent rather than a consent banner. This applies in particular to additional website features, such as maps, videos or social media feeds, which you want to integrate into your website and which process your end users' data. See contextual consent guide →

Step 1: Get your embed code

Once your banner version is "active", the "Embed Code" button becomes available.

Click Embed Code → Embed Consenter Banner to find your embed code snippet.

It will look similar to this:

index.html

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

Replace the placeholder with your own value:

YOUR_DOMAIN_ID → your Consenter domain ID (from Sites → Your Site in Consenter Manager)

Step 2: Add the script to your website

Copy the embed code snippet and paste it into the <head> section of your website.

Make sure it is placed before any third-party script that requires user consent.

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

Next step: Set up your TPP integrations

The embed script does not automatically block or enable third-party tools. For each TPP you use, you must add the TPP integration snippet (including the contextual consent snippet when needed) so it checks the banner's consent state before running. See TPP integration guide →

Block third party tools

You must ensure that no personal data is transmitted to service providers and no cookies are set before website visitors have given consent. Since most third-party tools collect personal data by default, this requires blocking their scripts from running until visitors have provided consent via the cookie banner.

To integrate these tools in a compliant way, please follow the integration guides below. For some services, we offer specific guides to simplify implementation and pre-consent blocking. For all other tools, a general integration guide is provided.

Integration guides

For the following services, we provide step-by-step integration guides:

Matomo

Google Analytics 4

eTracker

Optimizely

Criteo

Custom integration

If your service is not listed above, you can integrate it manually using the Consenter API.

How it works

Once the Consenter script is loaded, you can use window.consenter.subscribe() to listen for consent changes for any service.

The Consenter API may not be available immediately when your script runs. Always listen for the consenter:ready event on the document to know when window.consenter is ready. If the API is already loaded, you can call it directly. The code examples below show the recommended pattern.

index.html

function subscribeToConsenter() {
  window.consenter.subscribe(
    function (hasConsent) {
      if (hasConsent) {
        // Enable the service
      } else {
        // Disable the service
      }
    },
    "SERVICE_ID", // The service ID
    "PURPOSE_ID", // The purpose ID
  );
}

if (window.consenter) {
  subscribeToConsenter();
} else {
  document.addEventListener("consenter:ready", subscribeToConsenter);
}

Parameters:

Callback function: Receives true when user grants consent, false when consent is withdrawn
Service ID: The unique identifier for the third-party service
Purpose ID: The purpose identifier

Finding your service and purpose IDs

To find the correct IDs for your integration:

Go to Consenter Manager
Select your website
Click on your active banner version in the table
You'll see the Technologies Configuration page with all your configured purposes, services, and data categories
To find the Purpose ID: Hover over the purpose label (e.g., "Improve the website") and click the copy button in the tooltip
To find the Service ID: Hover over the service label (e.g., "Google Analytics") and click the copy button in the tooltip
Use both IDs in your integration code

Example

Here's a complete example showing how to integrate any service:

index.html

<script>
  var serviceApiKey = "YOUR_API_KEY"; 
  var serviceId = "YOUR_SERVICE_ID"; 
  var purposeId = "YOUR_PURPOSE_ID"; 

  // Initialize your service with consent requirement
  // (Each service has its own initialization method)
  initializeService({
    apiKey: serviceApiKey,
    requireConsent: true, // Prevent loading without consent
  });

  // Subscribe to consent changes
  function subscribeToConsenter() {
    window.consenter.subscribe(
      function (hasConsent) {
        if (hasConsent) {
          // User granted consent - enable the service
          enableService();
        } else {
          // User rejected or withdrew consent - disable the service
          disableService();
          removeServiceData();
        }
      },
      serviceId,
      purposeId,
    );
  }

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

Consult your service's documentation for the specific methods to enable and disable tracking or functionality.

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 of the <iframe> where you want to enable contextual consent. Put the URL that should load after consent into data-consenter-content-url, then replace the placeholders with your own values:

For type 1 (simple unblock)

iframe

<!-- Enable Consenter contextual consent for a service -->
<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"
>
  ...
</iframe>

For type 2 (additional purposes)

Add the required purpose flags:

When using contextual consent, you can choose from the following additional purposes:

Improve the service

Support marketing analytics

Customise online ads

Find out which purposes to select for your TPP in our TPP configuration guides or the privacy policy and documentation of the respective TPP.

iframe with additional purposes

<!-- Enable Consenter contextual consent for a service -->
<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-tpp-purpose-improve-the-service="true"
  data-consenter-tpp-purpose-marketing-analytics="true"
  data-consenter-tpp-purpose-customise-ads="true"
>
  ...
</iframe>

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-tpp-purpose-improve-the-service`	Declares that the service uses data for Improve the service.	Required only if the TPP needs this purpose legally. Set to `true`.
`data-consenter-tpp-purpose-marketing-analytics`	Declares that the service uses data for Support marketing analytics.	Required only if the TPP needs this purpose legally. Set to `true`.
`data-consenter-tpp-purpose-customise-ads`	Declares that the service uses data for Customised online ads.	Required only if the TPP needs this purpose legally. Set to `true`.

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.

Update privacy policy

Text snippet for your privacy policy

When using our consent banner, you must inform your website visitors about how their consent decisions are being processed. We therefore advise you to include the following textblock into your privacy policy:

Consenter Cookie Banner by Law & Innovation Technology GmbH

To collect and process your data protection consents, we use the Consenter Cookie Banner service provided by Law & Innovation Technology GmbH (L&I). Your consents are stored:

1. in your browser as a cookie to check whether you have already given us your consent, so that we no longer need to display the cookie banner to you, and
2. in our consent store provided by L&I, in order to prove the lawfulness of processing your personal data.

1. Collected Data

Your consent record contains:

- The build version of the consent banner at the time of consent.
- The domain you have consented to "example.com" along with a randomly generated domain ID.
- Date and time of consent.
- A randomly generated consent record ID (no user ID!) and, if consents change, the prior record ID. This way we make sure that no processing is based on your "expired" consent, for example if you have withdrawn prior consent.
- The purposes and respective third party services for which consent has been given or withdrawn.
- "Trigger" in order to monitor whether risks have increased or decreased when you revisit the website compared to the time you originally gave consent. This ensures that your consent is invalidated if the website begins to use more privacy-intrusive technologies.

2. Processing & Storage

Consent records are stored as encrypted, origin-bound cookies (SameSite=Strict) in your browser, accessible only by this website via JavaScript. No third-party access. L&I also stores consent records centrally on AWS (sub-processor) solely for proof of lawful processing. No user IDs or refusals are retained, preventing user profiling. Data is secured against unauthorised access.

3. Retention

Cookies expire after 400 days or upon browser cache clearance.

4. Identifiability

The data is weakly identifying across visits, as Consent IDs and timestamps could in theory allow a user to be recognised across multiple visits to one single website (never across multiple websites). The link is provided here for the benefit of the user, as we, as the website provider, must recognise that your previous consent records are obsolete and no longer valid. The consent records themselves provide only minimal insight into your private life (visiting a single website at a single point in time), as they are not tied to a user ID. They are never used for anything beyond managing your consent.

Update imprint and further transparency information

Please ensure that all processing of personal data is also described in your privacy policy. The privacy policy must be clearly visible and easily accessible to users on every page and subpage of your website (no more than two clicks).

Make sure to include your address and contact details in the privacy policy or your imprint, so that users can identify you as the data controller and contact you regarding data protection matters.

Matomo

Google Analytics 4

eTracker

Optimizely

Criteo

Scenario 1: No-consent required

Scenario 2: Contextual consent with simple unblock button (type 1)

Scenario 3: Contextual consent for additional purposes (type 2)

On this page