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.
CMP
If you need not to show Utiq separate pop-up, you will need to add CMP: "none"
in Utiq.config. Use cases would be not showing pop-up on Manage Utiq page, on Privacy Policy page and/or if you want to run an A/B testing.
window.Utiq = window.Utiq || {};
window.Utiq.config = {
CMP: "none",
};
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: {
language: "en" // en, de, es, fr or it - optional
websiteLogoUrl: "https://www.example.com/images/logo.svg",
buttons: {
bodyColor: '#ff0066',
textColor: '#000000',
radius: 5,
},
hyperlinks: {
color: '#ebc807', // hex code - optional
colorOnHover: '#ebc807', // hex code - optional
isUnderlined: true, // true OR false - optional (default is false)
},
contentTextColor: '#000000'
},
};
All values are optional and their values default to Utiq’s default styling if not provided. Specifically they are as follows:
language
- Change language dynamically, in case you have language selector in your site. If not set, the language will fallback to default.websiteLogoUrl
- Website logo to show on top right corner. This should be a public available URL, with logo in .svg formatbuttons.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.hyperlinks.color
- Bespoke color for hyperlinks, if you face CSS issues. This should be a HEX color code, e.g. #ebc807.hyperlinks.colorOnHover
- Bespoke color for hyperlinks, on mouse-over, if you face CSS issues. This should be a HEX color code, e.g. #ebc807.hyperlinks.isUnderlined
- Bespoke underline for hyperlinks, if you face CSS issues. This should be a true or false, default is false.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:
When Consent Manager popup window is shown
:
```
{
event_name: 'page_view',
event_action: 'show',
event_category: 'consent',
event_label: 'consent_window_show'
}
```
When the “Accept” button is clicked
:
```
{
event_name: 'ui_interaction',
event_action: 'click',
event_category: 'consent',
event_label: 'accepted'
}
```
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.