Overview
Once you have downloaded the UserGuiding Chrome Extension, you're all ready to create your first Guide. In this article, we'll show you all the possibilities while creating them.
How to Create a Guide
You have two options to start:
You can go to a page of your app where you want to create guides and open the Chrome Extension via its icon.
2. Or, login to panel.userguiding.com.
Click on Guides under the CONTENT section in the left-hand menu.
Then, click on the + NEW GUIDE button, which you can see below.
Into the opening popup, enter the name of your Guide and the URL where you want to create it. Then, click on the Start button.
Finally, your webpage should be opened in a new tab with the UserGuiding extension working.
Creating a Guide
We will create the following Guide by using all step types in the extension, which are respectively called Modal, Tooltip, and Input Field. To discover more about them, check out this article.
In the example below, we're creating a new Guide directly from the Chrome Extension (option 1 from the section above).
Our example Guide will be called How to Start Right Away
Now, let's add the first step to our newly created guide via the + Step button.
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 will see your empty step. You can design the steps you want by adding texts, images, videos, etc.
You can set a position for your Modal (1). Our step has an image and text. We used default requisite buttons. You also have the option to use custom buttons.
Note: requisite buttons are used to move back and forth between a guide's steps or to dismiss one.
Save (2) and Preview (3) 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 the + Step button.
Our second step type is going to be a Tooltip. They are used to point to an element on the page and give information about it.
Again, you can choose a template or start from scratch. Next, you'll need to highlight an element that the Tooltip will point to.
Search the page with your cursor and select the element with a click.
Below, we went ahead and highlighted the Users Tab under the Dashboard Section.
Then, you can type inside the tooltip (just the same way as the Modal type step).
Below, we would like to choose to go ahead with the next step by clicking on the Requisite Button.
*If we had selected the Element, we'd proceed to the next step by clicking on the highlighted area, meaning the 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 to an element on 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: Completing 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.
Note: 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 Guide visible (live)?
If you are done with creating a Guide, please feel free to come back to the Guides section on the UserGuiding panel and find the Guide created.
Click on its name or its gear icon and go to its settings page.
Here, make sure the correct container was chosen for your Guide.
Important: Container is the JS code that should be embedded on your web platform to integrate it with UserGuiding. The pages in which you want to show onboarding content, 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 where 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 Page Targeting section inside the Guide settings.