Overview
In this article, we introduce UserGuiding to you and show you the basics so that you can start onboarding new and existing customers and improve the overall UX in your web platform.
After signing up, you will land on panel.userguiding.com. It is the UserGuiding dashboard where you can create and manage content.
The first thing to know is you have an assortment of learning tools at your disposal:
There's a nifty Onboarding Checklist within the UserGuiding Panel. Here, you can trigger each Guide simply by clicking on its name and following its path.
On the right side, you'll also notice a widget called 'Need Help?'; click on it to expand.
This is our Resource Center; you'll find the same Onboarding Checklist within it, use cases, a Guide on how to create this Resource Center on your web app, and much more!
There is also plenty of educational content in our Help Center and Blog.
That said, let's dive in.
Step 1: Download The UserGuiding Chrome Extension
To create and design guides and hotspots, head to Google's web store to download the UserGuiding Chrome Extension.
After adding this extension to Chrome, you can open the extension by clicking on this icon whenever you need it.
Step 2: Create Your First Guide
Here's a quick video on how to create your first Guide, but we will walk you through the steps below.
Once you've successfully installed the UserGuiding Chrome extension, please go ahead and return to the UserGuiding Panel. Then, under the Content section in the left-hand menu, find the Guides tab.
Now click the + New Guide button, which you can see in the following screen capture.
In addition to the opening popup, please enter the name of your Guide and the URL where you'd like to create it. Then, click on the Start button.
Now, your web page should be opened in a new tab with the UserGuiding extension working.
Select a step type amongst Modal, Tooltip, or Input Field. Also, check this article to learn more about the different kinds of Guide steps.
Once you have chosen the step type, pick a template for your Guide step or create it from scratch.
Once you have finished your first Guide step, you can continue adding more steps with the + Step button.
If you finished creating your first Guide, click on < Back to see it in the list view in the Guides section, where you can create new guides.
Important: To create Hotspots, you can switch to the Hotspot tab next to the Guides one.
Step 3: Embed the Container Code to complete the installation
Containers in UserGuiding are JavaScript code snippets used to install UserGuiding on your web application or site.
To show Guides, Hotspots, or other onboarding materials to your end-users, you must complete the installation by embedding a single container code into your app's source code.
Important: To install UserGuiding's container code on an application, you must access its source code.
Installing UserGuiding on your web app is very easy and will take only a few minutes. Only after this can you start showing onboarding content to end users.
You can also use Google Tag Manager to install UserGuiding on your web platform or site.
You can find your unique container code under the Containers tab in the Settings section.
Generally, if you're uncomfortable with that, a teammate with access to your application's source code will know what to do.
Step 4: Go Live!
All that is left is to activate your Guide's status and display it on your platform pages.
Each content you create can be activated from their settings page and goes live by clicking on the Green Publish Changes button on the top-right.
Go to Guide's Settings, switch its status to Active, click on Save, and Publish Changes.
Then, back to where you created your Guide and refresh the page, you will see its live version as an end-user.
If you would like to learn more about Guides and their utilization, you can always visit here.
We're Always Here To Help
If you have any questions in mind, you can visit our Help Center to learn everything about UserGuiding.
Happy Guiding!