Manage Utiq Page

Overview

The "Manage Utiq" page is designed for easy implementation and updates. By following the provided instructions, you can ensure that this page remains scalable and automatically updated. The page content is dynamically managed through our JavaScript, which handles texts, hyperlinks, API calls, and the listing of related domains. Specifically you get:

All page privacy text, in correct language for your site
Proper hyperlinks
All necessary APIs actions (e.g. one click revoke)
The website list paragraph, listing your specific domains under same Data Controller
The anchor id="manage-utiq-website-list"

Note that for the website list paragraph, the dynamic <div> will render on all domains, all other live domains (with enabled network signals), or at least the current domain you are viewing/testing, if still not live.

You will still need to manually add the Manage Utiq footer link on all pages.

Why this feature is important

The evolution of our product and supported features, some times require changes on our privacy requirements texts so we will be introducing new versions as the roadmap evolves.

Using dynamic content guarantees that we can roll out necessary changes at scale without compromising compliance, and without having to burden you with manual updates to this page.

There will always be an official release note informing you about the upcoming changes on the page content, ahead of time, before actually doing the changes, with a dedicated release notice. It will be informative, as you will never have to do anything, all updates will be done automatically by our SDK.

Implementation Steps

Create a dedicated “Manage Utiq” page

Set the page URL as described in our documentation (e.g. for English https://<your_domain>/manage-utiq).
In the page add a heading that will serve as the title for the dynamic page content. This would typically be a <h1>. The heading text should be as described in our documentation (e.g. for English it should be set to “Manage your Utiq technology consents”).
Directly after the heading add the following <div> element:
HTML
```
<div id="utiq-manage-page"></div>
```
The page should load the following JavaScripts:
1. https://utiq.<your_domain>/utiqLoader.js - This script makes available Utiq APIs required by the “Manage Utiq” page, e.g., the revokeConsentWithPopup function, therefore, on this specific page, utiqLoader.js should always be loaded, irrespectively of CMP consent.
2. https://utiq.<your_domain>/utiqManagePage.js - This script dynamically adds the appropriate content inside the <div> element mentioned above. This script should be loaded always, irrespective of CMP consent, otherwise the Utiq related text will not be appear.

Suppress Utiq pop-up on Manage Utiq page

Users may land on Manage Utiq page from either the Integrated Model or Separate pop-up Model, with a relevant hyperlink, before they actually give consent. Therefore, the page content should be visible, without being covered by the pop-up.

To do that, in your tagging of Utiq SDK, you will need to add the below additional configuration, so that user will not be presented with Utiq pop-up, again, after clicking and landing on this page.

JS

window.Utiq.config = {
  CMP: "none", // For Separate Pop-up - it would be other ID for Integrated Model
  cmpUtiqPurposeId: "", // Only if you use Integrated Model
  cmpUtiqVendorId: "", // Only if you use Integrated Model
  customizationOptions: { 
    domainListAnchorMargin: 200 // Optional - use to optimize auto-scroll margin to domain list paragraph
  }
}

The CMP: "none" configuration is only for Separate Pop-up. If you use Integrated Model, see relevant CMP and purpose / vendor ID configurations described here.

Styling the content

The HTML tags injected within the <div> tag are un-styled by default. To ensure they match your website’s design, apply custom styles using the <div> ID to target only these elements. Specify the styles as follows:

CSS

/* Example Manage Utiq CSS Styles */

/* Set the font famility for the elements     */
/* These can also be set one by one if needed */
#utiq-manage-page h2,
#utiq-manage-page p,
#utiq-manage-page a,
#utiq-manage-page li {
  font-family: "Sofia Pro", "Century Gothic", "Arial", sans-serif;
}

#utiq-manage-page h2 {
  font-size: 1.5em;
}

#utiq-manage-page a {
  color: #db214f;
}

#utiq-manage-page a:hover {
  color: #7a0320;
}

Putting it all together

The following is a minimal example. Depending on your setup, you may need to add custom configuration for the utiqLoader script.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <script>
      window.Utiq = window.Utiq || {};
      window.Utiq.config = {
        CMP: "none"
      };
      (() => {
        const s = document.createElement("script")
        s.type = 'text/javascript';
        s.src = "https://utiq.example.com/utiqLoader.js"
        s.async = true;
        document.head.appendChild(s)
      })();
      (() => {
        const s = document.createElement("script")
        s.type = 'text/javascript';
        s.src = "https://utiq.example.com/utiqManagePage.js"
        s.async = true;
        document.head.appendChild(s)
      })();
    </script>
    <style>
      /* Example Manage Utiq CSS Styles */
  
      #utiq-manage-page h2,
      #utiq-manage-page p,
      #utiq-manage-page a,
      #utiq-manage-page li {
        font-family: "Sofia Pro", "Century Gothic", "Arial", sans-serif;
      }
  
      #utiq-manage-page h2 {
        font-size: 1.5em;
      }
  
      #utiq-manage-page a {
        color: #db214f;
      }
  
      #utiq-manage-page a:hover {
        color: #7a0320;
      }
  
    </style>
    <title>Manage Utiq</title>
  </head>
  <body>
    <h1>Manage your Utiq technology consents</h1>
    <div id="utiq-manage-page"></div>
  </body>
</html>