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. 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. 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.
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
.cmplz-region.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.
