Triggers Overview

Video Tutorial:

Article:

Actions, triggers and behaviours are scripts you can set in motion to make elements and layers appear or disappear on your page.

Click on Actions in the top toolbar to bring up the Actions panel.

Page Triggers

At page level, triggers will be activated when the user is on your main page. Click on the dropdowns to set trigger, behaviour and subject.

Triggers

This is the action the user will take to trigger the behaviour.

Time - after a certain number of seconds have elapsed. If you choose this, you’ll be able to enter how long before the behaviour is activated.

Exit intent - when the user moves the mouse to the Back button, backspaces, or otherwise tries to leave the page.

Stay on page - you’ll need to configure an exit message to use this trigger: it activates when the user displays exit intent, and clicks cancel on your exit message to return to the page. Find out more here.

Behaviours

This is where you set what you want to happen after the trigger.

Show - immediately shows the element or layer.

Hide - immediately hides the element or layer.

Fade In - slowly shows the element or layer.

Fade Out - slowly hides the element or layer.

Subject

This is the element or layer you want the behaviour to happen to, after the trigger.

When you click this dropdown, you’ll see a list of your layers and named elements. Layers are great for pop-ups and opt-ins: click here to find out how to add a layer.

Applying actions to individual elements on your page is easy, but you’ll need to assign them names first. Simply select your element, and head to the Properties panel, then General Properties, and enter a name to see it in the Subject dropdown.

You don’t need to set the same trigger, action and behaviour for multiple elements if they’re contained within a panel - you can set the action to affect all contained elements. Find out how here.

Layer Triggers

At layer level, triggers will affect all elements contained within the layer. To choose the layer you want to configure, click the eye icon in the Layers panel to make it active. You can only configure actions for one layer at a time, and the name of the currently active layer will be displayed next to Layer Triggers in the Actions panel.

Triggers

This is the action the user will take to trigger the behaviour.

Time - after a certain number of seconds have elapsed. If you choose this, you’ll be able to enter how long before the behaviour is activated.

Click - when the user clicks inside the layer.

Behaviours and Subjects

Same as Page Triggers (see above).

Element Triggers

Select a target element to make triggers affect only the selected element. Remember to assign names to all elements you want to affect by selecting your element and heading to the Properties panel, then General Properties. Enter a name to see it in the Subject dropdown.

Triggers

Click - when the user clicks the element.

Mouse enter - when the user rolls the cursor within the element.

Mouse leave - when the user rolls the cursor back out of the element.

Scroll top into view - when the user scrolls down the page and the top of the element comes into view.

Scroll bottom into view - when the user scrolls down the page and the bottom of the element comes into view.

Behaviours and Subjects

Same as Page Triggers (see above).

By experimenting with combinations of Page, Layer and Element Triggers, and adding elements such as countdown timers and form inputs, you can create complex and interactive pages. See related articles for more.