The Step Options Panel is one of the most important elements of the Authoring Tool. You use it to create and edit steps of your walkthroughs and tooltips. Each walkthrough or tooltips you create in Inline Manual consists of steps. A typical step might be a popover message pointing to a specific element of your application with some kind of trigger assigned like a click or mouse action which then takes the user to the next step.



To build your walkthroughs and steps properly, you first need to understand how to use functions of the Step Options Panel to their full capacity.


Learn how to use the Step Options Panel to:


  • Select a step template,
  • Assign elements to a step,
  • Add content to your steps such as texts, pictures, and videos,
  • Add triggers to your steps such as a mouse click or hover over the assigned element,
  • And add buttons such as Next, Previous or End buttons.

In this article, we will explain the functions of the Step Options Panel and show you how to use them.


Opening the Step Options Panel

The Step Options Panel appears in the Authoring tool when you create and edit steps of your walkthroughs and tooltips. In this article, we will start from this point and won’t explain how to build a walkthrough as such. To learn how to create it, please check this article first.


To open the Step Options 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.


  1. Now, you see the Step Options Panel:


If the selected step displays correctly in your application, you will see a green hand icon. This icon is especially helpful when you’re trying to troubleshoot why a step isn't visible. If the hand icon is yellow, it is a warning. You can click the icon and see what could be a problem. If the hand is gray, there is some other problem that needs to be addressed.


Selecting a step template

Step Templates make the creation of steps easier and faster. You can modify each of them, and even create your own ones. There are several available templates which you can choose from as a starting point for your designs.


To select a step template:

  1. While in the Step Options Panel, click STEP TEMPLATE to open a list of available templates.


  1. From a list of available templates, select a desired one. That’s how a step will appear in your application. The default template is a simple popover with a text.


Currently available templates:
- Default - a simple text bubble
- Small image, title and text - a step with title and icon
- Top image and text - a step with top image
- Fullscreen - a step position in the center of the screen, fullscreen
- Left sidebar -  a step on the left, as sidebar
- Right sidebar - a step on the right, as sidebar
Switching to any template will remove the content and settings of the step!


Assigning an element to a step

One of the most useful features of the Step Options Panel is the possibility to assign a step to a specific element of your application such as a button or a form field. By default, your new popover appears in the middle of the screen, not assigned to any element.


To assign a step to an element:

  1. In the Step Options Panel, click Assign element and choose to which element of your application you want to point at this step.


If you want to remove the assignment, click the “x” button next to the Assign element button.


  1. Now, select the position of the popover in relation to that element. By default, it is positioned at the top.


Here is an example how it looks like with the position “Bottom”.



Adding content

The most basic function of the Step Options Panel is adding content to your steps. Sometimes, a step requires some visual elements to make it more clear and appealing. In Inline Manual, you can add various types of content to your steps such as images, videos or GIFs. With the WYSIWYG editor (WYSIWYG stands for what you see is what you get), you can customize and enhance your guides look.


To add text:

  1. In the Step Options Panel, provide the text you want to appear on your step in the content area.


  1. Using the WYSIWYG editor, add emphasis to your content - make the text bold or italic, highlight most important parts, or insert bullets and indentations. Don’t forget to set the alignment of your paragraphs.


To add a picture:

  1. In the Step Options Panel, select the image icon.


  1. Provide the picture URL, placeholder text (this text will be visible if the picture doesn’t load), and alignment. The current picture dimension will add automatically, you can edit it to make the picture fit the step window.


Note: Standard PRO and Enterprise plans users can take advantage of the file upload feature. With files upload functionality you can upload your images directly to the Inline Manual portal. In case you already host images somewhere else, you can paste the whole URL of the image.


Read more about files upload here.


  1. Mark Expandable option if you want the image to expand when clicked. It is especially useful when you have bigger images. This way, the step will remain small, but the user will have the option to view the full picture.


  1. Click OK button to confirm adding a picture.

To add a video:

  1. In the Step Options Panel, click the video icon.


  1. Provide the URL to your video. Currently, we support, among other, Wistia, Youtube, Flicker, Qik, Vimeo, Hulu, Viddler, MyOper.


  1. Click OK button to confirm adding a video.

To add links:

  1. In the Step Options Panel, click the link button.


  1. Provide the link and the text you want to display. Links that you can insert are URL, e-mail, or a link to an anchor in the text. Set the protocol if it is secured or not. With Target tab you can decide if you want a link to open in a new window.


  1. Click OK button to confirm adding a link.

To add an iFrame:

  1. In the Step Options Panel, click the iFrame button.


  1. Provide the link and the width and height of the iFrame. Decide if you want to show frame borders.


  1. Click OK button to confirm adding an iFrame.

Adding custom buttons

To add a custom button:

  1. In the Step Options Panel, click the custom button icon.


  1. Edit the text that you want to appear on the button.


  1. Set the action - choose a location the button points to, e.g. choose another topic, step or deactivate the topic.


Adding triggers

You can use triggers to respond to users actions such as a click or hover on assigned elements. By using a trigger, you can control how your users proceed through your walkthroughs. A commonly used trigger is the click trigger (a hand icon). When a user clicks an assigned element, it advances to the next step. The triggers in the step options panel will suit most needs, but you can also use the Triggers Panel for advanced control and customization.


To add a trigger:


  1. In the Step Options Panel, choose a trigger you want to use by clicking the appropriate icon.


The default action is to advance to the next step. In the Step Options Panel, you can only assign one trigger per step. However, you can edit this in the Triggers panel.


Adding buttons

Below the trigger panel, you can add a Previous, Next or End Button to the step popover so your users have an option to either go back to the Previous step, advance to the Next step or to End the walkthrough.


To add a button:

  1. In the Step Options Panel, check the desired button you want to appear on your step popover window.



- Available buttons:
- Title - displays the step title, disabled by default
- Previous - go back to the previous step.
- Next - go to the next step.
- Navigation - when disabled, will hide the Next, Previous and End button all at once. When enabled, will show the Previous and Next buttons if the action is available. There will be no Previous button if there is no previous step.
- Progress - when enabled, this displays the number of the current step, and the total number of steps. For example 2/6, is the second step of six total steps.
- End - end or deactivate the current walkthrough.
- Close - displays an X close button which users can click to deactivate the current step.
- Controls - if enabled, this will hide all the control buttons for that step.
- All - enables/disables all buttons that you have selected and will also disable the padding and the entire buttons holder so there is no additional space.

In this article, we covered the most important functions of the Step Options Panel. Use this knowledge to build appealing walkthroughs and tooltips for your users.


But learning never ends! Here is a bunch of articles to deepen your knowledge:


  • Learn how to create custom step templates
  • Learn more about adding custom buttons in the WYSIWYG editor.
  • Learn how to use triggers to the maximum here.
  • Learn what other options the WYSIWYG editor has here.
  • Learn why and when you should add media to your walkthroughs here.
  • Learn more about assigning elements here.

New to Inline Manual? Check out our Guide to Getting Started!