How to Build Gainsight PX In-App 'Guide' Engagement

Updated 7 hours ago by Neelam

Overview

Gainsight PX provides an all-in-one product experience platform that enables companies to onboard, retain, and grow customers by delivering personalized product experiences based on in-product behaviors. We equip product leaders with in-depth analytics and engagement tools such as in-product guides, dialogs, sliders, and emails to improve product adoption, customer on-boarding, and customer retention. This article explains how to build the Guide type of Engagement. Guides can be configured as a single step tooltip, a single step dialog, or you can string them together into a sequence of tooltips and dialogs. You can even include a hotspot beacon for a less invasive guide launch. For the purposes of illustrating an example walkthrough guide, we use the Gainsight CS application as the destination below.

Prerequisite

Ensure that the Gainsight PX org has the latest features/pages for which you want to build a guide. Copy the url to use later for setting in-app engagements.

If an org does not have the Gainsight PX installed, you will not be able to create/target guides in that org. If you think that your target element appears more than once in a specific module, you may add a specific page that has unique URL. This helps you to identify your target element in a specific page.

How to Build Guides

Create and Edit Simple Guide

Using the Gainsight PX universal editor, you'll be able to create advanced in-app Guides in your product, and deliver a winning product experience.

  1. Navigate to Engagement > Click Create.
  2. Select Guide.
  3. Name the Guide.
Gainsight PX recommends naming the guide so that others can easily identify its purpose and/or location.

Clicking Guide navigates you to the Templates page.

  1. Set Audience. Audience allows you to identify the set of behaviours a user will perform in order to trigger the engagement guide. Using Gainsight PX, you can use basic audience rules such as user signup date, or more advanced rules related to adoption behaviours by using account attributes sourced by your CRM and feature usage rules based on the mapped features and modules.

For more information about how you can select audience for Engagements, refer to the Audience Selection (Engagements) article.

  1. Select a template for your Guide engagement.
There are templates created for the Guide type of Engagement. You can use the existing templates or modify an existing one as per your requirements and save them as a template to use again later.

You can use existing templates while setting up Guide engagements. You can even save the newly created/modified template and use the saved template in future in order to save time. Once you select the template, you will be navigated to the Editor page where you can modify your template.

The 2nd tab on the extreme right represents the step settings you're on. Customize look & feel of each step and the relevant effects such as navigation, timeout and more.

The third tab also known as Global Settings, set the default Overlay that will be applied on all of the steps. The fourth tab also called as CSS styling tab allows you to visualise and edit the default CSS styling.

  1. Click +New. This enables you to add Tooltip, Dialog, or Hotspot steps in the walkthrough.
    You can re-order the steps. You can also delete any specific step from the Guide.
  2. Click Edit Guide In-App to link the guide steps into UI elements and edit the guide in the application.

Clicking Edit Guide In-App will opens a dialog box where you can select the desired url to start linking.

  1. Click Launch to navigate to the application where you can edit your Guide engagement.
  2. In the Target URL field in the application, you can paste the url of the location.

Following image shows the new location with Guide on the top.

  1. Start linking the elements on UI.
    Link the elements the different types of engagements (added in the Guide) which are in orange as shown in the following image. It means that these elements are not linked to the UI elements. Once you link, it will show in green and linked.
  1. Click on the UI elements to link with the Hotspot step and Tooltip steps. You have Edit option to control Settings and Navigation. The following image shows how you can link a Hotspot step to a desired UI element and apply new settings.
  1. Click Save. Everytime you create a link to link Hotspot or Tooltip with its relevant UI element, you must click Save to see the Hotspot/Tooltip linked.
A hotspot or tooltip appears based on the selection of UI element, not as per the Audience selection.
  1. To map an element within a menu, you must turn OFF the mapper. To do this:
    1. Turn OFF Linking. Click on the desired menu.
    2. Turn ON the Linking (mapper) and select the element to map.
    You can also turn ON the Linking via keyboard shortcut as shown in the upper right corner (On Mac: Control + Option + M).
    1. Click Save.
  2. Edit content for any steps in the Guide in Gainsight PX. When you come back to an open UI with the Guides open in it, you must refresh the page to see the changes you made in Gainsight PX.
  3. Schedule your guide. The dynamic scheduler controls when the engagement should be active and the threshold of how many times a user will view a given experience.
    1. Specify the number of times and additional intervals in which you would like to automatically re-engage your users (for example, display the engagement).
    2. Assign Start Date and End Date to control the period of engagement visibility in the target orgs. You can also make it appear on a recurring basis, such as everyday or any specific day.  
  4. Click the preview icon review your experience on the target app.
  5. Click Launch to publish the Guide.
    The launch step displays an overview of the settings and will validate them automatically.
    You cannot launch your engagement if there are any sections highlighted with an exclamation sign beside them. You need to go back to those specific sections to make required changes and save them.
    Some of the common reasons the system will stop you from launching your engagement:
    1. Steps in the Guide are not properly linked.
    2. Rules have not been properly defined or saved for Audience.
    3. Any one of the steps is unsaved.

Create and Edit Advanced Guide

Advanced guides are powerful and navigate users through multiple tabs and pages. You can explain various options or pages of your application using an advanced guide.

In this section, we’ll explain the steps to build a sample advanced guide which navigates users through various pages of the Gainsight Scorecard application. The details of your own guide will vary depending on your application. This guide is developed in three phases. The phases are listed below.

  • Create and Setup Guide
  • Configure the Guide in Application
  • Navigate Users to Tabs and Pages
