Technical Integration

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.

Matomo

Google Analytics 4

eTracker

Optimizely

Criteo

On this page