### Complete Service Integration Example

Source: https://documentation.consenter.eu/llms-full.txt

A full example demonstrating how to initialize a service, subscribe to Consenter API consent changes, and enable/disable the service based on user consent.

```html
<script>
  var serviceApiKey = "YOUR_API_KEY"; // [!code highlight]
  var serviceId = "YOUR_SERVICE_ID"; // [!code highlight]
  var purposeId = "YOUR_PURPOSE_ID"; // [!code highlight]

  // 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>
```

--------------------------------

### Complete Custom Service Integration Example

Source: https://documentation.consenter.eu/technical-integration

A full example demonstrating how to initialize a service, subscribe to consent changes, and enable/disable the service based on user consent. Requires defining `initializeService`, `enableService`, `disableService`, and `removeServiceData` functions specific to your service.

```javascript
<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>
```

--------------------------------

### Basic Embed Configuration

Source: https://documentation.consenter.eu/configuration/contextual-consent

Example of embedding content that requires consent. Use data-consenter-tpp-id and data-consenter-tpp-label to identify the Third-Party Provider and its display name.

```html
<div data-consenter-tpp-id="YOUR_TPP_ID" data-consenter-tpp-label="YouTube video" data-consenter-content-url="https://www.youtube.com/embed/VIDEO_ID"></div>
```

--------------------------------

### Iframe for Contextual Consent

Source: https://documentation.consenter.eu/configuration/contextual-consent

This example demonstrates how to embed contextual consent using an iframe. It includes a placeholder for your content description and service URL.

```html
<iframe src="YOUR-SERVICE-URL" data-consenter-content-url="YOUR-CONTENT-DESCRIPTION"></iframe>
```

--------------------------------

### Embed with Custom Content URL

Source: https://documentation.consenter.eu/configuration/contextual-consent

This example shows how to specify a custom content URL that loads after user consent. The original src attribute is removed.

```html
<div data-consenter-tpp-id="YOUR_TPP_ID" data-consenter-tpp-label="Example Content" data-consenter-content-url="/path/to/your/content"></div>
```

--------------------------------

### Add Script to Website Head

Source: https://documentation.consenter.eu/technical-integration

Example of placing the Consenter embed script within the <head> section of an HTML document.

```html
<!-- 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>
```

--------------------------------

### Enable Consenter Contextual Consent (Additional Purposes)

Source: https://documentation.consenter.eu/configuration/contextual-consent

Configure contextual consent with additional purpose flags for services requiring more specific consent. Refer to TPP configuration guides for appropriate purpose selection.

```html
<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>
```

--------------------------------

### Initialize Service with Consent Requirement

Source: https://documentation.consenter.eu/technical-integration

Initialize a service with an API key and set the consent requirement to true. This prevents loading functionality without explicit user consent.

```javascript
initializeService({
  apiKey: serviceApiKey,
  requireConsent: true, // Prevent loading without consent
 });
```

--------------------------------

### Integrate Optimizely with Consenter JavaScript

Source: https://documentation.consenter.eu/llms-full.txt

Embed this script in your website's `<head>` to connect Optimizely with Consenter. Replace placeholders with your actual service, purpose, and project IDs. The script subscribes to Consenter events to manage Optimizely's loading based on user consent.

