In this article, we introduce UserGuiding to you and show you the basics so from day one, you can start onboarding new and existing customers.

After signing up, you will land on panel.userguiding.com. It is the UserGuiding dashboard where you can create and manage content.

First thing to know is... you have got an assortment of learning tools at your disposal:

That said, let’s dive in.

Step 1: Download The UserGuiding Chrome Extension

In order to create and design guides and hotspots, head on over to Google’s WebStore to freely download the UserGuiding Chrome Extension.

After adding this extension to your Chrome, whenever you need, you can open the extension by clicking on this icon.

Step 2: Create Your First Guide

  • Once you’ve successfully installed the UserGuiding Chrome extension, head to UserGuiding Dashboard. 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 screenshot.
  • Enter the main URL, namely the website address of the platform where you want to create your first guide into the opening popup. Click the Start button.

Now, your webpage should be opened in a new tab with the UserGuiding extension working.

  • Within the extension, name and describe your guide and click the Create button.

In the below example, we named our guide as the "Welcome Guide".

Important: Guides are made up of steps and you can create a guide by adding either one or more steps.

  • Start by adding a first step to your newly created guide via the + Step button or with Click Here.

To learn more about different kinds of steps that you can use within your guides, read this article.

  • Then, you can continue adding more steps with + Step button.

We created a sample guide made up of three steps. You can see in the image above.

  • If you finish creating your first guide, click on < Back to see it in list view in the guide section where you can create new guides.

Important: To create hotspots, you can switch to the Hotspot section near the Guides.

Step 3: Embed the Container Code

Containers in UserGuiding are JavaScript code snippets that are used to integrate web applications with UserGuiding.

A container code is the medium between a guide and the web application where you want to display it in. To understand the concept, you can watch this video.

​By embedding a single container code inside your application's source code, preferably to the head section, you can actively utilize UserGuiding as a third-party onboarding tool.

For instance, to display a guide you create inside your web platform, first you should integrate the platform with UserGuiding. This is the only way to show an onboarding content to end-users.

In other words, if a page doesn't contain the UserGuiding container code, a guide you created for this page can't be visible.

To learn how to embed the container code and integrate with UserGuiding, you can check this article and this video.

Step 4: Go Live!

All that is left to do is activating your guide’s status and displaying it within your platform pages.

Each content you create can be activated from their settings page and goes live with a click on the Green Publish Changes button on the top-right.

  • Go to guide’s Settings switch its status to Active, click on Save and then Publish Changes.

Now, if you go back to where you created your guide and refresh the page, you will see its live version as an end-user.

To learn more about guides and their utilization you can always visit here.

We’re Always Here To Help

If you have any question in mind, visit our knowledge base to learn everything about UserGuiding , Chrome Extension and panel.userguiding.com.

Feeling stuck? You can find countless answers and helpful basics in our YouTube Channel.

If all else fails, we’re here for you 🙌 go ahead and create a support ticket in seconds via this link.

Happy Guiding!

Related Articles
What are the Containers?
Creating Guides
What is Targeting?

Did this answer your question?