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.

    • Related Articles

    • How to set up interaction actions

      In Visily, actions help you turn prototype interactions into real user flows, such as navigating between screens, going back, opening overlays, or closing overlays. Before you start To set up or edit interaction actions, switch your board to ...

    • How to add interactions to a prototype

      Prototype interactions let you connect screens or elements and define what happens when users interact with them. Before you start Make sure your board has the screens or elements you want to connect. To add or edit interactions, switch your board to ...

    • How to create a prototype with AI

      Use Create prototype with AI to quickly build an interactive flow from selected screens. Visily automatically connects the screens with interaction links, helping you visualize the user journey faster. Before you start Make sure your board has at ...

    • How to use Quick Preview to review your prototype

      Use Quick Preview to test your prototype directly on the canvas as you design. It’s useful for quick checks and fast edits, with live sync reflecting your changes immediately. Before you start Switch your board to Prototype mode. Make sure your ...

    • What you can do with the Visily AI Chat Assistant

      This article gives an overview of how you can use the Visily AI Chat Assistant to support your design process. What you can do with the Visily AI Chat Assistant The Visily AI Chat Assistant helps you generate and refine designs throughout your design ...