Skip to content
English - Canada
  • There are no suggestions because the search field is empty.

Yeti's HelpHero Guide

Help Hero is a customer support and knowledge-based platform designed to provide efficient and effective support to customers using the Yeti PlatfoWeb App. It has features such as a Self-Service options, interactive guides, and reporting to help improve the customer support experience. 

Getting started

 

To get started, you will need to install the Chrome extension, which allows you to create/edit and preview tours without making any changes to the Yeti web app. Go to any page on the web app itself. Click the HelpHero icon to bring up the HelpHero extension settings popup (circled red). The HelpHero Editor should appear on the left-hand side of your website. You can now start creating and previewing tours.


What are the Self-Service options?

Self-Service options refers to the feature that enables you to provide customers with resources and tools to find solutions to their problems independently, without needing to contact customer support directly. This feature typically includes hotspots, tutorials, guides, and other relevant information.


Hotspots

Hotspots are the little blue question mark icons you see throughout Yeti. By clicking on them the user can access text that explains an element. All hotspots are currently ‘On-Click’ which means the user will have to click a question mark for the text to appear.

To Create a Hotspot:

  1. Open up the Help Hero editor on the Yeti Web app
  2. Click Hotspot on the Editors menu
  3. Go to the page you want the hotspot on
  4. Click the white plus button in the top right of the editor 
  5. Give it a name 
  6. Then select element
  7. Click the area (on the yeti page) where you want the hotspot to be. 
  8. Click next
  9. Select a label 
  10. The condition can be set here if required 
  11. Select Click Hotspot icon
  12. Head over to style (next tab)
  13. For Icon select Qestion
  14. For Animation select none
  15. Click save
  16. Click the edit button which will appear near the new hotspot
  17. Enter in title and Body

To Edit an Existing One:

  1. Open up the editor 
  2. Click on hotspot 
  3. Click on an already existing hotspot on the editor
  4. Make your changes
  5. Click save 

Elements

Help Hero breaks down the web app UX into building blocks called Elements. An element refers to the area or component of the web app page used to add hotspots or guides to.

Label 

Labels are used for organizing things. Click on the hotspot you wish to assign a label to in the editor. Under the name, you’ll find a field called labels. Enter in text, press enter, and a new label will be created and assigned. You can create up to 40 labels. Labels are color coded to make it easy to identify and organize your HelpHero content.

Conditions 

You can specify show conditions on your hotspots to ensure they are seen by the right users. Conditions that apply to tours and checklists like user properties, user events, device type, etc can also be used in hotspots.

Highlights

You can highlight elements on a page. This can be used to explain and draw attention to the different parts of your UI. Highlight elements and prompt users to click on the element rather than having a next button to go to the next step.

Styling 

When creating a hotspot, you can customize the look by clicking the Style button in the navbar. You will be given the option to set the icon, colour, and overall style. Current style setting:


Icon Alignment: top right

Icon y offset: -3

Icon x offset: -6

Icon: Question

Icon size: 12

Icon color: #2196f3

Icon backdrop color: Default

Dialog preferred width: 350

Dialog preferred side: Bottom

Z-index: 2


Staging 

If you want the hotspot to only be presented on staging then you will need to add a condition to the hotspot.

Step 1 Select the (+ condition) button.











Step 2. Select the dropdown menu and select ‘Browser URL’.


Step 3 Make sure the url you enter is the correct staging page that the hotspot is to be presented on.