How to Customize Your Consent Manager Widgets

You have several options for customizing the appearance and behavior of the Consent Manager widgets to match your website and preferences. You will find many settings in your Privacy Center's Website Consent section:

From here, you'll find configuration allowing you to adjust the banner's theme color, icon color, screen position, and more.

JavaScript

Optional Configuration

There is additional configuration available for developers who want to adjust the JavaScript and/or CSS of the banner beyond the streamlined options offered in the product. In order to enable these advanced configuration options, you must select "Allow Custom Styles" in the Consent Banner configuration. This setting allows the banner to be affected by your website's styles and scripts, so only turn it on if you have a specific need to customize the banner in the following advanced ways.

Supported behavioral override flags for window.polarisOptions (specify this variable in a script tag before the polaris.js script):

Setting

Type

Default

Description

hideCookieButton

boolean

false

Show or hide the Consent Manager Cookie Button that allows the user to activate the Consent Manager Modal. If you change the value to “true,” the Cookie Button will not appear.

NOTE: This only applies to users who have already registered their consent preferences. First-time users will still see the Consent Manager Banner.

Example

window.polarisOptions = { hideCookieButton: true }

Targeted Customization of Banner Elements

For advanced customization with JavaScript, all the elements have an ‘id’ and CSS classes that can be used as selectors. Inspect the HTML source code to identify the most suitable selectors for your requirements.

See JavaScript HTML DOM Elements for more information.

CSS Styles

Below are the default CSS variables for the Consent Manager Widgets. You may override any of these variables on your page.

See CSS Overriding Variables for more information.

#polaris-consent-widgets {   --padding: 16px;   --shadow: rgba(0, 0, 0, 0.25);    --fab-zindex: 999999;   --banner-zindex: 999999;   --modal-zindex: 999999;    --container-width-desktop: 1140px;   --container-width-tablet: 720px;   --container-width-mobile: 396px;    /* Buttons */   --button-border-radius: 0;    /* Colors */   --link-color: #007bbd;   --success: #5331c6;    --white: #fff;   --gray-lighter: #ececec;   --gray-light: #b4b4b4;   --gray: #7c7c7c;   --gray-dark: #444444;   --gray-darker: #212121;   --black: #000;    --border: var(--gray-light);   --border-dark: var(--gray-dark);   --surface: var(--white);   --text: var(--gray-darker);   --primary: var(--gray-dark);   --primary-contrast: var(--white);    /* Fonts */   --font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,     helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;   --heading-font-family: var(--font-family);   --button-font-family: var(--font-family);    --size-base: 14px;    --size-h1: calc(var(--size-base) * 1.5);   --size-h2: calc(var(--size-base) * 1.25);   --size-h3: calc(var(--size-base) * 1.125);   --size-h4: calc(var(--size-base) * 1);   --size-h5: calc(var(--size-base) * 0.95);   --size-h6: calc(var(--size-base) * 0.85);    --size-sm: calc(var(--size-base) * 0.85);   --size-xs: calc(var(--size-base) * 0.5);    /* Modal */   --modal-max-width: #{$tablet-breakpoint}; }