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 can do so by altering the JavaScript and/or CSS styles of the widgets.

JavaScript

Optional Configuration

In addition to the required settings you configured during your initial setup, here are some optional settings you can configure.

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.
buttonPosition	string ('left'\|'right')	'left'	Position the Consent Manager Cookie Button on either the left or right side of the bottom of the window.

Example

window.polarisOptions = {
  ...
  hideCookieButton: false,
  buttonPosition: 'right'
}

Advanced Customization

For advanced customization with JavaScript, all the elements have an ‘id’ and CSS classes that can be used as selectors. Simply 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. Feel free to 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};
}