Overview

In this article, you will read about different components you can add to the steps of Guides and Hotspots. Each component's utilization is also explained with sample images.

Watch our Video Tutorial to Learn Creating Guides in Less than 5 min.

What is a Component?

Components are different units in UserGuiding, that can be used within Guide steps and Hotspots. In fact, components all together create guide steps and Hotspots.

  • Open the UserGuiding's Chrome Extension and start creating a new guide.
  • If you click on +Step on step editor and you see that you need to choose a step type.
  • Under each step type, you will find default steps or templates that are all consisting of separate components.

From this point forth, we will explain components over a basic tooltip step of Guides.

  • Once you select a step, go find it on the page and click on +ADD in green color to open the New Component Menu.
  • Below, the default tooltip has a Text component already along with default prerequisite buttons
  • Inside the New Component Menu, there are seven different components.

Text, Image, Hero, Video, Button, Html, and a Guide List are various components you can use within guide steps and hotspots.

Each time you click on the + ADD and add a new component. Afterward, you can change the location of these components with the actions of drag and drop.

Text

Text is the default component of all step types, their templates, and hotspots. Directions you would provide for end-users are typed in inside text components

  • Click onto the Text area to open the text settings. Here, you can design and manage your Text component.

Here, from the left to right, respectively you can find:

  1. Character Styles
  2. Alignment
  3. Surrounding Paddings
  4. Insert Link
  5. Emoji Menu
  6. Personalization by Inserted User Attributes
  7. Delete

Image

To add images into your guide steps and hotspots, you can select the Image component from the new component menu.

  • After a click on the Image component, the unit will be automatically added just above the green +ADD button.
  • To upload an image from your computer, just click on the newly added white Image area.
  • Or, you can simply click on the image icon given inside the Image settings.

Here, from the left to right, respectively you can find:

  1. Image Upload
  2. Image Max Height
  3. Alignment
  4. Insert Link or Trigger a Guide
  5. Surrounding Paddings
  6. Delete

Insert Link or Trigger a Guide

When you add an Image component to a guide step or a hotspot, you can also insert a link to this image or use it as a medium to trigger another guide.

  • Go to URL: This action allows you to set up an Image to launch a relative URL or an external link.
  • Start a Guide: You can set an action as triggering a specific guide by click on the image.

Hero

A hero is simply a Text component that can have a background image. If you click onto the Hero to add it as a new component, a default image and text you will get.

  • Click onto the Hero area to open the Hero settings. Here, you can design and manage your Hero component.

Here, from the left to right, respectively you can find:

  1. Image Upload
  2. Image Max Height
  3. Text Alignment
  4. Text block types: Body, Header1, Header2, Header3
  5. Text color
  6. Delete

Video

To add videos into your guide steps and hotspots, you can select the Video component from the new component menu.

  • After a click on the Video component, the unit will be automatically added just above the green +ADD button.
  • To insert the embed code of the video you want to share, just click on the newly added white video area.
  • It will open the section in which you can paste the embed code.

To see detailed instructions, check out: How to Add a Video Component to Guides?

Button

Customs buttons are components that you can add to a guide's step or a Hotspot. Their outlook and functionality can vary according to their designer's taste and expectations.

Each time you click on the Button, a new one is going to be added. You can change the location of these buttons with the actions of drag and drop.

What is going to happen when end-users click on them? What should be their function? Let's find an answer together!

  • When we click on a button, a setting menu opens just below the button itself, from left to right containing the following items:
  1. Text alignment
  2. Surrounding Paddings
  3. Button Properties
  4. Action ---> is what happens when you click on this button.
  5. Delete

To set various actions to these buttons and utilize them in many ways:

Check out: Custom Button Actions

HTML

To add HTML elements into your guide steps and hotspots, you can select the HTML component from the new component menu.

You can use an HTML snippet to insert a formatted table, a Web form, or a block of text into your guides.

  • After a click on the Html component, the unit will be automatically added just above the green +ADD button.
  • To insert the HTML snippet, just click on the newly added white HTML area.
  • It will open the section in which you can type the HTML snippet.

Guide List

To add guides into your guide steps and hotspots, you can select the Guide List component from the new component menu.

This way, you can use a guide's step or a hotspot as a medium to trigger another guide.

If you add more then one guide, you can ramify the user experiences through guides. This action allows end-users to decide on which guide they want to launch.

  • After a click on the Guide List component, the unit will be automatically added just above the green +ADD button.
  • To select a guide to be added, just click on the white area.
  • It will open the section from which you can select and add guides.

Guide List Items: Here, you can add new guides to your list or extract existing ones from your list.

If you're showing custom guides to specific user segments, turn on the "Hide if segments don't match".

The linked Guide can’t be displayed for an end-user who doesn’t meet your segment rules. When choosing a Guide to be added, be sure to check the segment rules for the List's Guide as well.

Above, from the left to right, respectively you can find:

  1. Guide List Items
  2. List Item Properties: Roundness, Height, Font Size
  3. Surrounding Paddings
  4. Delete

Once your Guide or Hotspot is published and a user clicks on a Guide in the List, the current Guide or Hotspot will be automatically dismissed and the listed Guide will be activated.

If you choose a Guide that can’t be activated on the current page, the current Guide will only be dismissed.

Now that you’re familiar with the new components of the step editor, take a look at How to Create Guides with Chrome Extension of UserGuiding.

Related Articles:
Why my guide does not show up?
What is a Hotspot & Hotspots vs Guides

Did this answer your question?