Click Trigger

The "Click" Trigger fires when the visitor clicks on specified element(s). Below you can find how to set up a popup with "Click" trigger, all supported settings for this trigger explained as well as how to trigger it with the JavaScript Events API.

To set up your popup to trigger on Click go to your popup settings > Behavior Tab > Trigger Section and apply the following settings:

Under the Trigger setting, select Click.
Set the Trigger Element by specifying the ID or the Class of the element(s) that should fire this trigger. You can specify multiple elements separated by comma.
Set the delay of the trigger by entering a number in milliseconds in the Delay setting.

Trigger Settings

Below, you can find all configurable settings when you select the "Click" Trigger.

Setting	Value	Description
Trigger	Click	Triggers when the visitor clicks on an element on the page.
Trigger Element	.myElement	Specify the ID or the Class of the element(s) that should fire this trigger. You can specify multiple elements separated by comma. Example 1: .item-100, .item-101 Example 2: #logo Keep in mind that query selectors must always begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers
Delay	0	Delay trigger in miliseconds. Leave 0 for immediate execution or enter 2000 for 2 seconds delay. If the trigger is set to onElementHover then this value is used to delay or prevent the accidental firing of the popup and attempts to determine the user's intent. It is recommended to use at least 30 ms.

Use Cases

A use case would be to have a play button on your page to display a video. This play button can trigger a popup that holds the video you want your users to see, which can have a background overlay to remove distractions from your users in order to enjoy the video.

Frequently Asked Questions

How to Trigger using JavaScript

Using the JavaScript Events API v2, you can configure any popup to be triggered using the "Click" Trigger. Below you can find a JavaScript snippet:

EngageBox.onReady(function() {
    // Get box instance
    const box = EngageBox.getInstance(5);

    box.bindTrigger('onClick', {
        trigger_selector: '.myDiv'
    });
});

You can read more on the JavaScript Events API documentation, Click Trigger.

How to create a click popup in Joomla

Trigger Settings

Use Cases

Open popup when the user clicks on any element on your page

Frequently Asked Questions

How to Trigger using JavaScript