Overview
In this article, you will read about different components you can add to Guides and Hotspots. Each component's utilization is also explained with sample images.
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 +Step on the step editor, you'll see that you need to choose a step type.
Under each step type, you will find default steps or templates consisting 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 the "+" icon to open the component menu.
Below, the default tooltip already has a text component and default requisite buttons.
Inside the 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.
Once a component is added, you can drag and drop its location at any time.
Sections
Text
Text is the default component of all step types, templates, and Hotspots. Therefore, directions 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:
Character styles
Alignment
Surrounding paddings
Insert link
Emoji menu
Personalization by inserting user attributes
Delete
Image
You can select the image component to add images to your Guide steps and Hotspots.
After clicking on the image component, the unit will be automatically added.
To upload an image from your computer, 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:
Image upload
Image max-height
Alignment
Insert link or trigger a Guide
Surrounding paddings
Delete
Insert a 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.
Start a Guide: You can set an action to trigger a specific Guide by clicking on the image.
Go to URL: This action allows you to set up an Image to launch a relative URL or an external link.
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 on 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:
Image upload
Image max-height
Text alignment
Text block types: Body, Header1, Header2, Header3
Text color
Delete
Video
You can select the video component to add videos to your Guide steps and Hotspots.
After clicking on the video component, the unit will be automatically added.
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.
Button
Customs buttons are components that 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 the "+" icon, and then on "Button."
After clicking on the button component, it will be automatically added.
Click on the newly added button and start typing to edit its text.
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:
Button style (inherited from the chosen theme);
Alignment
Paddings
Button properties
Click action
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 to your Guide steps and Hotspots.
You can use an HTML snippet to insert a formatted table, a web form, or a text block into your Guides.
After clicking on the HTML component, the unit will be automatically added.
Click on the newly added white HTML area to insert the HTML snippet.
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 to 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.
To select a Guide to be added, click on the white area.
It will open the section from which you can select and add Guides.
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.
Guide List Items: Here, you can add new Guides to your list or extract existing ones from your list.
Here, from left to right, respectively, you can find:
Guide list items
List item properties: roundness, height, font size
Surrounding paddings
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.
