UserCentrics

Note:

While the implementations below work as intended during the time of writing, we unfortunately cannot guarantee that they will always work for you as-is. Since this is not an official integration with UserCentrics, changes they make to their code base may also have an impact on the snippets below.

Note:

The snippets below are all intended to be used through the Custom Scripting module. If you wish to use them with the Flipbook JavaScript API instead they will require some adjustment.

Before inserting new <script> tags in Custom Scripting containing these snippets, you should ensure that you have loaded the script(s) for UserCentrics first (be aware that loading these async can cause issues).

Setting and updating iPaper Consent

This snippet serves as an example of how you can retrieve the consent given to iPaper in UserCentrics and use it to update the iPaper consent.

First off, you will need to have added iPaper as a service in UserCentrics in the relevant categories. These will likely be Performance, Functionality, and Advertising (dependent on your specific set-up, these categories may be named differently). In order to make the services easier to find once we need to do that in our script, we recommend that you use naming that includes the word iPaper.

Once things are set up inside UserCentrics, we can start creating the script.

First, we need to instantiate a new iPaper API instance (if this has not been done already) which we can then use to access the Consent Management methods/functions:

const instance = iPaperJsApi(3);

Next up, we need to introduce a function that will retrieve the consent for iPaper from UserCentrics, and then update the iPaper consent so it matches:

function setIpaperConsent() {
    // First, let's get all services in UserCentrics where the name includes "iPaper"
    const allServices = UC_UI.getServicesBaseInfo();
    const iPaperServices = allServices.filter(service => service.name.includes('iPaper'));
    
    /* 
    NOTE: 
    Dependent on your UserCentrics set-up, some of the services may be in
    custom categories. The best way to check what you will need to filter for
    to find the correct service, is to console.log out iPaperServices and look
    at the categorySlug property
    
    In this example implementation, we will assume that the "Performance" 
    category is custom and use a variable for storing its' categorySlug
    */
    const customPerformanceCategorySlug = {{ INSERT VALUE HERE }}; // Typically looks like 'customCategory-d0fe7968-5445-46a0-bc8d-c197dfa06c1c'
    
    /* 
    Let's filter iPaperServices by categorySlug in order to find the cookie 
    category we're interested in checking the consent status of. Once we have 
    done that, we can access the consent status with .consent.status 
    */
    const allowFunctionalCookies = iPaperServices.filter(service => service.categorySlug === 'essential')[0].consent.status;
    const allowPerformanceCookies = iPaperServices.filter(service => service.categorySlug === customPerformanceCategorySlug)[0].consent.status;
    const allowAdvertisingCookies = iPaperServices.filter(service => service.categorySlug === 'marketing')[0].consent.status;
    
    // Finally, we use the iPaper API to update the iPaper consent
    instance.consent.set({
        allowPerformanceCookies,
        allowFunctionalCookies,
        allowAdvertisingCookies
    });
}

After this we need to ensure that the setIpaperConsent() function will be run in two cases:

1. When the page initializes/loads

2. When the user changes their consent via the UserCentrics banner

// Set/update iPaper consent when page initializes/loads
window.addEventListener('UC_UI_INITIALIZED', function () {
    setIpaperConsent();
});

// Listen for changes to UserCentrics consent and update iPaper consent accordingly
window.addEventListener('UC_UI_CMP_EVENT', function (event) {
    if (event.detail.type === 'ACCEPT_ALL' || event.detail.type === 'DENY_ALL' || event.detail.type === 'SAVE') {
        setIpaperConsent();
    }
});

And that's all we need to do. Now, with some minor changes to the script to fit your exact UserCentrics set-up, the iPaper consent will now be set and updated so it matches what your users set in the UserCentrics banner.

The full code snippet can be seen below:

function setIpaperConsent() {
    // First, let's get all services in UserCentrics where the name includes "iPaper"
    const allServices = UC_UI.getServicesBaseInfo();
    const iPaperServices = allServices.filter(service => service.name.includes('iPaper'));
    
    /* 
    NOTE: 
    Dependent on your UserCentrics set-up, some of the services may be in
    custom categories. The best way to check what you will need to filter for
    to find the correct service, is to console.log out iPaperServices and look
    at the categorySlug property
    
    In this example implementation, we will assume that the "Performance" 
    category is custom and use a variable for storing its' categorySlug
    */
    const customPerformanceCategorySlug = {{ INSERT VALUE HERE }}; // Typically looks like 'customCategory-d0fe7968-5445-46a0-bc8d-c197dfa06c1c'
    
    /* 
    Let's filter iPaperServices by categorySlug in order to find the cookie 
    category we're interested in checking the consent status of. Once we have 
    done that, we can access the consent status with .consent.status 
    */
    const allowFunctionalCookies = iPaperServices.filter(service => service.categorySlug === 'essential')[0].consent.status;
    const allowPerformanceCookies = iPaperServices.filter(service => service.categorySlug === customPerformanceCategorySlug)[0].consent.status;
    const allowAdvertisingCookies = iPaperServices.filter(service => service.categorySlug === 'marketing')[0].consent.status;
    
    // Finally, we use the iPaper API to update the iPaper consent
    instance.consent.set({
        allowPerformanceCookies,
        allowFunctionalCookies,
        allowAdvertisingCookies
    });
}

// Set/update iPaper consent when page initializes/loads
window.addEventListener('UC_UI_INITIALIZED', function () {
    setIpaperConsent();
});

// Listen for changes to UserCentrics consent and update iPaper consent accordingly
window.addEventListener('UC_UI_CMP_EVENT', function (event) {
    if (event.detail.type === 'ACCEPT_ALL' || event.detail.type === 'DENY_ALL' || event.detail.type === 'SAVE') {
        setIpaperConsent();
    }
});

Showing the cookie banner

First, we need to instantiate a new iPaper API instance (if this has not been done already) which we can then use to access the Consent Management methods/functions:

const instance = iPaperJsApi(3);

In order to show the UserCentrics banner when the "Cookie Policy" link in the topbar menu has been clicked, you can set up an onShow subscription like in the snippet below:

instance.consent.onShow(() => {
    UC_UI.showFirstLayer();
});

If you want to show the detailed UserCentrics sidebar banner instead, you can use this snippet:

instance.consent.onShow(() => {
    UC_UI.showSecondLayer();
});