```html
<script>
  var serviceId = "YOUR_SERVICE_ID"; // Replace with your service ID from Consenter Manager [!code highlight]
  var purposeId = "YOUR_PURPOSE_ID"; // Replace with your purpose ID from Consenter Manager [!code highlight]
  var projectId = "YOUR_PROJECT_ID"; // [!code highlight]

  function loadOptimizely() {
    var existingScript = document.querySelector(
      'script[src*="cdn.optimizely.com"]',
    );
    if (existingScript) return;

    var script = document.createElement("script");
    script.src = "https://cdn.optimizely.com/js/" + projectId + ".js";
    document.head.appendChild(script);
  }

  function removeOptimizely() {
    window.optimizely = window.optimizely || [];
    window.optimizely.push({ type: "disable" });
    var scripts = document.querySelectorAll(
      'script[src*="cdn.optimizely.com"]',
    );
    scripts.forEach(function (script) {
      script.remove();
    });
    window.optimizely = [];
  }

  function subscribeToConsenter() {
    window.consenter.subscribe(
      function (hasConsent) {
        if (hasConsent) {
          loadOptimizely();
        } else {
          removeOptimizely();
        }
      },
      serviceId, // [!code highlight]
      purposeId, // [!code highlight]
    );
  }

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

--------------------------------

### HTML Structure for Service Integration

Source: https://documentation.consenter.eu/technical-integration

This HTML snippet demonstrates the basic structure for integrating a service, including script tags for API keys, service IDs, and purpose IDs.

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

--------------------------------

### Basic Contextual Consent Configuration

Source: https://documentation.consenter.eu/configuration/contextual-consent

This snippet shows the basic structure for configuring contextual consent, including the content URL. Ensure the URL points to your consent content.

```javascript
self.__next_f.push([
  1,
  "31:[\"$\",\"$L38\",null,{\"href\":\"https://manager.consenter.eu/\",\"children\":[\"$\",\"strong\",null,{\"children\":\"Consenter Manager\"}]}]\n"
])
```

--------------------------------

### Understanding YOUR_DOMAIN_ID Placeholder

Source: https://documentation.consenter.eu/technical-integration

The `YOUR_DOMAIN_ID` in the script URL must be replaced with your specific Consenter domain ID. This ID can be found in the Consenter Manager under 'Sites' -> 'Your Site'.

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

--------------------------------

### Initialize Consenter and Matomo Analytics

Source: https://www.consenter.eu/pricing

Initializes Consenter and Matomo analytics. This script sets up tracking, consent management, and user interaction tracking. It requires specific IDs and URLs for Matomo.

```javascript
!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document); var serviceId = "i93ozy1n7tymlkej9vzkljqn"; var purposeId = "service-improvement"; var matomoUrl = "https://einwilligungsagent.matomo.cloud/"; var matomoSiteId = "2"; var _paq = (window._paq = window._paq || []); _paq.push(["requireCookieConsent"]); _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); _paq.push(["setTrackerUrl", matomoUrl + "/matomo.php"]); _paq.push(["setSiteId", matomoSiteId]); (function() { var d = document, g = d.createElement("script"), s = d.getElementsByTagName("script")[0]; g.async = true; g.src = matomoUrl + "/matomo.js"; s.parentNode.insertBefore(g, s); })(); function subscribeToConsenter() { window.consenter.subscribe(function(hasConsent) { var _paq = window._paq || []; if (hasConsent === true) { _paq.push(["setCookieConsentGiven"]); } else if (hasConsent === false) { _paq.push(["forgetCookieConsentGiven"]); } }, serviceId, purposeId); } if (window.consenter) { subscribeToConsenter(); } else { document.addEventListener("consenter:ready", subscribeToConsenter); }
```

--------------------------------

### Enable Contextual Consent for a Service (Type 1)

Source: https://documentation.consenter.eu/configuration/contextual-consent

Configure an iframe to enable simple unblocking (Type 1) for a service. Remove the original `src` attribute and add Consenter data attributes.

```html
<!-- 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>
```

--------------------------------

### Subscribe to Consenter Ready Event

Source: https://documentation.consenter.eu/technical-integration

Listen for the 'consenter:ready' event to ensure the Consenter API is available before interacting with it. This is crucial for any subsequent operations.

```javascript
document.addEventListener("consenter:ready", subscribeToConsenter);
```

--------------------------------

### Handle Consenter API Availability

Source: https://documentation.consenter.eu/technical-integration

Always listen for the `consenter:ready` event on the `document` to ensure `window.consenter` is available. This pattern is recommended for reliable API access.

```javascript
document.addEventListener("consenter:ready", () => {
  // API is ready, you can now use window.consenter
});
```

--------------------------------

### Integrate Matomo with Consenter

Source: https://documentation.consenter.eu/llms-full.txt

This script initializes Matomo tracking and integrates it with Consenter for consent management. Replace placeholders with your specific IDs and URLs. It ensures Matomo tracking is enabled only after user consent is granted.

```html
<script>
  var serviceId = "YOUR_SERVICE_ID"; // Replace with your service ID from Consenter Manager [!code highlight]
  var purposeId = "YOUR_PURPOSE_ID"; // Replace with your purpose ID from Consenter Manager [!code highlight]
  var matomoUrl = "YOUR_MATOMO_URL"; // [!code highlight]
  var matomoSiteId = "YOUR_SITE_ID"; // [!code highlight]

  // Initialize the Matomo tracking queue
  var _paq = (window._paq = window._paq || []);

  // IMPORTANT: Tell Matomo to wait for cookie consent
  _paq.push(["requireCookieConsent"]);

  // Queue the page view tracking (won't execute until consent is given)
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);

  // Configure the tracker
  _paq.push(["setTrackerUrl", matomoUrl + "/matomo.php"]);
  _paq.push(["setSiteId", matomoSiteId]);

  // Load the Matomo script
  (function () {
    var d = document,
      g = d.createElement("script"),
      s = d.getElementsByTagName("script")[0];
    g.async = true;
    g.src = matomoUrl + "/matomo.js";
    s.parentNode.insertBefore(g, s);
  })();

  function subscribeToConsenter() {
    window.consenter.subscribe(
      function (hasConsent) {
        var _paq = window._paq || [];
        if (hasConsent === true) {
          // User granted consent - enable Matomo tracking
          _paq.push(["setCookieConsentGiven"]);
        } else if (hasConsent === false) {
          // User rejected or withdrew consent - disable tracking and remove cookies
          _paq.push(["forgetCookieConsentGiven"]);
        }
      },
      serviceId, // [!code highlight]
      purposeId, // [!code highlight]
    );
  }

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

