Usercentrics – play custom HTML

Usercentrics can directly capture many different data processing services and only play them out if the consent has been given. But with the following method any HTML can be activated or deactivated by Usercentrics. In this way, elements such as iFrames or other embedded content, which in turn brings its own tracking technologies, can be integrated with a CMP.

Step 1: Create DPS in the Usercentrics Backend

First, the corresponding content must be created in the Usercentrics backend as a data processing service. This can be done either automatically via the UC database or manually. For this example, we simply use the name "Test".

Data Processing Services

Step 2: Packing HTML content into Javascript brackets

First we need to create a div-bracket in which we want to display the content later:

<div id="testcontent">Here is the HTML, which is executed if "Test" was not agreed (e.g. "Please activate "Test")</div>

After that we write a script that replaces the content of the div-bracket "testcontent". Due to the "data-usercentrics=test" the script will not be played until consent is given:

<script type="text/plain" data-usercentrics="Test">
document.getElementById('testcontent').innerHTML = '';
document.getElementById('testcontent').innerHTML += 'Hello, I'm any <strong>HTML content</strong> that was played only after approval. For example any iFrames, tracking pixels, embedded content, ...';

Instead of "Test" we use the exact name of the DPS, which we have previously defined in the Usercentrics backend.
The first line of the script deletes the previous content from the div bracket. The second line then writes the HTML content marked green into the div-bracket.


If it is content that does not require a replacement content (e.g. trust badges or tracking that is played via iFrames) an (empty) div bracket must still be created.

Step 3: Create approval button for the replacement content

Use the following function to create a button that changes the approval status:
usercentrics.updateConsents([{'templateId':'XXXXXXXX', 'status':true}])

For example, a button can be created to perform the Consent:

<button onclick="usercentrics.updateConsents([{'templateId':'XXXXXXX', 'status':true}])">I accept</button>

Alternatively a simple link can be used. However, this method leads to various errors in some CMS:

<a href="#" onclick="usercentrics.updateConsents([{'templateId':'XXXXXXX', 'status':true}])">I accept</a>

The template ID is unique for each DPS and can be read from the Usercentrics backend:

Add Data Processing Services


You can see an example of this method here: Any HTML