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.

Basic trigger settings in the Step Options panel (more can be found in Advanced trigger settings)

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 - advance to the next step upon clicking the assigned element.
Mouse over - react when user hovers 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 - react when the assigned element has received focus.
Blur - react when the assigned element has lost focus (e.g. user clicks away from the assigned form field)
Keypress - react when the user starts typing into the assigned element.
Change - react when the select value changes of the assigned element. This is useful for form select inputs.
Refresh - react 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.

Advanced settings in the Triggers panel

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:

1. 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.

2. 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.

Available actions:

• Click - react when the user clicks on assigned element
  
• Mouse over - react when the user hovers over the assigned element
  
• Focus - react when the assigned element has received focus
  
• Blur- react when the assigned element has lost focus (e.g. user clicks away from the assigned form field)
  
• Keypress - react when the user starts typing into the assigned element
  
• Change - react when the select value changes of the assigned element. This is useful for form select inputs
  
• Refresh - react when the page is reloaded
  
• Element shows - react when specific element displays
  
• Element hides - react if element hides
  
• Mouse up - react when the user releases the mouse button
  
• Mouse down - react before user releases the mouse button
  
• Mouse enter - react when user hovers towards the element
  
• Mouse leave - react when user hovers away from the element
  
• Drag start - react if the user starts dragging the assigned element (depends on the page design)
  
• Drag - react if the user starts dragging the assigned element (depends on the page design)
  
• Drag enter - react when the user drags the item towards assigned element/field
  
• Drag leave - react when user drags the item towards assigned element/field
  
• Drag over
  
• Drop - react when use drags and drop the item over the assigned element/field
  

• Drag end - react when user drags and drop the item over the assigned element/field (depends on the page design)
  

  
  

• Reaction

  
  

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.

Adding a trigger

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:

3. While in the Trigger panel, click + Add trigger to create a trigger.

4. Choose On (event) - the user’s action you want to respond to.

5. Assign an element. Click the Assign element button and hover over your application to select the desired element.

6. Choose Reaction - go to a step, go to a topic or deactivate a walkthrough.

7. 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.

When to use multiple triggers - branching?

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.

Learn more:

See more about using multiple triggers.
See how to manage drop-down menus with triggers.