--------------------------------

### Enable Consenter Contextual Consent (Simple Unblock)

Source: https://documentation.consenter.eu/configuration/contextual-consent

Use this iframe configuration to enable basic contextual consent for a service. Ensure you replace placeholder values with your actual service ID, name, description, and URL.

```html
<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>
```

--------------------------------

### Include Contextual Consent Script

Source: https://documentation.consenter.eu/configuration/contextual-consent

Add this script tag to your HTML to enable contextual consent functionality. Replace YOUR_DOMAIN_ID with your actual Consenter.eu domain ID.

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

--------------------------------

### Basic Contextual Consent Attributes

Source: https://documentation.consenter.eu/configuration/contextual-consent

Use these attributes to define content labels, descriptions, and language for contextual consent.

```html
<iframe
  data-consenter-content-label="Product Demo"
  data-consenter-language="EN"
  data-consenter-tpp-purpose-improve-the-service="true"
  data-consenter-tpp-purpose-marketing-analytics="true"
  data-consenter-tpp-purpose-customise-ads="true"
></iframe>
```

--------------------------------

### eTracker Integration Script for Consenter

Source: https://documentation.consenter.eu/llms-full.txt

Include this script in your website's <head> section. Replace placeholders with your actual eTracker account key, service ID, purpose ID, and domain.

