How to install & add the Cookie Modal design component

In this article you'll learn how to install the Cookie Modal and add it to your excisting design layouts.

Installation

Warning: The modal on itself cannot be used to handle cookie consent on your website. It is important to first activate the Cookie Settings module in your project.

Important: This cookie banner is not compatible with Internet Explorer and may make your website inaccessible on Internet Explorer.

Step 1. Design Application

To allow the modal to be customized by a designer, we chose to add the Cookie Modal to the SiteManager Design application as a design component.

Head over to Design App by clicking the menu icon in the top right corner of your screen and chosing 'Design Application'.

 

design-app

Step 2. Adding to layout

Choose a layout to which you wish to add the Cookie Modal to and click on the 'Edit Layout Style' icon.

 

layout-edit

 

Click on the 'Add Element To Footer' icon in the footer section of your layout and install the modal by clicking on the 'Add to site' button next to the Cookie Modal component under the section 'Special Elements'.

 

modal-install

Notice: After installing the modal be sure to save your current layout by clicking the 'Save Layout' button at the bottom of the left sidebar.

Caution: When your project is comprised of multiple layouts, it is important to link the modal component from the initial layout. Otherwise it could be possible that some pages of your website don't show the modal.

Step 3. Saving pre-set content

After the modal component has been added to your design layout(s), it will only show a list comprised of all Cookie Groups added via the Cookie Settings module.

Our SiteManager team added some prefilled content to help you on your way. To make this content visible it first has to be saved using the SiteManager Content application.

Head over to Layout content section of the Content App by clicking the 'Layout Options' button inside the main menu.

 

layout-options

 

Open the modal content settings by clicking the 'Edit Content' icon on the right-hand side and click on the 'Save' button.

 

layout-options-save

Step 4. Edit content & styling

When correctly installed, the modal will have a default look & feel with pre-set content. Learn how to change these settings by following the Manage the Cookie Modal guide.