How to create a Cookie Law Box

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

engagebox-cookie-law-text

  • 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

engagebox-cookie-law-trigger-settings

  • 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.

engagebox-cookie-law-custom-css

  • Click the Advanced tab
  • 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);
        display: block;
        font-size: 35px;
        height: 100%;
        line-height: 0;
        padding: 38px 30px;
        right: 0;
        top: 0;
        width: auto;
    }
    
    @media only screen and (max-width:1024px) {
    	.rstboxes .rstboxCookieBar .rstbox-close {
    		display:none;
    	}
    }
    			
    		
  • Type rstboxCookieBar for a Class Suffix
  • Save and close!

Note

Of course you should also take a look at the Appearance tab and the Publishing Assignments tab before saving it. The choices for those tabs are strictly on a per-website basis therefore we aren't able to suggest something specific.

Get Engage Box for Joomla! for just 29€ Get it now!
Don't miss a thing!
Stay up-to-dated with my latest blog articles
Receive updates for my Joomla Extensions
No Spam! It's a promise.
BLACK FRIDAY SALE 30% off any Tassos.gr extension. Coupon code BLACKMONDAY17