```html
<script id="_etLoader" type="text/javascript" charset="UTF-8"
        data-block-cookies="true"
        data-secure-code="YOUR_ACCOUNT_KEY" 
        src="//code.etracker.com/code/e.js" async>
</script>

<script>
  var _etrackerOnReady = typeof _etrackerOnReady === 'undefined' ? [] : _etrackerOnReady;
  var serviceId = "YOUR_SERVICE_ID"; 
  var purposeId = "YOUR_PURPOSE_ID"; 

  function subscribeToConsenter() {
    window.consenter.subscribe(
      function (hasConsent) {
        if (hasConsent) {
          _etrackerOnReady.push(function() {
            _etracker.enableCookies('yourdomain.com'); 
          });
        } else {
          _etrackerOnReady.push(function() {
            _etracker.disableCookies('yourdomain.com'); 
          });
        }
      },
      serviceId, 
      purposeId 
    );
  }

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

--------------------------------

### Contextual Consent - Improve the Service

Source: https://documentation.consenter.eu/configuration/contextual-consent

Configure consent for the 'Improve the service' purpose.

```html
<iframe data-consenter-tpp-purpose-improve-the-service="true"></iframe>
```

--------------------------------

### Listen for Consent Changes

Source: https://documentation.consenter.eu/technical-integration

Use `window.consenter.subscribe()` to listen for consent changes for any service. This is the primary method for reacting to user consent updates.

```javascript
window.consenter.subscribe()
```

--------------------------------

### Subscribe to Consenter Service

Source: https://documentation.consenter.eu/technical-integration

This snippet demonstrates how to subscribe to the Consenter service. Ensure the Consenter object is available globally before calling this function.

```javascript
if (window.consenter) {
  subscribeToConsenter();
}
```

--------------------------------

### Integrate Consenter Contextual Consent Scripts

Source: https://documentation.consenter.eu/configuration/contextual-consent

Place these scripts at the top of the `<head>` section in your HTML to enable Consenter's contextual consent functionality.

```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>
```

--------------------------------

### Enable Contextual Consent with iframe

Source: https://documentation.consenter.eu/configuration/contextual-consent

Use this iframe snippet to enable contextual consent for a service. Ensure you replace placeholder values like YOUR_SERVICE_ID and YOUR_SERVICE_URL with your actual service details.

```html
<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-SERVICE-NAME"
  data-consenter-content-url="YOUR_SERVICE_URL"
></iframe>
```

--------------------------------

### Subscribe to Consenter Ready Event

Source: https://documentation.consenter.eu/technical-integration

This JavaScript snippet shows how to subscribe to the 'consenter:ready' event using `addEventListener`. It calls `subscribeToConsenter()` when the event is fired.

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

--------------------------------

### Contextual Consent - Marketing Analytics

Source: https://documentation.consenter.eu/configuration/contextual-consent

Configure consent for the 'Support marketing analytics' purpose.

```html
<iframe data-consenter-tpp-purpose-marketing-analytics="true"></iframe>
```

--------------------------------

### Contextual Consent - Customise Ads

Source: https://documentation.consenter.eu/configuration/contextual-consent

Configure consent for the 'Customised online ads' purpose.

```html
<iframe data-consenter-tpp-purpose-customise-ads="true"></iframe>
```

--------------------------------

### Integrate Criteo with Consenter

Source: https://documentation.consenter.eu/llms-full.txt

This script should be placed in your website's <head> section. It handles loading Criteo scripts based on user consent managed by Consenter. Ensure serviceId, purposeId, and partnerId are updated with your specific values.

```html
<script>
  var serviceId = "YOUR_SERVICE_ID"; // Replace with your service ID from Consenter Manager [!code highlight]
  var purposeId = "YOUR_PURPOSE_ID"; // Replace with your purpose ID from Consenter Manager [!code highlight]
  var partnerId = "YOUR_PARTNER_ID"; // [!code highlight]

  window.criteo_q = window.criteo_q || [];

  function loadCriteo() {
    var existingScript = document.querySelector(
      'script[src*="criteo.com/js/ld/ld.js"]',
    );
    if (existingScript) return;

    var script = document.createElement("script");
    script.src = "//dynamic.criteo.com/js/ld/ld.js?a=" + partnerId;
    script.async = true;
    document.head.appendChild(script);

    var deviceType = /iPad/.test(navigator.userAgent)
      ? "t"
      : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile/.test(
            navigator.userAgent,
          )
        ? "m"
        : "d";

    window.criteo_q.push(
      { event: "setAccount", account: partnerId },
      { event: "setSiteType", type: deviceType },
      { event: "viewHome" },
    );
  }

  function removeCriteo() {
    var scripts = document.querySelectorAll('script[src*="criteo.com"]');
    scripts.forEach(function (script) {
      script.remove();
    });
    window.criteo_q = [];
  }

  function subscribeToConsenter() {
    window.consenter.subscribe(
      function (hasConsent) {
        if (hasConsent) {
          loadCriteo();
        } else {
          removeCriteo();
        }
      },
      serviceId, // [!code highlight]
      purposeId, // [!code highlight]
    );
  }

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

