Create a Cookie Based Age Verification Popup

Create a Cookie Based Age Verification Popup

A tutorial which helps you create a Cookie Based Age Verification Popup for your visitors to confirm their age before viewing the content of your website using Engage Box.

Create a new Box

  • Go to Components -> Engage Box and create a new Box by clicking on the "New" button from the top bar
  • Set a Box title
  • Set the Box Type to Custom Text

Custom Text

Except from the custom text you'll also probably need to provide two buttons for your visitors to choose which course they'll take, stay or leave. I've prepared a sample code for you that makes use of the Bootstrap's classes in order to style the box.

Sample Code:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua 
ut enim ad minim veniam.</p>
<a class="btn btn-primary btn-lg" data-rstbox-command="closeKeep" href="#">
    Enter
</a>
<a class="btn btn-danger btn-lg" href="http://www.google.com/">
    Exit
</a>

The first element is just a paragraph. You should replace the text with your own.

The second element is a button that closes the box, sets the cookie expiration as well and the user stays on the website.

The third element is a button that redirects the user to www.google.com.

Trigger

  • Set the Position to Center
  • Set the Trigger Point to onPageReady or onPageLoad
  • Set the After Close Stay Hidden option to 30 days.

Appearance

  • Set the Box Width to 500px
  • Set the Box Height to 250px
  • Set the Box Padding to 20px
  • Set your preferred colors
  • Enable the Vertical Center Content option
  • Enable the Background Overlay but disable the Close on Click option
  • Set the Hide Close Button to Yes

Finishing Touches

  • Set your preferred Publishing Assignments
  • Optionally you can center-align all the box content by applying the "text-center" class to the Class Suffix field. (Advanced tab).

Notes

For advanced styling use the Custom CSS field under the Appearance tab.

Downloads

Find the download links to the extensions you have a valid subscription for.

View Downloads

Documentation

Read a growing list of tutorials, articles and frequently asked questions.

Read Documentation

Subscriptions

A detailed list with your active or expired subscriptions.

View Subscriptions

Old Releases

Download older releases of the extensions you have a valid subscription for.

Download Old Releases

Help me Grow

If you love using my extensions or have had a positive experience I am asking you to spread the word.

Write a Review on JED

Support

I am always happy to help! If you can't find answers, feel free to send me a message.

Contact me
×
×
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.