Using the JavaScript Events API

The EngageBox JavaScript Events API is extremely powerful, providing a set of events on which you can bind your custom Javascript functionality to further extend EngageBox to suit your specific needs.

Methods

Open

Open the box

$("#rstbox_1").trigger("open");

Close

Close the box

$("#rstbox_1").trigger("close");

Close and Keep Hidden

Close the box and keep it hidden using the duration you have set on the After Close Stay Hidden field.

$("#rstbox_1").trigger("closeKeep");

Set the cookie expiration time

Manually set the time you want the box to stay hidden. This command overrides the After Close Stay Hidden and the Cookie Duration field values.

In Seconds

$("#rstbox_1").trigger("setCookie", ["seconds", 200]);

In Minutes

$("#rstbox_1").trigger("setCookie", ["minutes", 120]);

In Hours

$("#rstbox_1").trigger("setCookie", ["hours", 12]);

In days

$("#rstbox_1").trigger("setCookie", ["days", 7]);

For Ever

$("#rstbox_1").trigger("setCookie", ["ever"]);

For Session

$("#rstbox_1").trigger("setCookie", ["session"]);

Remove the Expiration Cookie

$("#rstbox_1").trigger("setCookie", ["remove"]);

Box Events

beforeOpen

This event fires before the box opens

$("#rstbox_1").on("beforeOpen", function() {
	// your code
});

afteropen

This event fires after the box opens

$("#rstbox_1").on("afterOpen", function() {
	// your code
});

beforeClose

This event fires before the box closes

$("#rstbox_1").on("beforeClose", function() {
	// your code
});

afterclose

This event fires after the box closes

$("#rstbox_1").on("afterClose", function() {
	// your code
});

Global Events

There are times when you want to hook and manipulate multiple boxes at once. This can be easily done with the global events which are events that are triggered on the document.

eboxBeforeOpen

This event is fired before a box has opened

$(document).on("eboxBeforeOpen", function(event, boxID, box) {
	// your code
});

eboxBeforeClose

This event is fired before a box has closed

$(document).on("eboxBeforeClose", function(event, boxID, box) {
	// your code
});

eboxAfterOpen

This event is fired after a box has opened

$(document).on("eboxAfterOpen", function(event, boxID, box) {
	// your code
});

eboxAfterClose

This event is fired after a box has closed

$(document).on("eboxAfterClose", function(event, boxID, box) {
	// your code
});

One-Time Events

There are times when you want to attach a handler to a box's event that is executed at most once per box per event type. Just replace the jQuery on method to one.

Firing once the afterOpen event

$("#rstbox_1").one("afterOpen", function() {
	// your code
});

Firing once the afterClose event

$("#rstbox_1").one("afterClose", function() {
	// your code
});

Notes

Document ready combined with self enclosure

Please note that any above example will not work unless you wrap it with the Combined Document Ready - Self Enclosure snippet.

jQuery(function($) {
	// your code goes here
});

Note: The above code blocks refair to the box with id #1 for demonstration purposes. Replace this number with your box's id.

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.