Interactions is currently in Beta and can be accessed by following these steps:
From the Dashboard, click on your user name at the top of the left panel, or click this link to get there.
Navigate to the bottom-right of your profile page and find "Experimental features".
Toggle on Interactions & Slider to turn the feature on for your user
Note: Features in beta are still being actively worked on, so you might experience unexpected behaviors or errors when using them. If you ever come across this, please send our friendly Support team a message so we can improve the feature. Just click the chat bubble in the bottom-right corner of your screen to send feedback.
This article gives an overview of the triggers, conditions, and actions you can utilize when working with interactions.
List of triggers
Overview of which triggers you can use and the definition of when they activate.
Trigger | Triggers when |
On click | User clicks a component |
On mouse down | User holding a click |
On mouse up | User releasing a click |
On mouse enter | User drags cursor on top a component |
On mouse leave | User drags cursor outside of a component |
On double click | User double-clicks a component |
Upon entering view | Component appear on the users screen |
Upon leaving view | Component disappear from the users screen |
On key down (key pressed) | User pressing and holding a keyboard button |
On key up (key released) | User releasing a keyboard button |
On scroll | User scrolls a page up or down |
On timer | Time hits 0 |
List of conditions
Overview of which conditions you can use, what their definition are, and with what trigger you can use them.
If trigger is | Condition name | Condition definition | Input value |
On scroll | Distance from top (px) | Number of pixels scrolled from the top of the page. | From 0 to your total page height in pixels. |
On scroll | Distance from top (%) | How much of the page scrolled in percentage. | From 0 to 100%. |
On timer | Delay | Countdown in milliseconds from a set time interval. | From 0 and up. |
On key down | Key | A key selected from the keyboard. | Keyboard event key. Read full overview. |
Actions
Overview of which actions you can use, what their definition are, and when they are compatible.
If target is any component
Action name | Action definition |
Show | Component becomes visible. |
Hide | Component becomes invisible. |
Toggle visbility | Component becomes visible if it is invisible and vice versa. |
Scroll to element | Component scrolls the view to the target component. |
If target is a Link
Action name | Action definition |
Go to URL | Component goes to an URL either in the same or a new tab. |
Send email | Component opens email service. |
Call phone number | Component opens service to call a phone number. |
Download file | Component downloads a file. |
Send SMS | Component opens service to send a SMS. |
If target is a Slider component
Action name | Action definition |
Go to next slide | Component goes to the next slide. |
Go to previous slide | Component goes to the previous slide. |
Go to a specific slide | Component goes only to a specific slide number. |
If target is a Page
Action name | Action definition |
Open page | Component opens a page. |