How interaction triggers work

How interaction triggers work

Use interaction triggers to control how users start an action in your prototype, such as moving to another screen or opening an overlay.

Before you start

  1. To add or edit triggers, switch your board to Prototype mode and select the screen or element where you want the interaction to start.
  2. An interaction works when its key settings are fully configured, including the trigger, action, and any related settings. The trigger defines when the interaction starts, while the action defines what happens next.

What is an interaction trigger?

An interaction trigger is the user behavior that starts a prototype action. In Visily, you can set an interaction to start from mouse actions, keyboard actions, or after a timeout. The available trigger options may vary depending on the selected screen or element.

Trigger types

Triggers with mouse action

  1. On click: Triggered when the user clicks or taps on an element. Suitable for buttons, cards, or icons.


  2. On hover: Triggered when the cursor hovers over an element. Useful for tooltips, previews, or quick info popups.


  3. On long press: Triggered when the user presses and holds. Common for mobile gestures.


  4. On drag: Triggered by dragging actions
    1. Element drag: For free movement or drag-and-drop interactions.


    2. Screen swipe: To simulate swipe-based navigation in specific directions. Ideal for mobile flows

Other triggers

  1. On timeout: Triggered after a defined delay in milliseconds. Ideal for timed transitions or auto-navigation.


  2. On keyboard shortcut: Triggered by a specific key combination. Helps simulate desktop shortcut behaviors.


  3. On press Enter: Triggered when pressing Enter after selecting and editing a text field component (e.g., text area, search box, dropdown, textbox). Commonly used for form submissions or searches.

Idea
Tip: You can choose a trigger based on the type of prototype behavior you want to create.
  1. Use On click for standard navigation, button actions, and most app or website flows.
  2. Use On hover for hover states, menus, tooltips, or desktop-style interactions.
  3. Use On drag for swipe, drag, carousel, or gesture-based experiences.
  4. Use On key press for keyboard-driven prototypes or shortcut-based interactions.
  5. Use On timeout for automatic transitions, such as splash screens, loading states, or onboarding flows.

Note

  1. The available trigger options may depend on the selected object and action type.
  2. Smart components, such as buttons, menus, and text fields, may already include built-in states like Hovered and Pressed in Presentation mode.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.