Showing boxes manually

You can configure your boxes to show instantly after loading the page, once a certain "trigger point" has been reached or never at all.

This can be useful if you don't want to automatically show your boxes but want them to appear at the click of a button or link instead.

There are various ways to go about this.

The following examples assume a box with ID 5

Using a shortcode

Boxzilla comes with a shortcode that generates a link to show or dismiss a box.

Using URL parameters.

To open a box via URL parameters, you'll have to add #boxzilla-5 to your links. This will then open the box with ID 5 after this link is clicked (or visited).

<a href="#boxzilla-5">Open box</a>

Using JavaScript

Another option is to use JavaScript inside your links. The plugin exposes a "Boxzilla" object to the current window which allows you to perform various actions.

To open or close a box using JavaScript, your links will look something like this, assuming Boxzilla box ID 5.

<a href="javascript:Boxzilla.show(5);">Open box</a>
<a href="javascript:Boxzilla.dismiss(5);">Close box</a>

A note on loading order

Please note that Boxzilla initializes on the window.load event. This means that if you are trying to show a box immediately after loading a page, you have to ensure your code runs after this event is fired:

window.addEventListener('load', () => {
   Boxzilla.show(500)
});