--------------------------------

### Next.js Client-Side Routing Configuration

Source: https://manager.consenter.eu/

This snippet configures Next.js client-side routing, defining module imports and component boundaries for the application. It includes definitions for React fragments, suspense, and various boundary components.

```javascript
(self.__next_f=self.__next_f||[]).push([0])
self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[339756,[\"/\_next/static/chunks/090gpw\_p\_n.-0.js\"],\"default\" ]\n3:I[837457,[\"/\_next/static/chunks/090gpw\_p\_n.-0.js\"],\"default\" ]\n7:I[897367,[\"/\_next/static/chunks/090gpw\_p\_n.-0.js\"],\"OutletBoundary\" ]\n8:\"$Sreact.suspense\"\nb:I[897367,[\"/\_next/static/chunks/090gpw\_p\_n.-0.js\"],\"ViewportBoundary\" ]\nd:I[897367,[\"/\_next/static/chunks/090gpw\_p\_n.-0.js\"],\"MetadataBoundary\" ]\nf:I[524488,[\"/\_next/static/chunks/0g.iz5~k0corn.js\"],\"default\" ]\n11:I[74918,[\"/\_next/static/chunks/106qk3pi5h-ol.js\",\"/\_next/static/chunks/01nq\_mzet~l2y.js\",\"/\_next/static/chunks/04r2~00y.mrc7.js\",\"/\_next/static/chunks/0f9.4pjzxwmg9.js\",\"/\_next/static/chunks/0hc5p2y21rnsn.js\",\"/\_next/static/chunks/167mi3u7~xstm.js\"],\"Providers\" ]\n13:I[789447,[\"/\_next/static/chunks/106qk3pi5h-ol.js\",\"/\_next/static/chunks/01nq\_mzet~l2y.js\",\"/\_next/static/chunks/04r2~00y.mrc7.js\",\"/\_next/static/chunks/0f9.4pjzxwmg9.js\",\"/\_next/static/chunks/0hc5p2y21rnsn.js\",\"/\_next/static/chunks/167mi3u7~xstm.js\"],\"Toaster\" ]\n14:I[846282,[\"/\_next/static/chunks/106qk3pi5h-ol.js\",\"/\_next/static/chunks/01nq\_mzet~l2y.js\",\"/\_next/static/chunks/04r2~00y.mrc7.js\",\"/\_next/static/chunks/0f9.4pjzxwmg9.js\",\"/\_next/static/chunks/0hc5p2y21rnsn.js\",\"/\_next/static/chunks/167mi3u7~xstm.js\"],\"MatomoAnalytics\" ]\n15:I[522016,[\"/\_next/static/chunks/106qk3pi5h-ol.js\",\"/\_next/static/chunks/01nq\_mzet~l2y.js\",\"/\_next/static/chunks/04r2~00y.mrc7.js\",\"/\_next/static/chunks/0f9.4pjzxwmg9.js\",\"/\_next/static/chunks/0hc5p2y21rnsn.js\",\"/\_next/static/chunks/167mi3u7~xstm.js\",\"/\_next/static/chunks/0~71djb7ft8~8.js\",\"/\_next/static/chunks/10t4acvjy8y74.js\",\"/\_next/static/chunks/0-7qu316h2j74.js\",\"/\_next/static/chunks/00hob0d15kbg1.js\",\"/\_next/static/chunks/0csch\_fs7a\_zg.js\",\"/\_next/static/chunks/14bxc2-rigsdr.js\",\"/\_next/static/chunks/17zakehc8ty5c.js\",\"/\_next/static/chunks/18df\_8syi-9j2.js\",\"/\_next/static/chunks/03mvea\_eh.l3m.js\",\"/\_next/static/chunks/05qixo7xa7u4u.js\"],\"\" ]\n16:I[27201,[\"/\_next/static/chunks/090gpw\_p\_n.-0.js\"],\"IconMark\" ]\n:HL[\"/\_next/static/chunks/0wl3qrf-\_o8b5.css\",\"style\"]\n:HL[\"/\_next/static/chunks/0uz.jv6aq4b76.css\",\"style\"]\n:HL[\"/\_next/static/media/248e1dc0efc99276-s.p.0ft7o6kv5bp14.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/\_next/static/media/70bc3e132a0a741e-s.p.1409xf.ylxg8g.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/\_next/static/media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])
```

