Intro to UserGuiding


Introducing UserGuiding. Learn the basics so from day one, you can start onboarding new and existing customers also improve overall UX in your web platform.


Watching this Video will take Approximately: 

7m 14s

Reading this lesson will take approximately: 

7m 14s

The Original Source of this content may include additional useful information or context, and will likely contain links to any content, templates or resources mentioned by the narrator. You can find visit the source below:

Lessons Overview

Lesson Content:

Intro to UserGuiding


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 also improve overall UX in your web platform.

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

The first thing to know is... you have got 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.
  • You can watch UserGuiding University Videos to understand key elements and how to use them in UserGuiding
  • There is also plenty of educational content in our Help Center & Blog.

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 screen-capture.
  • 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 the 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 to complete the installation.

Containers in UserGuiding are JavaScript code snippets that are used to install UserGuiding on your web application or site. To understand "the concept of the container", you can watch this video.

In order to trigger Guides or Hotspots live on your app, 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 need to be able to access its source code.

Installing UserGuiding on your web app is very easy, and will only take a few minutes to do so. Only after this, you can start showing an onboarding content to end-users.

You can also use Google's Tag Manager to install UserGuiding on your web platform or site. Learn how to.

You can find your unique container code under the Containers Tab in Settings.

If you’re not comfortable with that, generally a teammate who has access to your application's source code will know what to do.

If you’re not a programmer, to learn how to embed the container code to install UserGuiding on your app, you can check this article or watch the video below.

Step 4: Go Live!

All that is left to do is activating your guide’s status and displaying it on 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 questions in mind, visit their knowledge base to learn everything about UserGuiding, Chrome Extension, and

Feeling stuck? You can find countless answers and helpful basics on their 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!

Tools used in this Tutorial