Adding a new vendor and/or new purpose might trigger a reconsent for your property's end Users.
Ensure the buttons are always visible
Add CMP CSS to allow scrollbar, so that buttons are always visible
#id { max-height: 300px; overflow-y: scroll; }
Change #id with your CMP's respective text element id
Technical Implementation
On top of the CMP configurations, there are the following technical integration actions that need to be done.
For any technical questions, you can reach out to our Customer Success team at csm@utiq.com
Code
Please implement the following code to be executed after your CMP code has completed.
Follow the below code examples, to combine the required actions, as described above.
JS
// Call 'handleConsentChange' when CMP Consent change
// Get utiqPurposeConsent and utiqVendorConsent from the CMP
window.Utiq.API.handleConsentChange(utiqPurposeConsent === true && utiqVendorConsent !== false);
// If the website’s CMP is not listing any other vendors (and only listing the purposes), the utiqVendorConsent parameter can be omitted
// Check if Utiq Consent was revoked from Manage Utiq page
window.Utiq ||= {};
window.Utiq.queue ||= [];
window.Utiq.queue.push(() => {
if (!window.Utiq.API.getUtiqConsentStatus()) {
// Turn Utiq purpose AND vendor to false on CMP if needed
}
});
// Set 'none' on window.Utiq.config.CMP
// Set 'onConsentUpdateFinished' listener for the consent syncronization
window.Utiq ||= {};
window.Utiq.config = {
CMP: 'none', // Needed for Utiq SDK to *not* show Utiq Separate Pop-up
customizationOptions: { // Needed for consent revocation pop-up in Manage Utiq
buttons: {
bodyColor: '#ff0066',
textColor: '#000000',
radius: 5,
},
contentTextColor: '#000000'
},
listeners: {
onConsentUpdateFinished: ({ isConsentGranted }) => {
setTimeout(() => {
if (!isConsentGranted) {
// Turn Utiq purpose AND vendor to false on CMP if needed
}
}, 250);
}
}
};
(() => {
const s = document.createElement("script")
s.type = 'text/javascript';
s.src = "https://utiq.example.com/utiqLoader.js"
s.async = true;
document.head.appendChild(s)
})();
For window.Utiq.API.handleConsentChange(utiqPurposeConsent === true && utiqVendorConsent !== false);, if the website’s CMP is not listing any other vendors (and only listing the purposes), the utiqVendorConsent parameter can be omitted.
Using up to ES5 JavaScript Version (Google Tag Manager)
The code can be integrated using a Tag Manager. Bellow an example using Google Tag Manager, where you need to put the code in <script></script> and change the arrow function (() => { to (function () { to comply with ES5 JavaScript.
JS
<script>
// Call 'handleConsentChange' when CMP Consent change
// Get utiqPurposeConsent and utiqVendorConsent from the CMP
window.Utiq.API.handleConsentChange(utiqPurposeConsent === true && utiqVendorConsent !== false);
// If the website’s CMP is not listing any other vendors (and only listing the purposes), the utiqVendorConsent parameter can be omitted
// Check if Utiq Consent was revoked from Manage Utiq page
window.Utiq ||= {};
window.Utiq.queue ||= [];
window.Utiq.queue.push(() => {
if (!window.Utiq.API.getUtiqConsentStatus()) {
// Turn Utiq purpose AND vendor to false on CMP if needed
}
});
// Set 'none' on window.Utiq.config.CMP
// Set 'onConsentUpdateFinished' listener for the consent syncronization
window.Utiq ||= {};
window.Utiq.config = {
CMP: 'none', // Needed for Utiq SDK to *not* show Utiq Separate Pop-up
customizationOptions: { // Needed for consent revocation pop-up in Manage Utiq
buttons: {
bodyColor: '#ff0066',
textColor: '#000000',
radius: 5,
},
contentTextColor: '#000000'
},
listeners: {
onConsentUpdateFinished: ({ isConsentGranted }) => {
setTimeout(() => {
if (!isConsentGranted) {
// Turn Utiq purpose AND vendor to false on CMP if needed
}
}, 250);
}
}
};
(function () {
const s = document.createElement("script")
s.type = 'text/javascript';
s.src = "https://utiq.example.com/utiqLoader.js"
s.async = true;
document.head.appendChild(s)
})();
</script>
Below are some hyperlinks for above event listeners and APIs, just for further information of their purpose.
handleConsentChange API is used to handle the consent of users' choices in your CMP, to Utiq SDK, based on specific purpose ID and vendor ID (if vendors are used)