Triggers in Inline Manual
With triggers, you can react to user activity and bring them to the next step in reaching their goals. It’s the most important component that advances a user’s progress through your walkthrough. You can respond to actions such as a click or hover on assigned elements. For example, you can use a trigger on a step which says "if the user clicks the assigned element, then go to another step."
The default triggers in the Step Options panel will suit most needs. However, you can take advantage of the Triggers panel for advanced control and customization.
In this article, we’ll discuss available trigger options in Inline Manual and how to use them.
While adding a step in your walkthrough, at the bottom of the Step Options panel, you can assign triggers to react to user actions such as clicking the element assigned to that step. The default action is to advance to the next step.
In the Step Options panel, you can assign only one trigger per step. You can add more triggers under the Triggers panel.
Available triggers in the Step Options Panel:
Click - advances to the next step upon clicking the assigned element, such as a button or link.
Mouse over - advances to the next step when the mouse is over the assigned element. This is useful for drop-down menus. (Working with drop-down menus? Read the tutorial for managing drop-down menus with triggers.)
Focus - advances to the next step when the user clicks on the form field.
Blur - advances to the next step when an element loses focus.
Keypress - advances to the next step when the user starts typing.
Change - advances to the next step when the select value changes. This is useful for form select inputs.
Refresh - advances to the next step when the page is reloaded.
Below the trigger panel, you will find Previous, Next and End buttons which will allow you to add a Previous, Next or End Buttons to the step to allow your users to either go back to the Previous step, advance to the Next step or to End the walkthrough. You can learn more about buttons in the popover here.
With the Triggers panel, you can edit triggers you added in the Step Options panel, and add new ones to react to multiple interactions in one step.
To open the Triggers panel:
- In the Authoring tool, while you’re editing or adding a walkthrough or a tooltip, select a step from a list of steps or click “+” to create a new one.
- Scroll down to the Triggers panel and expand the tab. Now, you see the Triggers panel.
Let’s start with explaining what a trigger is made of. The trigger is made of the following parts:
· An On (event) - what does the user do? Click an element, hover over an element;
· A reaction - what should happen? Jump to a step in the walkthrough, launch another walkthrough or deactivate the walkthrough.
· An assigned element - what are users interacting within your application? By default, this is the step element, but each trigger can be assigned to its own element.
In more details:
· An element assigned
To assign an element, click the Assign element button and hover over your UI to select an element. The Authoring tool will select the most specific combination of CSS selectors, and the default option is usually the best.
However, to manually set the selector, click the Expert button to edit.
· On (Event)
With On (Event), you can select the type of user action you want to respond to. These actions include users making choices such as clicking an element or starting to drag an element. You can also respond to less-explicit actions such as mouse over, mouse enter and mouse leave.
- Mouse over
- Mouse enter
- Mouse leave
- Drag start
- Drag enter
- Drag leave
- Drag over
- Drag end
Go to Step - indicates which step you want to advance to. You can choose a relative step such as the Previous or Next step. Or you can choose any step in your walkthrough. The menu will list all of the steps in your walkthrough.
Go to Topic - indicates which topic you want to advance to. The menu will list all topics with their title and topic ID.
Deactivate - deactivates the walkthrough.
By creating a trigger, you are telling the step that on a specified action it should go to a specified step or deactivate the walkthrough.
To add a trigger:
- While in the Trigger panel, click + Add trigger to create a trigger.
- Choose On (event) - the user’s action you want to respond to.
- Assign an element. Click the Assign element button and hover over your application to select the desired element.
- Choose Reaction - go to a step, go to a topic or deactivate a walkthrough.
- Done! Now if you want to add another trigger, just click the + Add trigger button again. Each new trigger is color-coded to make them easier to identify. Click the eye button and the elements you have selected will be outlined in that signature color.
Multiple triggers are useful when there are several possible responses to a step. For example, you have two buttons in your application, a red one, and a green one. In your step, you want them to choose between these two buttons. If they click the green button, you want to go to Step 2 and if they click the red button, you want to deactivate the walkthrough. In that case, you could have two triggers, with one assigned to each button.