Cookie-widget options

Standard options

Setting the display language

The cookie widget currently supports these languages, in the given jurisdictions:

Language

Supported in jurisdiction

Option value

English (EN)

All jurisdictions

None, or en-us

Danish (DA)

Denmark (DK)

da-dk

Dutch (NL)

Netherlands (NL)*

nl-nl

German (DE)

Germany (DE)*

de-de

*Our widget currently uses the rules from Denmark (DK) for this jurisdiction, with specific support for local rules planned for a future version.

Additional jurisdictions and languages will be added over time.

If you do not specify a language, or if the language you set is not supported by us in the visitor's jurisdiction, English will be used. The table above lists the supported combinations.

To set the display language, initialise your widget with the locale option set to the value for the language you desire. For example, to use Danish when the jurisdiction is Denmark, your widget's initialisation would look similar to this:

legal.widget({
type: "cookie",
widgetPublicKey: "...",
locale: "da-dk",
});

Pro plan options

These additional options are available when subscribing to the Pro plan for our cookie solution.

Change the button colours to match your own branding

The default button colours in the cookie widget can be changed to match your brand's colours, to provide a more seamless integration on your website. Any valid CSS colour is supported by legal.js.

The follow options are supported,

Option name

What it applies to

brandBackgroundColor

Primary buttons (e.g. Accept, Close):

  • background

  • border

Secondary buttons (e.g. Reject), to appear as the inverse of primary buttons:

  • border

  • text

brandTextColor

Primary buttons:

  • text

Secondary buttons, to appear as the inverse of primary buttons:

  • background

  • border

brandInteractionColor

When hovered over, tabbed to, or activated by a click/tap/keypress (analogous to the :hover, :focus, and :active CSS pseudoclasses). Primary buttons:

  • background

  • border

Secondary buttons:

  • background

  • border

To use colour branding, you must provide values for all of these options, or legal.js will not apply any of your colours and will log a warning to the browser console. This also means that you control how your text colour will contrast with your other colours, so you should ensure sufficient contrast for accessible legibility. There are tools to help with this.

The default colours look like this when there is no interaction:

If your brand's primary colour is #248cff and its interaction colour is #0986ed, and text against that background is coloured white, you would update the widget initialisation call like this to apply them:

legal.widget({
type: "cookie",
widgetPublicKey: "...",
brandBackgroundColor: "#248cff",
brandTextColor: "white",
brandInteractionColor: "#0986ed",
});

The widget buttons would then display like this when there is no interaction:

When the "No thanks" button is active, the buttons would display like this, with the interaction colour (in this case, a darker shade of the primary colour) used as the background:

When the "Accept" button is active, the buttons would display like this, again using the interaction colour:

This can be done under settings for your cookie widget.