Appearance

If you are looking for a discreet, less obtrusive cookie banner solution and also to increase the banner clickthrough rate, then check the Cookie Control 'notify' initial state with which your visitors can make their choice faster and at the same time have access to the Settings. You can always try this option using the Configuration Sandbox in your user area.

Cookie Control also supports the DWP Consent to cookies pattern for Drupal 8/9 and Wordpress websites. The DWP pattern is an extension of the Design System devised by GOV.UK, as a set of suggestions for Governmental organisations. For more information, please read the implementation steps for the Drupal module or the Wordpress plugin plugin.

This section introduces properties that can be used to customise how Cookie Control appears to your users.

From version 9 and up, Cookie control is WCAG 2.2 level AA compliant.

All properties discussed are entirely optional and Cookie Control will use sensible defaults for any property not present in your configuration - so you only need to include those that you wish to overwrite.

Anchor point for Initial Display Initial Display

By default, Cookie Control will present the main preference panel to users until they acknowledge its presence - by either interacting with the tool to set their preferences or explicitly close the panel.

This behaviour is determined by the properties initialState and notifyOnce and may be altered to more subtle forms of notification if you have a pro licence.

`initialState`	Determines how Cookie Control should be presented for users first visiting a site (or returning after a valid record of consent has lapsed). Can be either "open", "closed","notify", "top", or "box".
`notifyOnce`	Expects a boolean value to determine whether the initialState should only be for user's first visit, or continue for subsquent visits until the user directly interacts with the tool.

If you choose to use the property initialState: "CLOSED", then please be aware you are taking on extra responsibility for protecting people’s rights and interests; and must make alternative provisions for making your users aware of the cookies you intend to use.

Due to TCF v2 policies and specifications, the use of more subtle opening interfaces like notify is prohibited. Certain text must be visible on the initial load without any user action - this means that Cookie Control can only support initialState: "OPEN" when iabCMP is enabled.

Anchor point for Main Preference Panel Main Preference Panel

By default, the main preference panel appears as a full-height panel that slides in from the right-hand side of the user's screen, using light text on a dark background.

This can be customised using the properties layout, position and theme respectively.

`layout`	PRO Determines how Cookie Control's main preference panel should be presented. Can be either "slideout" or "popup" - a square modal dialogue that centers in the middle of the user's screen.
`position`	Determines the side of the display Cookie Control and it's corner icon will occupy. Can be either "left" or "right"
`theme`	Determines how Cookie Control should contrast control elements. Can either be against a light (#eaeaea) or dark (#313147) background.

Anchor point for Panel Controls Panel Controls

By default, Cookie Control offers users a convenient means to Accept and Reject all available options via a single action, as well as dismiss the tool entirely (via a typical X icon found at the top right of panels).

Most of these properties, along with their behaviour can be customised with the following properties, though Cookie Control does not make it possible to set up road block style Cookie Walls where it is inconvenient for users to do anything other than accept. At the very least, the main preference panel should always be easily accessible from any type of notify display as we believe this is integral to GDPR compliance. For more information on this matter, please read the ICO's guidance.

`acceptButton`	Expects a boolean value to determine whether an accept button should appear after introductory text on both notification and main preference panels.
`rejectButton`	Expects a boolean value to determine whether a reject button should appear after introductory text on both notification and main preference panels.
`closeOnGlobalChange`	Expects a boolean value to determine whether the main preference panel should close after the user interacts with either the accept or reject buttons added via the properties acceptButtons and rejectButtons.
`closeStyle`	Determines how the dismiss control button should be presented on the main preference panel. Can be either as a simple icon, labelled where the icon is extended with a visible label, or as a button that appears at the bottom of the main preference panel.
`toggleType`	Determines whether granular controls should be presented as a checkbox, or as a more decorative slider.
`notifyDismissButton`	Expects a boolean value to determine whether the dismiss control should be present within notification panels.
`settingsStyle`	Determines how the access control for the main settings panel should be displayed from the notification panel. Can be either button or link

Anchor point for Default Values Default Values

For convenience, you may extend your configuration with all of the properties discussed on this page and their default values by adding the following snippet:

const config = {
    // apiKey and other settings...
    initialState: 'open',   // 'notify','top','box' require pro licence
    notifyOnce: false,
    layout: 'slideout',
    position: 'right',
    theme: 'dark',
    acceptButton: true,
    rejectButton: true,
    closeOnGlobalChange: true,
    closeStyle: 'icon',
    toggleType: 'slider',
    notifyDismissButton: true,
    settingsStyle: 'link'
};

Anchor point for Accessibility Options Accessibility Options

You may use the accessibility property to customise accessibility helper preferences, also customise certain accessibility options, such as whether Cookie Control dims the main site with an overlay when active.

The number of child properties you wish to add is entirely up to you, as Cookie Control will simply use the default value when a property is not supplied. This means you only need to include those you wish to overwrite.

`accessKey`	Defines who the contained language settings would be appropriate for.
`highlightFocus`	Determines if the module should use more accentuated styling to highlight elements in focus, or use the browser's outline default. If enabled, this property uses CSS filters to invert the module's colours. This should hopefully mean that a higher visual contrast is achieved, even with a custom branding.
`outline`	Determines if the module should show the browser's default outline styling on elements. It can be combined with highlightFocus to add both a highlight and an outline to focused elements.
`overlay`	Determines if the module should use an overlay to accentuate the presence of an open notification bar or panel and discourage use of the main site while these elements are open. This property is recommended for accessibility purposes and enabled by default. Even if disabled, interaction with the site behind is not possible if the popup layout is enabled.
`disableSiteScrolling`	Determines whether background content scrolling should be disabled when either the notification bar or panel are open.

The title on the Cookie Control banner has become a H1 title for accessibility reasons. In some cases this might affect SEO. If you want to change it to H3 please set the following configuration changes detailed on this example.

In this example, wrapInnerHTML: true will set all semantic markup like h1 or p to div elements. SetInnerHTML: true will then allow you to write the desired HTML tag within the text property.

Anchor point for Custom Branding Custom Branding

It is also possible for users with a pro licence to use the branding property to overwrite Cookie Control styling with specific rules to better compliment the colours and typography of your website.

If this is of interest, please see the dedicated support article on branding.

Optional Categories

Text

On this page: