Open a box using HTML Attributes

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!

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)

Syntax

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
</button>

Close Box using a div

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

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
</a>

Toggle Open/Close State

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

Note

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!
</button>