With Inline Manual, you can assign steps to a particular element or set of elements within your application, like a button, a form field, or even a link inside your menu. Assigned steps are interactive and can have multiple triggers and end-points. Use this feature to emphasise your page's particular part or direct users to perform the desired action. By default, when you create a step, it is not assigned to any element of your application - it appears in the middle of the screen.

To quickly assign one element, use the Step Options Panel in the Authoring tool. Here we describe in details all functionalities of the Step Options Panel. If you want to assign more elements to one step, you need to use the Elements panel. In the Elements panel, you add and manage all elements assigned to a step.

In this article, we describe all options available in the Elements panel so that you can use it to the maximum.

Opening the Elements panel

The Elements panel appears in the Authoring tool when you create and edit your walkthroughs and tooltips. This article will start from 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 Elements 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 Elements panel and expand the tab. Now, you see the Elements panel.

Functionalities of the Elements panel

With the Elements panel, you manage all assignments. In this part of the article, we will outline the Elements panel's functions and show you how to use them.

Let's start with assigning elements:

3. To set a specific element to a step, first, click * "+"* in the Elements panel.

4. Next, click the Assign button and choose to which element of your application you want to point at with this step.

When there is already an assigned element, the Assign button will change to Re-assign button. It allows you to re-assign the element.

If you want to add another assignment to the same step, follow the above instructions again. You can assign multiple elements to one step.

Note that some applications might make selecting an element impossible. There may also be cases where the element you want to assign is in a drop-down or collapsed menu. To assign an element form a drop-down menu, hold down the Shift button on your keyboard to suspend selection until you get to the correct element.

There may also be instances that the exact element can't be assigned to due to some issue, e.g. getting redirected to a different page or performing an action. In such case, hold down S key on your keyboard to select that element.

5. Now, if you want to change the step's position with the selected element, you need to do in the Step Options Panel. Open the Step Options Panel and select the position of the popover with the element. By default, it is positioned at the top.

Highlighting elements:

6. To highlight the assigned element, click the eye icon next to the re-assign button.

7. It will display the selected element in a green frame.

Providing a selector:

Selector defines the assigned element from your application. When the assign button is used, a selector is automatically generated. But you can also provide it manually.

8. Next, provide a selector for your element.

Expanding/reducing the area:

9. To expand or minimise the selected element's area, click the expansion or reduction icons.

10. It will change the area around the selected element.

If you have any issues with adequately assigning an element, please take a look at this article.

Removing the assignment:

11. To delete the assignment, click the "x".

Point at first:

By default, when you have multiple elements selected, the popover will create a bounding box around the elements and position itself based on the position settings. With "point at first" feature, you will have the ability to choose at what element your popover will point. Read this article to learn more.

What's next?

Build easy-to-follow, interactive guides to keep your users engaged and converting. Here’s how to do it:

• Create walkthroughs
  
• Create launchers
  

Need some inspiration? Take a look at our blog post in which we present 20+ inspiring onboarding examples.