Tassos Marinos Developer of Joomla Extensions

Open a box using HTML Attributes

Published in EngageBox
Updated 17 Feb, 2021

Would you like to open or close a box by clicking on a link or a button? What about an image or a div? It's easy with HTML attributes!

In order to use HTML attributes you will need the box's ID and access to your HTML code.

Where to find the Box ID?

Go to your Components -> EngageBox -> List 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)


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 Follow Link URL

<a data-ebox="1" data-ebox-cmd="close" data-ebox-prevent="0" href="http://www.google.gr">
    Close and Return to Google.gr

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. EngageBox will try to discover the closest box automatically.

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