European and American laws require that digital publishers give visitors to their sites and apps information about their use of cookies and other forms of local storage. These laws also require that consent be obtained.
The implementation of such notice can vary from website to website. We have chosen to explain in this tutorial the most common use case which is a box with some informational text and an "I understand" button
What content should you add
- Go to Components > Engage Box
- Click New from the top bar
- Enter a popup title in the Title field
- Select Freetext from the Box Type drop-down list
- Click Toggle Editor and type your HTML like the one shown in the screenshot
How do you trigger it correctly
- Click the Trigger tab
- Choose on Page Load for a Trigger Point
- Choose your desired Cookie duration. A 30-day Cookie should be suitable.
How should you style it
The styling of it is of course optional. You can follow these steps for a good start if Bootstrap is used by your template.
Click the Advanced tab and type in your Custom CSS textbox the following CSS
.rstboxes .rstboxCookieBar {
overflow:hidden;
font-size:16px;
}
.rstboxes .rstboxCookieBar .btn {
margin-left:20px;
}
.rstboxes .rstboxCookieBar .rstbox-close:hover {
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
}
.rstboxes .rstboxCookieBar .rstbox-close {
background-color: rgba(0, 0, 0, 0.7);
height: 100%;
line-height: 0;
padding: 18px;
}
@media only screen and (max-width:1024px) {
.rstboxes .rstboxCookieBar .rstbox-close {
display:none;
}
}
Then set the Class Suffix option to rstboxCookieBar. Save and close!
Note
EngageBox purpose is to just display the text given in the Content tab and it doesn't prevent cookies from being stored on the visitors browser.