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.

JS

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.

JS

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',
    domainListAnchorMargin: 200 // Optional - use to optimize auto-scroll margin to domain list paragraph, specifically for Manage Utiq page
  }
};

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 format
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.
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.
domainListAnchorMargin - Margin when clicking ‘other website(s)’ on pop-up and land on relevant paragraph in Manage Utiq. This should be in pixels, negative or positive.

`customizationCSS`

You can affect the Utiq pop-up CSS styles by setting them in the customizationCSS object. The CSS IDs correspond directly to pop-up elements, omitting the utiq__ prefix. For example, utiq__title-area becomes title-area.

JS

window.Utiq ||= {};
window.Utiq.config = {
  customizationCSS: {
	'title-area': 'font-family: TabletGothic,Helvetica;',
	button: 'background: #252525; color: #fff; border-radius: 4px;',
	p: 'color: #000; font-size: 14px; font-family: TabletGothic,Helvetica;',
	a: 'color: #eb362e;',
	a_hover: 'color: #dfb0ae;'
  }
};

If both customizationOptions and customizationCSS are defined, then the styles in customizationCSS take priority.
The button style applies to both the Accept and Reject buttons, uniformly. Individual button styling is not allowed.
Restrictions apply to certain CSS properties to ensure pop-up responsiveness (e.g., width cannot be modified).
Link hover styles can be defined using the a_hover attribute.

`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:

JS

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:

JS

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)
})();

`integrations`

You can configure Utiq SDK for various integration options with other marketing solutions.

JS

window.Utiq ||= {};
window.Utiq.config = {
  integrations: {
    disableGoogleSecureSignals: true // If not set, false by default
  }
};

disableGoogleSecureSignals - Utiq SDK automatically sends adtechpass as Google Secure Signals to Google Ad Manager (GAM). If you don’t want Utiq SDK to send adtechpass, set to true

`logLevel`

This configuration allows you to define desired logging level. The logging level, stored in utiq_logging_level cookie, remains enabled until reset using the resetLoggingLevel method, detailed here.

silent
error
warn (default)
info
verbose (including DEBUG and TRACK messages)

JS

window.Utiq ||= {};
window.Utiq.config = {
  logLevel: <logLevel> // silent, error, warn (default), info, verbose (including DEBUG and TRACK messages)
};

You can also use query ?utiq_log_level=<logLevel> to set desired log level.

Make sure you don’t forget logging enabled on production, as it creates utiq_logging_level cookie to keep track of your choice.