When you click on the Add a new step in guide creation, you 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, image, video and, etc.

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

Watch our Video Tutorial to Learn Creating Guides in Less than 5 min

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 that 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. With a tooltip, you can point out a UI element and make a statement about it.

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

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

Also see: What is a CSS selector, and when should I use it?

Advanced: Visit this subsection, if you want to make the step wait until the element you highlight is present on UI, or for a certain 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 given information and, set a value for the Autofill.

Related Articles:
Managing Guides
Making Guides Live

Did this answer your question?