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, image, video, 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 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 given information, and set a value for the Autofill.

Did this answer your question?