In this article, you will read about Guides and learn how to create them. We talk about their utilization in web applications. There are sample images and step by step explanations, serving as a help.
What are Guides?
Guides are aforethought user experiences. They can educate, update, and inform users on-the-go, by serving needed resources to their possible questions.
As the name implies, they provide guidance to end-users throughout any experience that you provide within your web application.
- They consist of steps: A guide can have either one or multiple steps.
- They're in motion: Once a guide is started, end-users can complete all the steps or drop them before finishing.
What do you need to create Guides?
To create and design guides, you need UserGuiding Chrome Extension. If you haven't already, go over to Google’s WebStore to freely download it.
How to create Guides?
You have two options to start:
- Go to a page of your app in which you want to create guides and open the Chrome Extension via its icon.
2. Or, login to panel.userguiding.com.
- Here, find the Guides under the CONTENT in the left-hand menu.
- Now click on the + NEW GUIDE button, which you can see below.
- Into the opening popup, enter the URL, namely, the website address of the platform where you want to create your first guide . Click the Start button.
We put Playground UserGuiding’s address since it’s the sample platform in which we test our products and its features.
Now, your webpage should be opened in a new tab with the UserGuiding extension working. From here, you can navigate any page of your choice.
Important: Guides are made up of steps and you can create a guide by adding either one or more steps.
An Example Guide:
We created the following guide by using all step types in the extension. They are respectively called Modal, Tooltip, and Input Field.
To discover more about them, check this article out. Then, let's get to work!
- Inside the extension, name and describe your guide and click the Create button.
Our example guide is called "How to start right away?" (1). It is described as the First action to take as a new user (2). We set its theme as the Playground Theme (3).
Important: At first, you can start with a default theme of UserGuiding. If you create a custom theme as we did with the Playground Theme, you can use it for your guides.
To learn how to create a custom theme, you can read this article.
- Now, you can add the first step to your newly created guide via the + Step button or with Click Here.
- Select a step type (Our first choice is a Modal). You can either start with a template or create it from scratch.
- In the middle of the page, you see your empty step. You can design the steps you want by adding texts, images, videos, etc.
- Set a position for your Modal (1). Our step has an image and a text. We used default requisite buttons. You have an option to use custom buttons.
Requisite Buttons are used to move back and forth between a guide's steps or to dismiss one.
- Save (4) and Preview (5) your step. Click on < Back to create the second step.
- Back, we can see the step we created. We docked the extension while creating the second step. And, clicked +Step.
- Then, you can continue adding more steps with + Step button.
Our second step type is going to be a Tooltip. They are used to point an element on the page and give information about it.
- Again, choose a template or start from scratch. Next, you need to highlight an element which the tooltip is going to point.
- Search the page with your cursor and select the element with a click.
Below, we highlighted the Users Tab under the Dashboard Section.
- Then, you can type inside the tooltip (just the same way as modal type step).
- Below, we choose to proceed to the next step by clicking on (requisite) Button.
*If we had selected the Element, we'd proceed to the next step by clicking on the highlighted area, meaning, Users Tab.
- Save and Preview your step. Click on < Back to create the third step.
- Our third step is an Input Field. Like Tooltips, they are used to point an element in the page and give information about it.
- They are useful when the highlighted element is a field where you can type in the input.
- They contain extra behavior settings specific to input fields. Ex: Completion of a step can be mandatory with the "Field is Required" option.
Below, we highlighted the search bar where you can type in user information.
- Save and Preview your third step. It is the final step of our sample guide.
- Click on < Back to see your guide with its steps listed, and preview it all together.
Remember: Guides are aforethought user experiences. By creating guides having multiple steps with various behavior and design you can create any kind of experience you want.
How to make a Guides Visible (Live)?
- If you are done with creating a guide, come back to the UserGuiding panel and refresh the page, find the guide created.
- Click on its name or its gear icon and go to its settings page.
- Here, as you do with the hotspots, first select a container code for it.
Important: Container is the JS code that should be embedded on your web platform to install UserGuiding on it. Pages in which you want to show onboarding contents, such as guides, must contain this code.
- Finally, change the status to active, save, and click on green publish changes.
Publishing changes will make your guide visible on your webpage.
- If you go to the page in which you created the guide's first step and refresh it, you’ll see the guide started.
Important: To start this guide on a different page(s) of your application, you should utilize the Targeting inside Settings.