Interactions are fundamental to how users engage with your web content. Actions like clicking, scrolling, or hovering on a screen can significantly enhance the user experience and increase reader engagement.
For interactions, there are three terms you should know:
Trigger | The trigger is the activating behavior, such as clicking on a component or scrolling the view. |
Action | The action specifies what should happen when the trigger activates. |
Target | The target defines where the action should take effect. |
Delve deeper into different trigger types and actions by visiting our comprehensive guide.
Adding interactions
You can set up and edit interactions in two ways:
1. From the interactions tab
Select the component you want to add a trigger to.
In the editor's top right corner, click on "Interactions" to open the Interactions tab.
Add a trigger by selecting one from the suggested triggers or by clicking the "+" button.
Specify the type of action you want when the trigger activates.
Choose your target component from the list or specify your conditions, depending on your selected trigger.
2. From the canvas
Hover over your component's outline until a "+" button appears.
Click and hold the "+" button, then drag it onto your target component to connect them.
By default, the trigger is set to a click, but you can change this in the interaction form that appears after connecting.
Choose the desired action.
After adding an interaction, don't forget to preview your project to ensure it functions as intended.
Editing interactions
To edit an interaction:
Click the interaction in the right panel or,
Click the interaction arrow on the canvas to open the form.
Alternatively, click the interaction icon from the layers panel.
Copying and pasting interactions
Click the copy button from the interactions tab, and click the paste button to paste it onto your selection.