```javascript
self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[[\"locale\",\"en\",\"d\",null],{\"children\":[[\"(app)\",{\"children\":[[\"(modules)\",{\"children\":[[\"(home)\",{\"children\":[[\"\_\_PAGE\_\",{}]]}]}]}]},\"$undefined\",\"$undefined\",16]]}]},[[\"$\",\"$1\",\"c\",{\"children\":[null,[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[[\"$\",\"$L3\",null,{}],{\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\"}],\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}], [\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\
```

--------------------------------

### Theme Management Script

Source: https://manager.consenter.eu/

This script dynamically manages the theme (light/dark) of the document element. It supports class-based or attribute-based theme application and respects system preferences.

```javascript
requestAnimationFrame(function(){$RT=performance.now()});

((a,b,c,d,e,f,g,h)=>{
  let i=document.documentElement,
  j=["light","dark"];

  function k(b){
    var c;
    (Array.isArray(a)?a:[a]).forEach(a=>{
      let c="class"===a,
      d=c&&f?e.map(a=>f[a]||a):e;
      c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)
    }),
    c=b,
    h&&j.includes(c)&&(i.style.colorScheme=c)
  }

  if(d)k(d);
  else try{
    let a=localStorage.getItem(b)||c,
    d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;
    k(d)
  }catch(a){}
})("class","theme","system",null,["light","dark"],null,true,true)
```

--------------------------------

### Enable Contextual Consent for Additional Purposes (Type 2)

Source: https://documentation.consenter.eu/configuration/contextual-consent

Configure an iframe to enable contextual consent for additional purposes (Type 2). Include specific `data-consenter-tpp-purpose-*` attributes to declare data usage.

```html
<!-- 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>
```

--------------------------------

### Subscribe to Consenter Events (JavaScript)

Source: https://documentation.consenter.eu/technical-integration

Use this snippet to subscribe to consent events from the Consenter.eu service. It checks the consent status and enables or disables services accordingly.

```javascript
function subscribeToConsenter() {
  window.consenter.subscribe(
    function (hasConsent) {
      if (hasConsent) {
        // Enable the service
      } else {
        // Disable the service
      }
    }
  );
}
```

--------------------------------

### Configure Marketing Analytics Consent

Source: https://documentation.consenter.eu/configuration/contextual-consent

Set the 'data-consenter-tpp-purpose-marketing-analytics' attribute to 'true' to enable consent for marketing analytics.

```html
<span data-consenter-tpp-purpose-marketing-analytics="true"></span>
```

--------------------------------

### Integrate Consenter Contextual Consent Scripts

Source: https://documentation.consenter.eu/configuration/contextual-consent

Add the Consenter contextual consent scripts to the top of your HTML head section. Ensure you use your specific domain ID for the callback script.

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