Create and Setup Guide

This phase explains the basic process of creating the guide, selecting the template and the audience for the guide.

  1. In the left pane, click Engagements. The Engagements window is displayed.
  1. Click Create.
  1. Enter a name for the engagement guide.
  2. Click the Guide icon.
  3. Select the org in which you want to launch the guide.
  4. (Optional) Enter a description for the guide.
  5. Click Create.
  1. Choose a template:
    1. Click Preview, for the required template. All the available templates are divided under three tabs.
    2. Click Use.
  2. Click the Audience section and select your audience as required. For more information about configuring your audience refer to the Audience Selection (Engagements) article.
  3. Click the Editor section.
Configure the Guide in Application

This phase explains the process of configuring the guide from the application. In this stage, you will learn the process of adding multiple tooltips and dialogs, selecting the location of tooltips, and editing the content of tooltip and dialog. The steps mentioned below are performed from a application.

  1. Click Edit Guide In-App. (The button name can be truncated on smaller screens) A list of configured URLs are displayed. These are the URLs of the product on which Gainsight PX is integrated and have been launched previously.
  2. Select the required URL. This navigates you to the application.
    If the URL of the required page on your application is not displayed, you must manually copy the URL from the application and paste it in the textbox and click Launch.

The Steps drop-down menu consists of three items; two Dialogs and one Tooltip. These items are present by default. You can delete the existing dialog and tooltips or add more Dialogs, tooltips, or hotspots, as required.

  1. From the Steps drop-down menu, select the first Dialog Step. The Dialog window is displayed.
  1. Customize the dialog content to match your requirements. In this guide, Gainsight CS Scorecards are used. Hence the first dialog has the following content.

This dialog is the first item displayed in the Guide.

  1. Click Save.
  2. From the Step drop-down menu, select Tooltip Step.
  3. Select the UI element of the application to which the tooltip must be associated.

    In this example, the tooltip is associated to the MEASURES tab as the associated element for the tooltip. This tooltip is the second item in the guide.
    You cannot modify the default tooltip heading (Feature / Step Name) from the application. To edit the tooltip heading, you must navigate back to the Gainsight PX environment.
  4. Customize the dialog content to match your requirements.
    In this tooltip, content specific to the Measures tab is added. This tooltip is the second item of the guide.
  5. Click Save.
    You can add multiple tooltips and dialogs as required. In this example, multiple tooltips and dialogs will be added in upcoming steps to match the Scorecards application.
  6. Click +New.
  7. Enter a name for the Step.
  8. Select the Tooltip option.
  9. Select the UI element of the application to which the tooltip must be associated.
    In this example, the tooltip is associated with the SCORECARDS tab. This tooltip is the third item in the guide.
  1. Customize the dialog content to match your requirements.
    In this tooltip, content specific to Scorecards tab is added.
  1. Similarly, create another tooltip or dialog as required.
    In this guide, a tooltip is created for the + ADD button. This is the fourth item of the guide.

This tooltip will navigate the users to the SCORECARDS tab on the same page, which is located on the same page.

A single guide can have tooltips, dialogs, and hotspots spread across various pages of your application. When users launch a guide which has tooltips, and dialogs spread across multiple pages, they are automatically navigated to different parts of your application. This phase explains you the process of using multiple tabs and pages in a single guide.

  1. Click the edit icon for the fourth tooltip, created in the previous phase.
  2. Click the Navigation tab.
  3. Select the Go to URL (Will refresh the page) option.
  4. Enter the URL of the page on which the next item of the guide must be placed.

    In this example, users are navigated to the SCORECARDS tab on which the next dialog is placed. Hence, the URL of SCORECARDS tab is used. You must enter the URL accurately. If you enter incorrect URL, the users are navigated to the wrong page or the guide does not function accurately.  
  5. Click Apply.
  1. On the SCORECARDS tab, create a new Dialog and add content as displayed below.
  1. Create a new tooltip or guide, as required.
    In this example, a tooltip is created for the + SCORECARD button.

This tooltip navigates users to the Gainsight C360 page.

  1. Click the edit icon for the fourth tooltip, created in the previous phase.
  2. Click the Navigation tab.
  3. Select the Go to URL (Will refresh the page) option.
  4. Enter the URL of the page to which the users must be navigated.

    In this example, the URL of the C360 page is entered since the next item of the guide is placed on C360 page.
  5. Click Apply.
  1. Navigate to the next page whose URL was entered in step 11.

    In this example, the C360 page is launched, since its URL was entered in step 11.
  2. Create a Dialog or tooltip as required.
    In this example, a dialog is created for Scorecard section on C360 page.
  1. Click the Edit button for the required dialogs/ tooltips and add select the Show “Previous” button check box. This options allows users to navigate back to the previous tooltip or dialog.
  1. Navigate to the first item of the guide and click the Preview icon to preview the guide.

The steps to schedule and launch the guide are same as in case of a simple guide.

Analytics

You can view the number of times an engagement has been launched from the LIFETIME VIEWS column, for the required Engagement. You can click this column to arrange the engagements in either ascending or descending order of their views. This column displays zero if an Engagement has never been viewed by customers or has not yet been launched. You can click the eye icon to navigate to the Analytics > In App Performance page.

To learn about all frequently asked questions, refer In-App Engagements FAQs article.


How did we do?