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 to create 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.

  • Open the UserGuiding's Chrome extension and start creating a new Guide.

  • If you click on +Step on step editor, you'll see that you need to choose a step type.

  • Under each step type, you will find default steps or templates that all consist of separate components.

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

  • Once you select a step, find it on the page and click on +ADD in green to open the "Add A New Component" menu.

  • Below, the default tooltip has a text component already, along with default prerequisite buttons.

  • Inside the "Add A New Component Menu", there are seven different components.

Text, Image, Hero, Video, Button, Html, and a Guide List are the components you can use within Guide steps and Hotspots.

At any time, you can drag and drop to change the location of these components.

Text

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

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

Here, from 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

You can select the image component to add images into your Guide steps and Hotspots.

  • After clicking 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 click on the image icon to open the image settings. Here, you can design and manage your image component.

Here, from 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 from an image

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 to trigger a specific Guide by clicking on the image.

Hero

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

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

Here, from 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

You can select the video component to add videos into your Guide steps and Hotspots.

  • After clicking on the video component, the unit will be automatically added just above the green +ADD button.

  • Just click on the newly added white video area to insert the embed code of the video you want to share.

  • 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 used to trigger specific actions from a Guide or a Hotspot. You can also redirect your end-users to another URL through them.

  • To add a new button, hover over the Guide step or Hotspot you're currently editing, click on +ADD, and then on "Button."

  • After clicking on the button component, it will be automatically added just above the green +ADD button.

  • To edit its text, just click on the newly added button and start typing.

  • You can change the location of your buttons with drag and drop.

  • Click on the custom button to open the settings. Here, you can design and manage your button component.

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

  1. Button style (inherited from the chosen theme);

  2. Alignment

  3. Paddings

  4. Button properties

  5. Click action

  6. Delete

While using custom buttons with Guides, in some cases, the requisite buttons won't be needed; you can remove them by unchecking this option on the editor.

You can learn more about setting click actions to custom buttons from this article.

HTML

You can select the HTML component to add HTML elements into your Guide steps and Hotspots.

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

  • After clicking 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

You can select the Guide list component from the new component menu to add Guides into your Guide steps and Hotspots.

This way, you can use a Guide's step or a Hotspot as a medium to trigger another Guide. This action allows end-users to decide on which Guide they want to launch.

  • After clicking 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.

Ensure to check the "Hide if segments don't match" option to avoid the added Guides being shown to end-users who don't meet your segment rules.

Here, from 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 present Guide will only be dismissed.

Related Articles:

Creating Guides

Why my Guide does not show up?

What is a Hotspot & Hotspots vs Guides

Did this answer your question?