How To Create A Cookie Consent Popup

Create a cookie consent bottom bar.

You’ll learn how to:

• Edit a pre-designed popup template
• Close a popup on button click
• Set multiple conditions for controlling where a popup is displayed

Design The Popup And Its Content

1. Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)
2. Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, choose one of the Cookie Consent bottom bars.

Button > Content

Text: Enter “Accept & Close”.

Link > Popup

1. Don’t Show Again: Yes
2. Size: Medium

Button > Style

1. Color: Choose a color
2. Padding: Remove all padding

Right-click the Button widget’s handle, and select Duplicate. Now style this Button.

Button > Content

1. Text: Enter “Decline”
2. Link: Enter a link to a Terms of Use page that explains why cookies are needed.
3. Size: Medium

Button > Style

1. Background Color: Clear
2. Border Type: Solid
3. Border Width: 1 for Bottom only
4. Border Radius: 0 for all corners
5. Padding: 5 for Bottom only

Edit the text

Heading > Content

Alignment: Left.

Edit the Accept & Close button

Button > Content

Alignment: Justified.

Drag the text column so it is taking up a wider portion of the bar, and drag the Accept button column so it takes up less space. Adjust as desired.

Click the cog / gear icon  located at the bottom left of the panel to return to the Popup Settings.

Popup Settings > Settings

Overlay: Hide.

Popup Settings > Style

Color: Adjust the color as needed.

Popup Settings > Advanced

1. Prevent Closing on Overlay: Yes
2. Prevent Closing on ESC: Yes

Publish The Popup

Click the Publish button to set the Conditions, Triggers, and Advanced Rules.

Conditions

Click on Add Condition

1. Include: Entire Site
2. Exclude: Singlular > All Pages > Terms of Use page

Triggers

On Page Load: Yes at 0 seconds.

Click Save and Close button

All done. Go to your site and see it in action.

Note: This method is not GDPR compliant, as it does not store acceptance or block cookie scripts before consent. If you need to be GDPR compliant, please use a cookie consent plugin that is GDPR compliant instead.