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 OneTrust, 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 OneTrust first (be aware that loading these async can cause issues).
Setting and updating iPaper Consent
This snippet is an example of how you can set the iPaper consent to be equal to that of OneTrust.
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 handle setting the iPaper consent so it matches what the user has set in OneTrust:
function setIpaperConsent(activeConsentGroups) {
/* Get consent for each category:
These are retrieved using their OneTrust CustomGroupId.
By running/using OnetrustActiveGroups in the console, you can see which
categories are currently accepted from the cookie banner and thereby find
out exactly what these CustomGroupIds are */
const performanceCustomGroupId = {{ INSERT VALUE HERE }}; // Typically looks like 'C0001'
const functionalCustomGroupId = {{ INSERT VALUE HERE }}; // Typically looks like 'C0001'
const advertisingCustomGroupId = {{ INSERT VALUE HERE }}; // Typically looks like 'C0001'
// Once you know the CustomGroupIds, check each of them to see if they are active
const allowPerformanceCookies = activeConsentGroups.includes(performanceCustomGroupId) ? true : false;
const allowFunctionalCookies = activeConsentGroups.includes(functionalCustomGroupId) ? true : false;
const allowAdvertisingCookies = activeConsentGroups.includes(advertisingCustomGroupId) ? true : false;
// Set iPaper consent to match the above
instance.consent.set({
allowPerformanceCookies,
allowFunctionalCookies,
allowAdvertisingCookies,
});
}
After this we need to ensure that the setIpaperConsent() function will be run in two cases:
When the page initializes/loads
When the user changes their consent via the OneTrust banner
In both of the cases above, we need to pass the param activeConsentGroups to setIpaperConsent():
let hasInitialized = false;
function OptanonWrapper() {
if (!hasInitialized) {
// Set initial iPaper consent to match current OneTrust consent
const activeConsentGroups = OnetrustActiveGroups?.split(",").filter((element) => element);
setIpaperConsent(activeConsentGroups);
// Set up callback that will update iPaper consent when OneTrust consent is modified/changed
OneTrust.OnConsentChanged(function (event) {
setIpaperConsent(event?.detail);
});
hasInitialized = true;
}
}
And that's all we need to do. Now, with some minor changes to the script to fit your exact OneTrust set-up, the iPaper consent will now be set and updated so it matches what your users set in the OneTrust banner.
The full code snippet can be seen below:
function setIpaperConsent(activeConsentGroups) {
/* Get consent for each category:
These are retrieved using their OneTrust CustomGroupId.
By running/using OnetrustActiveGroups in the console, you can see which
categories are currently accepted from the cookie banner and thereby find
out exactly what these CustomGroupIds are */
const performanceCustomGroupId = {{ INSERT VALUE HERE }}; // Typically looks like 'C0001'
const functionalCustomGroupId = {{ INSERT VALUE HERE }}; // Typically looks like 'C0001'
const advertisingCustomGroupId = {{ INSERT VALUE HERE }}; // Typically looks like 'C0001'
// Once you know the CustomGroupIds, check each of them to see if they are active
const allowPerformanceCookies = activeConsentGroups.includes(performanceCustomGroupId) ? true : false;
const allowFunctionalCookies = activeConsentGroups.includes(functionalCustomGroupId) ? true : false;
const allowAdvertisingCookies = activeConsentGroups.includes(advertisingCustomGroupId) ? true : false;
// Set iPaper consent to match the above
instance.consent.set({
allowPerformanceCookies,
allowFunctionalCookies,
allowAdvertisingCookies,
});
}
let hasInitialized = false;
function OptanonWrapper() {
if (!hasInitialized) {
// Set initial iPaper consent to match current OneTrust consent
const activeConsentGroups = OnetrustActiveGroups?.split(",").filter((element) => element);
setIpaperConsent(activeConsentGroups);
// Set up callback that will update iPaper consent when OneTrust consent is modified/changed
OneTrust.OnConsentChanged(function (event) {
setIpaperConsent(event?.detail);
});
hasInitialized = true;
}
}
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 OneTrust 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:
let hasInitialized = false;
function OptanonWrapper() {
if (!hasInitialized) {
instance.consent.onShow(() => {
OneTrust.InitializeBanner();
OneTrust.LoadBanner();
});
}
}