"Integrated Model" - Utiq & CMP APIs

This page purpose is to guide you what technical steps you will need to make, if you want to go for “Integrated Model”.

Prerequisites to use “Integrated Model”

Make sure you meet the minimum Utiq standards for using the “Integrated Model” by reviewing Option A: Integrated consent model

Configurations in CMP console

For the integration you will need to do some configurations on your CMP.

Please follow the principles and steps as described on Configuration in CMP console

Once added Utiq requirements in your CMP, you must reprompt your consent notice/banner to all your users.

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 the your CMP code has completed.

Follow the below code examples, to combine the required actions, as described above.

//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
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',
  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.

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)

• getUtiqConsentStatus API is used to get the users consent stored on Utiq

• customizationOptions object allows you to style the consent revocation pop-up in Manage Utiq

• onConsentUpdateFinished event listener is triggered when Utiq consent has changed

Please note that:

[INSERT UTIQ CUSTOM PURPOSE] → add the parameter setup in your CMP for the Utiq custom purpose

[INSERT UTIQ CUSTOM VENDOR] → add the parameter setup in your CMP for the Utiq custom vendor

APIs for CMP vendors

Below is a list of APIs you can call, based on your CMP vendor:

_iub.cs?.api?.setPreferences({
    purposes: {
      [INSERT UTIQ CUSTOM PURPOSE]: false,
    },
    vendors: {
      [INSERT UTIQ CUSTOM VENDOR]: false,
    },
  });

_iub.csConfiguration.callback = {
  onPreferenceExpressed() {
    const preferences = _iub.cs?.api?.getPreferences();
    window.Utiq.API.handleConsentChange(preferences?.purposes.[INSERT UTIQ CUSTOM PURPOSE] === true && preferences?.vendors.[INSERT UTIQ CUSTOM VENDOR] !== false);
  },
};

Testing

To validate the integration, you will need to run the “Utiq Integrated Model” test cases.