All Collections
UserGuiding Chrome Extension
Using the Step Editor in the Chrome Extension
Using the Step Editor in the Chrome Extension

Discover the basics about different step types and their usages.

Alican avatar
Written by Alican
Updated over a week ago

When you click on the Add a new step in guide creation, you will see the 3 types of steps with accompanying templates: Modal, Tooltip, and Input Field.

Starting from plain text, by adding new components, you can create a step with a combination of different materials such as text, images, video, etc.

Each component's location can be changed with drag and drop (upward, downward, and sideways).

1) Modal

'Modal' is suitable for creating a pop-up window with visuals. They can be placed in variable positions. 

During their presence, end-users interact with the page, which can be ON or OFF.

After completing the step, you can save your work and preview it.

2) Tooltip

'Tooltip' enables you to highlight a specific item in your product. You can point out a UI element and make a statement about it with a tooltip.

Proceeding to the Next Step can be done by clicking on a Requisite Button or an Element (Click & Tooltip).

Please take a look at the image below; in default settings, user interaction with the highlighted area is extracted; in other words, click action upon the selected element is halted.

You can activate the interaction again via the extension.

Advanced: You can visit this subsection if you want to make the step wait until the element you highlight is present on UI or for a specific time (sec). 

You can also define a behavior considering the possibility that the element will not appear, such as skipping the step or ending the guide.

3) Input Field

'Input field' is suitable for highlighting an input field on a UI and encouraging end-users to fill the area you point at.

You can design it as a mandatory action with the "Field is Required" option, validate the given information, and set a value for Autofill.

Did this answer your question?