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.
- open (Show the popup)
- close (Close the popup)
- closeKeep (Close the popup and keep it hidden)
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 Set Cookie Expiration
<button data-ebox="1" data-ebox-cmd="closeKeep"> Close me! </button>
Close Box and Follow Link URL
<a href="http://www.google.gr" data-ebox="1" data-ebox-cmd="close" data-ebox-prevent="0"> Close and Return to Google.gr </a>
Toggle Open/Close State
<a href="#" data-ebox="1"> Toggle Open/Close State </a>
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! </button>