Configuration options

The Utiq loader script can be configured using the Utiq.config object. The configuration object is a JavaScript object that can be set up before the Utiq loader script is loaded. The configuration object is available under the Utiq.config namespace.

All the configuration options below are optional and can be omitted if not needed.

customizationOptions

You can configure the following Utiq pop-up customized styling: buttons background color, buttons text colors, buttons corners radius and pop-up text colors.

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  customizationOptions: {
    buttons: {
      bodyColor: '#ff0066',
      textColor: '#000000',
      radius: 5,
    },
    contentTextColor: '#000000'
  },
};

All values are optional and their values default to Utiq’s default styling if not provided. Specifically they are as follows:

  • buttons.bodyColor - Background color of the buttons. This should be a HEX color code, e.g. #ff0066.
  • buttons.textColor - Text color of the buttons. This should be a HEX color code, e.g. #000000.
  • buttons.radius - Corners radius of the buttons. This is a numeric value and represents the radius in pixels.
  • contentTextColor - Text color of the pop-up content. This should be a HEX color code, e.g. #000000.

customUtiqHost

The Utiq loader configuration automatically detects the currently accessed host for setting up connections and managing data. However, you can use a custom host for staging environments that do not fall under the CNAME setups created for existing Utiq domains. The customUtiqHost configuration entry allows the use of a host different from the one accessed when visiting a specific website.

Example:

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  customUtiqHost: "https://specified-utiq-domain",
};

In the setup above, all scripts and functions that would typically call https://accessed-domain will use https://specified-utiq-domain instead. This change requires a CNAME setup pointing to frontend.prod.utiq-aws.net. You can use this configuration for staging or test environments.

consentManagerOrigin

This configuration option allows to specify a custom origin (string value) for the Utiq consent manager script. This is useful when the consent manager is hosted on a different domain than the one where the Utiq loader script is loaded from. The value must be a valid origin, e.g. https://subdomain.other-utiq-enabled-source-domain.com.

Example:

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  consentManagerOrigin: "https://subdomain.other-utiq-enabled-source-domain.com",
};
(() => {
  const s = document.createElement("script")
  s.type = 'text/javascript';
  s.src = "https://utiq.main-domain.com/utiqLoader.js"
  document.head.appendChild(s)
})();

consentManagerDataLayer

When using the Utiq Consent Manager you can enable event tracking for the pop-up actions by adding a consentManagerDataLayer configuration entry to Utiq.config:

window.Utiq = window.Utiq || {};
window.Utiq.config = {
  ...
  consentManagerDataLayer: true,
  ...
};

The following information is pushed into Utiq’s consentManagerDataLayer, based on performed actions:

1. When Consent Manager popup window is shown:

```
{
  event_name: 'page_view',
  event_action: 'show',
  event_category: 'consent',
  event_label: 'consent_window_show'
}
```

2. When the “Accept” button is clicked:

```
{
  event_name: 'ui_interaction',
  event_action: 'click',
  event_category: 'consent',
  event_label: 'accepted'
}
```

3. When the “Reject” button is clicked:

```
{
  event_name: 'ui_interaction',
  event_action: 'click',
  event_category: 'consent',
  event_label: 'rejected'
}
```

Please note, this implementation must adhere to the “Partner Privacy Requirements”. Specifically, the partner must ensure that this option is enabled only if the user has provided consent to analytics purposes in the Brand/Publisher’s CMP.