Customise your widget
This guide shows you how you can customise your widget to give it the look and feel of your own brand and website.

Video

Widget settings

Depending on your Legal Monster plan you'll have different styling options available in your Legal Monster dashboard.
Go to "Widgets" and select your cookie widget. Click on "Edit widget" to access the customisation options.
You'll have the option to choose between:
    Progressive consent. Recommended if you only collect one or two types of cookies, e.g. analytical or marketing. A discreet widget, focused on one consent at a time to keep conversions as high as possible, like when you give individual location permission in an App on your smartphone.
    Cookie wall. We give you the option to customise your cookie consent widget to fill the screen and fade out the page background. This ensures optimal engagement, compliantly. We make sure that the functionality still respects the user's rights.
You can also edit where the pop-up (only for progressive consent) is shown, and how the privacy shield is placed.

Integration styling

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
Norwegian (NO)
Norway (NO)*
no-no
Spanish (ES)
Spain (ES)*
es-es
French (FR)
France (FR)*
fr-fr
*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:
1
legal.widget({
2
type: "cookie",
3
widgetPublicKey: "...",
4
locale: "da-dk",
5
});
Copied!

Widget button colours

Some of the European data protection agencies, including the Danish and French, have issued cookie guidelines in which they mention that the “accept” vs “reject” buttons (also referred to as "accept all" vs "accept necessary" or "yes" vs "no") should have the same colour.
We therefore recommend that you take a look at your cookie pop-up and make sure that your cookie pop-up’s buttons have the same colours.
If you are using Legal Monster’s cookie solution, it's easy to change your buttons’ colour by following these steps:
    1.
    Log in to your Legal Monster account
    2.
    Go to “Widgets” (left side menu)
    3.
    Click the green “Customise your cookie widget” button for your cookie widget
    4.
    In the design view, change the colours of the buttons so that they are the same, as shown here:
Could not load image
If you choose to have different button colours, please note that this may be non-compliant and you should therefore consider this very carefully.
The default button colour setting in Legal Monster is that the buttons have the same colour. If your cookie pop-up buttons have different colours, it's at your own risk and responsibility.

Paid plan options

These additional styling options are available when subscribing to one of our paid plans.

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:
1
legal.widget({
2
type: "cookie",
3
widgetPublicKey: "...",
4
brandBackgroundColor: "#248cff",
5
brandTextColor: "white",
6
brandInteractionColor: "#0986ed",
7
});
Copied!
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:

Last modified 6mo ago