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.
Installation
Add this single script tag to the `<head>` of your website:
<script
id="cf-cookie-script"
data-cf-cookiemanager-public-key="YOUR-PROJECT-ID"
src="https://cdn.coding-freaks.com/YOUR-PROJECT-ID/consent.js"
></script>Replace `YOUR-PROJECT-ID` with your project ID from the Configurator. Example:
<script
id="cf-cookie-script"
data-cf-cookiemanager-public-key="fb3ba8-b6f0d5-52b159-b33f52-cec419"
src="https://cdn.coding-freaks.com/cdn/consent/v2/fb3ba8-b6f0d5-52b159-b33f52-cec419/consent.js"
></script>The script loads the configuration and stylesheet automatically. No additional CSS link needed.
Available data-cc actions (Cookie Settings Link)
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>
<a href="#" data-cc="show-preferencesModal">Cookie Settings</a>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 It Works Under the Hood
1. Page loads. The consent script starts and finds all `<script type="text/plain" data-category="...">` tags.
2. These scripts are registered but not executed.
3. The consent banner appears (if no valid consent cookie exists).
4. Visitor clicks Accept or selects categories.
5. For each accepted category/service, the consent manager creates a new `<script>` element, copies the code or `src`, and inserts it into the page. The browser executes it.
6. The choice is saved in a cookie.
7. On the next page load, accepted scripts are enabled immediately without showing the banner.
When a visitor revokes consent: onReject code runs, cookies from rejected services are auto-cleared (if configured).
Blocking Scripts Before Consent
There are two ways to manage your scripts:
- via <script> tags
- via callbacks/functions (in the Banner - Generator)
Available script attributes
Add a link anywhere on your website (footer, privacy page) that lets visitors change their cookie preferences:
- data-category: the category identifier
- data-service: 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-service="googleanalytics"
>/*...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-service="your-service-identifier"
Before:
<script>
// Always executed
</script>
After:
<script
type="text/plain"
data-service="googleanalytics">
// Executed when the "googleanalytics" service is enabled
</script>You can also run scripts when a service is disabled (if it was previously enabled) by prepending the '!' character to the service name:
<script
type="text/plain"
data-service="!googleanalytics">
// Executed when the "googleanalytics" service is disabled
</script>The browser ignores `type="text/plain"` scripts completely. The consent manager enables them after the visitor accepts.
Before / After
<!-- BEFORE: runs immediately, no consent GDPR Invalid -->
<script src="https://example.com/tracking.js"></script>
<!-- AFTER: blocked until "analytics" category is accepted -->
<script type="text/plain" data-category="analytics"
src="https://example.com/tracking.js"></script>Block by Service (more precise)
<script type="text/plain" data-service="googleanalytics"
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
Inline Scripts
<script type="text/plain" data-service="googleanalytics">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>
Important Rules
- `data-category` and/or `data-service` values must exactly match the identifiers in the Configurator (case-sensitive, no spaces)
- Every blocked script needs `type="text/plain"` - without it the browser executes the script before consent
- You can use `data-category` alone (accepts whole category) or combine it with `data-service` (accepts specific service)
- You can also use `data-service` alone for shorter classification.
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>
Blocking Iframes / Handling iFrames and Third-Party Content
Replace iframes (YouTube, Google Maps, Vimeo, etc.) with a `<div>` placeholder. Visitors see a notice with a "Load" button instead of the embedded content.
You need to handle this manually if you don´t use our Plugins. This is a Standalone Integratuion Example.
<!-- BEFORE -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>
<!-- AFTER -->
<div data-service="youtube" data-id="https://www.youtube.com/embed/VIDEO_ID" data-autoscale></div>The `data-service` value must match the service identifier in the Configurator.
Notice text and button labels come from the Iframe Manager settings in your Configurator.
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.
- 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.
