BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Guide

Cookie Consent Pro

How to set up and style the Cookie Consent widget in Elementor.

Cookie Consent shows a notice as a bar or a box with Accept, Decline and Preferences buttons. Visitors can switch your own categories on or off, the choice is stored in a cookie, and scripts and iframes you mark for a category only start after consent. Use it on sites that load analytics, ads or embeds.

Part of: Bright Addons Pro. Before you start: Scripts and iframes must be marked with the data-bapro-consent attribute to be held back. Google Consent Mode needs a Google tag that sets the default consent state.

Set it up

  1. Add the Cookie Consent widget to a template that loads on every page, such as your footer.

  2. In Notice pick a Layout and write the Title, Message, Policy Link Text and button texts.

  3. In Categories add one row per group of cookies under Optional Categories, each with a Key, Name and Description.

  4. Mark each script you want to hold back: set its type to text/plain and add the attribute data-bapro-consent with the category key.

  5. In Behaviour set Remember the Choice For (days) and decide on Button to Change the Choice.

  6. Switch on Update Google Consent Mode if your Google tag uses it.

  7. Style the notice and buttons, then open the site in a private window to test.

Content options

Notice

Option What it does
Layout A bar at the bottom or top, or a box in the bottom left or right corner.
Title The heading of the notice.
Message The text that explains your use of cookies.
Policy Link Text The text of the link shown after the message.
Policy Link The policy page. Empty uses the privacy policy page set in Settings > Privacy.
Accept Button The text of the button that accepts all categories.
Decline Button The text of the button that keeps only necessary cookies. Empty hides it.
Preferences Button The text of the button that opens the category list. Empty hides it.

Categories

Option What it does
Necessary: Name The name of the category that is always on.
Necessary: Description A short text about the necessary category.
Optional Categories The list of categories visitors can switch on or off.
Key A lowercase key such as analytics or marketing. Scripts are tied to this key.
Name The category name visitors see.
Description A short text about what the category is used for.
Save Button The text of the button that saves the chosen categories.

Behaviour

Option What it does
Remember the Choice For (days) How long the consent cookie is kept, from 1 to 395 days.
Notice Version Change it to ask every visitor again.
Button to Change the Choice Shows a small corner button after the visitor has chosen.
Button Position Bottom Left or Bottom Right for that button.
Button Icon The icon of that button.
Update Google Consent Mode Sends a consent update to Google tags based on the analytics and marketing categories.
Bright Addons Pro

Unlock this and 79 more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.

Style options

These sections are in the Style tab.

  • Notice

    width, background, text color, border, radius, shadow, padding and stack order.

  • Title, Message and Link

    typography and colors of the title and message, link color and the switch color when on.

  • Accept and Save Buttons

    typography, normal and hover colors, border, radius and padding.

  • Decline Button

    typography, normal and hover colors, border, radius and padding.

  • Change Choice Button

    button and icon size, colors, border, radius and padding.

Tips

  • For an iframe use data-src instead of src and add the data-bapro-consent attribute with the category key.

  • With Google Consent Mode, the analytics key controls analytics storage and the marketing key controls the ad signals. Your Google tag must set the default denied state itself.

  • Only one notice per page is active. A second copy of the widget stays hidden.

  • The widget records and applies the choice. Which cookies your site sets and what your local law requires remain your responsibility.

Questions and answers

How do I block a script until the visitor accepts?

Change the script type to text/plain and add data-bapro-consent with the category key, for example analytics. The script starts as soon as that category is accepted.

What happens when a visitor presses Decline?

All optional categories are saved as off and only the necessary category stays on. The notice closes and the choice is remembered.

Can visitors change their mind later?

Yes. They can use the corner button or any link to #cookie-settings to open the notice again.

Why is the Preferences button missing?

It only appears when the Preferences Button text is filled in and at least one optional category has a valid key.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides