The Privacy Suite for WordPress

Create a Cookie Banner with Elementor Popups

Get compliant today in the European Union, United States, Canada, United Kingdom, Australia & South Africa with the only Privacy Suite for WordPress that offers a fully-featured plugin for Worldwide Compliance.

Did you know you can create a Cookie Banner with Elementor, while using Complianz’ consent management functionalities? If you built your website with Elementor, you will have no problem following this guide.

This guide will feature Complianz and Elementor Pro, which features ‘Popups’. We will create a Popup template with Cookie Banner functionality.

A Basic Example

We will start by creating the below category banner. This cookie banner can be used for all opt-in regions and privacy laws, e.g. GDPR, DSGVO, CNIL etc. You can download this example here.

For an opt-out banner, you can follow the same guideline, but omit the “Dismiss” and “Save settings” buttons.

A Basic Example - What you will need

We will continue this guide with a step-by-step explanation of how to configure this pop-up. If you’re accustomed to Elementor and are ready to create your own banner, the below summary will list everything you will need.

The categories are implemented by shortcode:
cmplz-manage-consent - Don't forget to add the brackets [] 
The Accept All button should have the following CSS classes:
cc-accept-all cc-btn-no-href
Make sure the button closes the pop-up and is set to ‘Don’t Show Again’.

The Dismiss button should have the following CSS classes:

cc-dismiss cc-btn-no-href

Make sure the button closes the pop-up and is set to ‘Don’t Show Again’.

Because the categories are saved during every change, ‘Save settings’ should only close the pop-up. Make sure the button closes the pop-up and is set to ‘Don’t Show Again’.

To hide Complianz we will start with the below CSS. In future updates, we will improve integration with Elementor.

.cc-window, .cc-revoke {display:none!important;}

Step-by-Step configuring an Elementor Popup

We start this guide assuming you have selected a popup in Elementor – Templates – Popups, and are ready to add the necessary elements.

1. Adding the categories

Choose the ‘Shortcode’ element and add

cmplz-manage-consent - Don't forget the brackets []

to your popup. This will load the categories as configured for your website, and styled under Cookie banner settings in Complianz.

2. Adding the CSS classes

To make sure the buttons work as expected, you will need to assign the right classes to the buttons as summarized above. To add CSS to a button, go to the Edit screen of the specific button and click ‘Advanced’. Here you can the necessary classes.

Accept All

cc-accept-all cc-btn-no-href

Dismiss

cc-dismiss cc-btn-no-href

Save settings

No CSS Class needed

3. Elementor Popup settings

To make sure the pop-up behaves accordingly with the input, instead of triggers and rules from Elementor, the following settings are recommended:

1. Every button should close the popup when clicked, and force the popup not to reappear. This should be configured for every button. In the Link field, click “Dynamic Tags” and select the “Popup” action. Then click the Wrench icon to adjust its settings.

elementor-dynamic-tags

2. Under Popup Settings – Advanced, you should enable “Prevent Closing on Overlay” and “On Escape/ESC key”, because we cannot assign CSS classes to these triggers. 

Tip: You can add a CSS class as shown below to create a revoke button or hyperlink in your footer which triggers the popup.

3. Publish your popup by triggering the popup on page load.

Advanced settings

If you’re using GEO IP with an opt-out banner in certain regions you can modify the above banner with some custom CSS to remove unneeded buttons and categories.

1. Adding an Opt-out banner for other regions

In opt-out regions, the cookie blocker will release all scripts until the user revokes their implicit consent. An easy way to adapt to opt-out regions is with some CSS: 1. You will need to add another CSS class to each element that should be invisible in opt-out regions. For example:
.cmplz-region
In this example, we added this class to DismissSave settings and the Consent Shortcode. 2 You can now proceed to add some CSS to hide these buttons when the body class .cmplz-optout is present. Use the custom CSS under advanced under Popup settings as shown here:
.cmplz-optout .cmplz-region {
display:none;
}

This results in an opt-out banner, when relevant. For more CSS customization, check out our documentation.

2. Adding a region dependent cookie policy link

If you’re using GEO IP you can redirect the Cookie Policy link based on region by appending a parameter to your URL.  For example:
https://yourdomain.com/cookie-policy?cmplz_region_redirect=true

NB.  This works for all documents available in multiple regions. This will not work for example with the Impressum, Disclaimer, Terms & Conditions or Do Not Sell My Personal Information.

2. Revoke button

Previously we added a CSS class under the advanced tab of the popup settings. In the field: Open by Selector. When you add this CSS class to a button or hyperlink you can reopen the popup so your user can revoke or change their consent.

Download for Elementor

Here you can download the template for Elementor, you will still need to check the settings.
Elementor

Recent articles

The Privacy Suite for WordPress
Get compliant today with the only Privacy Suite made for WordPress

Categories

Popular articles

LGPD Brazil and WordPress

The “Marco Civil” and the Brazilian General Data Protection Law (LGPD) In Complianz 5.4 we will add full support for the Civil Rights Framework for

Read More

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!