Overview

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.

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 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 a medium between a guide and the web application where you want to display it in. To understand the concept, you can watch this video.

To publish a guide or hotspot that you create for your web platform, you should integrate your product 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 can't be visible.

​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.

If you’re not comfortable with that, generally the person who built your website will know what to do. If you’re not a programmer, to learn how to embed the container code and integrate with UserGuiding, you can check this article and this video.

Important: To complete integration, you need to access the source code of your website or application.


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 questions 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 on 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?