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, Brazil & 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.

				
					/* Shortcode Categories Banner  */
<div id="cmplz-manage-consent-container-nojavascript">You have loaded the Cookie Policy without javascript support.&nbsp;On AMP, you can use the manage consent button on the bottom of the page.</div><div id="cmplz-manage-consent-container" name="cmplz-manage-consent-container" class="cmplz-manage-consent-container"></div>

/* CSS for Accept Button */
cmplz-btn cmplz-accept
/* CSS for Deny Button  */
cmplz-btn cmplz-deny
/* CSS for Save Button  */
cmplz-btn cmplz-save-preferences
/* Hide Complianz  */
.cmplz-cookie-banner, 
.cmplz-manage-consent {
display:none;
}
				
			

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

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.


				
					/* Shortcode Categories Banner  */
<div id="cmplz-manage-consent-container-nojavascript">You have loaded the Cookie Policy without javascript support.&nbsp;On AMP, you can use the manage consent button on the bottom of the page.</div><div id="cmplz-manage-consent-container" name="cmplz-manage-consent-container" class="cmplz-manage-consent-container"></div>

/* CSS for Accept Button */
cmplz-btn cmplz-accept
/* CSS for Deny Button  */
cmplz-btn cmplz-deny
/* CSS for Save Button  */
cmplz-btn cmplz-save-preferences
/* Hide Complianz  */
.cmplz-cookie-banner, 
.cmplz-manage-consent {
display:none;
}
				
			

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

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