Developer Corner

Get some insights on how to customize the plugin and make the most out of it.

Typo3 Documentation can be found here.

This Section is used for all other embeds Wordpress/Shopware and headless. 

Available data-cc actions

Any button (or link) can use the custom data-cc attribute to perform a few actions without manually invoking the API methods.

Valid values:

  • show-preferencesModal
  • show-consentModal
  • accept-all
  • accept-necessary
  • accept-custom
<button type="button" data-cc="show-preferencesModal">View Preferences Modal</button>

Use this value to show the preferencesModal.

<button type="button" data-cc="show-consentModal">View Consent Modal</button>

Use this value to show the consentModal. If the consent modal does not exist, it will be generated on the fly.

<button type="button" data-cc="accept-all">Accept all categories</button>

Use this value to accept all cookie categories.

<button type="button" data-cc="accept-necessary">Reject all categories</button>

Use this value to accept only the necessary cookie categories.

<button type="button" data-cc="accept-custom">Accept selection</button>

Use this value to accept the current selection inside the preferences modal.

How to manage scripts

There are two ways to manage your scripts:

  • via <script> tags
  • via callbacks/functions (in the Banner - Generator)

Available script attributes

  • data-category: the category identifier
  • data-service (optional): if specified trigger a single service
  • data-type (optional): custom type (e.g. "module")
  • data-src (optional): can be used instead of src to avoid validation issues

Example usage:

<script
    type="text/plain"
    data-category="analytics"
    data-service="google-analytics"
>/*...code*/</script>

 

How to block/manage a script tag

You can manage any script tag by adding the following 2 attributes (both required):

  • type="text/plain"
  • data-category="your-category-identifier"

Before:

<script>
    // Always executed
</script>

 

After:

<script
    type="text/plain"
    data-category="analytics">
    // Executed when the "analytics" category is enabled
</script>

You can also run scripts when a category is disabled (if it was previously enabled) by prepending the '!' character to the category name:

<script
    type="text/plain"
    data-category="!analytics">
    // Executed when the "analytics" category is disabled
</script>

 

 

Service Management

A service represents a script or a group of scripts associated to a name, that appears inside the Preferences Modal with its own toggle. 

You can add as many services as you embed, manage them by the service-identifier or category-identifier (as a group)

You can link a service by adding the following attribute to the script. 

data-service="your-service-identifier"
<script
    type="text/plain"
    data-category="analytics"
    data-service="google-analytice">
    // Executed when the "Google Analytics" service is enabled
</script>

You can add the '!' before the service name to run some clean-up logic when the service is disabled:

<script
    type="text/plain"
    data-category="analytics"
    data-service="!google-analytice">
    // Executed when the "Google Analytics" service is disabled
</script>

 

 

Handling iFrames and Third-Party Content

When using iFrames, our plugins automatically detects them and replaces them with compliant placeholders if a service is present in your config. (url-pattern match)
This ensures that all embedded content follows privacy and performance best practices.

<div data-service="youtube" data-id="https://www.youtube-nocookie.com/embed/RCJdPiogUIk" data-autoscale=""></div>

In this example:

  • data-service specifies the service-identifier (e.g., YouTube, Vimeo, etc.).
  • data-id contains the embed URL or video ID.
  • data-autoscale enables responsive scaling for the embedded content.

 

Configuration options

All available options for the <div> element:

<div
    data-service="<service-name>"
    data-id="<resource-id>"
    data-params="<iframe-query-parameters>"
    data-thumbnail="<path-to-image>"
    data-autoscale
    data-ratio="<x:y>">
</div>
  • data-service : [String, Required] name of the service (must also be defined in the config. object)
  • data-id : [String, Required] unique id of the resource (example: video id)
  • data-title : [String] notice title
  • data-params : [String] iframe query parameters
  • data-thumbnail : [String] path to custom thumbnail
  • data-ratio : [String] custom aspect ratio (1:1, 2:1, 3:2, 5:2, 4:3, 9:16, 9:20, 16:9, 16:10, 20:9, 21:9)
  • data-autoscale : specify for responsive iframe (fill parent width + scale proportionally)
  • data-widget : ignore the default aspect ratio; specify when implementing a custom widget with explicit width and height (twitter, facebook, instagram ...)

 

Plugin Behavior

By default, when you use our plugins:

  • All <iframe> elements are automatically detected if a service URL-Pattern matches the iframe URL 
  • Each detected <iframe> is rewritten into a <div> element with the appropriate data attributes.

 

Headless or Standalone Integration

If you are using the system in a headless or standalone setup (without the plugin integration):

  • You must manually replace all <iframe> elements with <div> elements as shown above.
  • Ensure that each <div> includes the correct data-service and data-id attributes for proper functionality.
Cookie Extension Logo