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) and the current domain, 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.

Configuration option for language

You can use the below configuration option if you need to dynamically change the default language of the text generated by the dynamic <div>, e.g. if users have a language drop-down option.

JS

window.Utiq.config = {
  customizationOptions: {
    language: "en" // Optional attribute. Allowed values: en, de, es, fr or it
  }
}

Optimize auto-scroll margin to domain list paragraph

Users may land on Manage Utiq page from either the Integrated Model or Separate pop-up Model, with a relevant hyperlink, and they will be automatically scrolled to the domains list paragraph.

In case you have any overlaying top menu, remaining in view when users scroll lower, you can use the below configuration, to optimize the margin of the auto scroll, so that the paragraph title is visible.

JS

window.Utiq.config = {
  customizationOptions: { 
    domainListAnchorMargin: 200 // Optional - use to optimize auto-scroll margin to domain list paragraph
  }
}

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", // 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: {
          language: "en" // Optional attribute. Allowed values: en, de, es, fr or it
        }
      };
      (() => {
        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>