HTML Data Attributes

In order to trigger a box using the HTML Data attributes you will need the box's ID and access to your HTML code.

Where to find the Box ID?

Go to your Box Manager and look at the last column of the box list. This is your Box's ID.

Available Commands

  • open (Show the popup)
  • close (Close the popup)
  • closeKeep (Close the popup and keep it hidden)

Triggering on Click

The syntax is pretty straightforward. Let's see some examples using Box #1.

Show Box using a button

<button data-ebox="1" data-ebox-cmd="open">
    Open Popup

Close Box using a div

<div data-ebox="1" data-ebox-cmd="close">
    Close me!

Close Box and Set Cookie Expiration

<button href="#" data-ebox="1" data-ebox-cmd="closeKeep">
    Close me!

Close Box and Follow Link URL

<a href="" data-ebox="1" data-ebox-cmd="close" data-ebox-prevent="0">
    Close and Return to

Toggle Open/Close State

<a href="#" data-ebox="1">
    Toggle Open/Close State


The data-ebox attribute is optional for all elements within a box. Engage Box will try to discover the closest box automatically.

The following code implements a button that closes the box is placed in.

<button data-ebox-cmd="closeKeep">
    Hide me!


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

View Downloads


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

Read Documentation


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


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.