How to: add actions (the Actions panel)

Actions are a time-saver as they allow you to skip a step or branch in a walkthrough based on what the user sees on the page.

Firstly, you have an option to either Go to a Step, Go to a Topic or Deactivate the topic when an element is visible or not. This is especially useful when you have some elements of your UI that are accessible only to specific users like Administrators or Managers. For example, you can create a walkthrough where the second step points at Users tab that is only visible for Administrators. In actions, you can set up: if the Users tab is not there (an element is not visible), go to next step. This way you will need to create just one walkthrough. There's no need to create a separate guide for Administrators and a separate one for Managers.

But there's more. You have an option to either Go to a Step, Go to a Topic or Deactivate the topic based on the URL the user is currently on and the element's visibility in your application. You can set multiple URL and Element conditions for the step and based on where the user is in the application and the assigned element, it will jump to the specific parts of the walkthrough.

Actions, also allow you to automatically click on an element on behalf of the user. And with an autofill action, you can streamline the user journey and prepare content for them on the fly. This way you can advance a tour by automatically populating text boxes in your product. You can set this up right in the Authoring Tool while creating a step.

This feature is available only in Standard Pro and Enterprise plans. Take a look at our pricing options here.



The Actions panel appears in the Authoring Tool when you create and edit steps of your walkthroughs and tooltips. In this article, we will start at this point and won’t include the instruction on how to build a walkthrough or a tooltip as such. To learn how to create a walkthrough, please check this article and to learn how to create a tooltip, go here.

To open the Actions 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 Actions panel and expand the tab. Now, you see the Actions panel.

With the Actions panel, you have an option to either ‘Go to a Step’, ‘Go to a Topic’ or ‘Deactivate’ the topic when an element is visible or not (+ content), automatically click on an element on behalf of the user (+ click), automatically populate text boxes in your product (autofill), and either ‘Go to a Step’, ‘Go to a Topic’ or ‘Deactivate' the topic when the user is on a certain URL.

Content action

Let’s start with the content action and explaining what this action is built of. An action is made of following parts:
· Phase - when the action will be executed
· Element visibility - if an element is visible or not
· An assigned element - the part of your application
· Reaction - go to a step, topic or deactivate

Adding an action

To add an action:

  1. Click + Content


  1. Add a phase. Select whether the action will be executed Before step is activated or After step is activated. If Before step is activated, the action will be executed before the step is activated. For After step is activated, the action will be executed after the step has been activated.


3. Select the type of Element Visibility you want to respond to. These would either be if the element is visible or not.


4. Assign element. Click the assign element button and hover over your application to select the desired 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 Expert to edit.


To read more about assigning elements, go here.
5. Choose 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.


Well done! You’ve created an action! You can create multiple actions. To add a next one, just follow the instruction above.

Note that each new action is color-coded to make them easier to identify. Click the eye button and the element you have selected will be outlined in that signature color.

Note that while editing the steps, the actions are not being considered for live preview, only when you click on the Play button for the preview while the authoring tool is minimized.

Click action

We add + click feature to the Actions panel to replace the need to use the callback. You can use this action to automatically click on an element on behalf of the user.

  1. In the Actions panel expand the tab.

  2. Click + Click

  3. Assign element. Click the assign element button and hover over your application to select the desired 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 Expert to edit.

  4. Save changes.

Autofill action

  1. In the Actions panel click + Autofill

  2. Add a phase. Select whether the action will be executed Before step is activated or After step is activated. If Before step is activated, the action will be executed before the step is activated. For After step is activated, the action will be executed after the step has been activated.

  1. Assign element. Click the assign element button and hover over your application to select the desired 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 Expert to edit. To read more about assigning elements, go here.

  2. Provide the value you want to fill-in the assigned element with.

  1. Save changes.

Well done! You’ve created an action! You can create multiple actions. To add a next one, just follow the instruction above.

Advanced action

This action allows you to jump to a step/skip a step based on the URL the user is on and the element's visibility. You can set multiple URL and Element conditions for the step and based on where the user is in the application and the assigned element, it will jump to the specific parts of the walkthrough.

  1. In the Actions panel click + Advanced

  1. Add a phase. Select whether the action will be executed Before step is activated or After step is activated. If Before step is activated, the action will be executed before the step is activated. For After step is activated, the action will be executed after the step has been activated.

  1. Add URL condition. This condition checks the current URL the user is on. You can select: matches, doesn't match, contains, doesn't contain.

  2. Provide the URL value.

  3. Now, you can add Element condition_ by providing an element's selector. It works the same as in the Content action described above.

  1. You can create multiple URL and Element conditions (with AND rule). As long as all of these conditions match, the action will be executed.

  2. Remember to save changes.

Actions are especially useful when you have some elements of your application that are accessible only to specific users. Let’s imagine you have a navigation menu in your product: Dashboard | Content | Users and Users section is accessible only to Administrators. If you want to create a walkthrough explaining the menu, you would need to create two of them, one for Administrators that includes Users section, and the second one for other segments that excludes Users.

With Actions you can create just one walkthrough with the second step pointing at Users section and settings in the Action panel: if the Users menu is not there (an element is not visible), go to next step.

Actions, also allow you to automatically click on an element on behalf of the user. And with an autofill action, you can streamline the user journey and prepare content for them on the fly. This way you can advance a tour by automatically populating text boxes in your product.

actions
Was this article helpful?