Skip to main content
Gainsight Inc.

Know your Editor

This article explains the various configurations available in the New Editor and how to use it to create guide engagements.

Overview

The New Editor in Gainsight PX allows you to design and administer in-app guide engagements. Its user-friendly interface simplifies the process of creating guides without extensive technical know-how. It offers configurations that easily customize guides to meet the specific needs and aesthetics of your applications. Ultimately, the guide editor boosts user engagement by enabling the straightforward creation of interactive and helpful in-app guides.

The image displays a choice to select New Editor to start creating guide engagements.

Choose the Right Template for Your Guide Engagement

PX offers a library of engagement templates. Templates are categorized into the following tabs:

  • All: Displays the list of all the templates, Saved Templates, Default Templates, Favorite Templates, Recently used, and V1 Templates.
  • Templates: The templates listed here are default Gainsight templates that help you to quickly start with your first set of In-App guides. They function as ready-to-use templates that have customizable font style and layout dimensions across steps, where content and images can be added directly. For more information on the different templates, refer to the Engagement Template article. 
  • Saved Templates: Displays the list of your saved templates.
  • Favorites: Displays the list of templates you have marked as favorites.
  • Recently Used: Displays the list of your recently used templates.  
  • V1 Templates: Displays the list of templates for Editor V1. The V1 Templates category is designed for users who have extensively used the old editor to create templates. This category ensures that they can continue to use these templates in the new editor.

The image shows all the template categories available for you to choose the one that best suits your needs.

View All Steps of an Engagement

The Global Settings section allows you to view all the steps that are part of the engagement. From here, you can configure the padding, text styling, footer settings, and so on, that are applied to all the steps within the engagement.

To configure the global settings:

  1. Navigate to the Editor section in the guide engagement.
  2. Select a guide template from the library in the Template Picker dialog box.
  3. View all the steps in the editor with the corresponding Global Settings on the right panel. 
  4. (Optional) Click the plus icon to add more steps.
  5. (Optional) Click the doc icon to save the guide engagement as a new template.

The image shows the Global Settings options to configure Text Styling, Padding, Corner Radius, Global Actions, Overlay, Footer Padding, Previous Button, Next Button and Step Counter.

Section

Description

Customizable Options

Text Styling

Configure the font, size, and color of the text for all the steps of the engagement in one go. 

  • Font Type
  • Text Color
  • Text Size
  • Text Format (Bold, Italics, Underline)

Padding

Configure the space between the content of the step and its layout.

  • Top, Bottom, Left and Right padding

Radius

Configure the radius of the step corners. This helps in achieving rounded corners.

Corner radius

Global Actions

Configure the guide engagement to either close or navigate the user to a specific URL when a user clicks on the close option or completes the Guide.

  • Close Action
  • Completion Action

Overlay

Adds a colored overlay on the target application page, underneath your engagement. This helps bring the engagement in focus, or grabs user attention more clearly, especially in multi-colored applications.

  • Color
  • Capacity
  • Padding

Footer Padding

Configure the space between the content and its border.

  • Button spacing
  • Footer Padding

Previous Button

Configure the button to navigate the user to the previous step of the guide engagement.

  • Label Settings
  • Button Padding
  • Button Style
  • Button Color
  • Hover Settings

Next Button

Configure the button to navigate the user to the next step of the guide engagement.

  • Label Settings
  • Button Padding
  • Button Style
  • Button Color
  • Hover Settings

Step Counter

Display of the current step number along with the total number of steps in the guide engagement.

Note: The step counter is not available for the first and the last step.

  • Show
  • Label
  • Font color
  • Font size

Editor

Edit the content at any element level, whether it is a step, row, cell or button level. When an element is selected the editor console automatically adapts, displaying all relevant setting options for that particular element. 

Step Settings

This section describes the different configurations available at step level of the guide. 

The image displays all the configurations available in the editor at step level. The available settings are Dimensions, Padding, background, shadow, overlay, Motion effect, footer configuration, action, view type, position.

Section

Description

Customizable Options

Dimensions

Configure the dimensions(height and width) of the step in guide engagement.

  • Enable Auto height
  • Height
  • Width

Padding

Configure the space between the content of a step and its layout.

Enable override step padding

Background

Configure the background of the step. 

  • Background color
  • Fill percentage
  • URL of any image that can be added to the background.

Shadow

Configure the shadow color of the step to improve the aesthetics of engagement.

  • Enable
  • Opacity
  • Blur
  • X-axis 
  • Y-axis

Overlay

Overlays help focus out the background of the application, and focus attention to the guide engagement.

Note: When turned on, overlays deactivate the application while the guide is displayed. 
When turned off, users can still use the application regardless of the guide engagement displayed.

  • Override Global Overlay
  • Color
  • Opacity
  • Padding
  • Block Highlight(Only applicable for tooltip)
Automation Settings

Automations Settings allows you to configure:

  • Timeout: Automatically closes the engagement after a set period, ensuring it does not linger and disrupt user experience.
  • Initial Delay: Introduces a delay before an engagement is triggered, allowing the user to interact with the page content before the engagement appears.
  • Timeout
  • Initial Delay

Navigation

Configure how users navigate across the engagement steps

  • Use Navigation Bar
  • Click in Target Element
  • Hover Over Target Element
  • Text Entry Submission
  • Enable Show Counter

Action

Configure what happens when the user clicks Next.
  • Show next
  • Go to step
  • Redirect to URL
  • End Guide
  • Autoscroll when out of the user's view point
  • Use browsing history
  • Open in new tab

Skippable

Allows users to skip a particular step.

Enable

Selector

Configure the details of the final element selector mapped for Hotspot or Tooltip

  • Text Match
  • CSS Selector Match
  • View Type

Mapping

Configure different class or ID options based on strength for a mapped element.

 

Position

Configure the position of your engagement on the user’s application. 

  • Select the coordinates
  • Custom Z Index
  • Reposition Interval

Row settings

This section describes the different configurations available at row level of the step in the guide engagement. 

The image displays the settings available at row level.

Section

Description

Customizable Options

Dimensions

Configure the height and width of the row in the step of the guide engagement. 

  • Height
  • Width

Padding

Configure the space between the content of a row and its layout.

  • Enable Override step padding to override the global settings.
  • Top, Bottom, Left, and Right padding

Background

Configure the background of the row in the step of the guide engagement.

 
  • Background color
  • Fill
  • Height
  • Width
  • URL

Cell Setting

This section describes the different configurations available at cell level of the step in the guide engagement. 
The image displays the settings available for cell level.

Section

Description

Customizable Options

Padding

Configure the space between the content of the cell and its layout in the step of the guide engagement.

  • Top and Bottom padding
  • Left and Right Padding

Background

Configure the background of the cell.

 
  • Background color
  • Fill
  • Height
  • Width
  • URL

Text Styling

Configure the text font in the cell. 

Select Font


 

Color

Configure the color of text in the cell. 

  • Text
  • Highlight

Paragraph

Configure the text for a selected paragraph in the cell.

  • Font Format
  • Row Format
  • Text Alignment
  • Line Spacing
  • Increase Indent
  • Decrease Indent
  • Numbered List
  • Bullet List

 

Insert

Insert images, custom buttons, personalized User and Account tokens, links, and emoticons to enhance the user experience.

  • Image
  • Custom button
  • Personalized Tokens
  • Links
  • Emoticons

Button Settings

This section describes the different configurations available at the button level of the step in the guide engagement. 

The image displays the settings that apply to navigation buttons.

Section

Description

Customizable Options

General Settings

Allows you to override the Global Settings for the buttons. 

  • Enable Override Global Settings
  • Button Spacing
  • Footer Padding

Available Buttons

Lists the buttons that can be added to the guide.  

 

Note: The Snooze option allows postponing viewing of the engagements to a later point in time. For more information on Snooze, refer to Snooze Engagements.

  • Start 
  • Skip
  • Snooze

Selected button(Skip)

Configure the look and feel of the selected button.

  • Label Setting
  • Button Padding
  • Button Style
  • Button Color
  • Hover Settings

Code View

The Code View section focuses on a snippet of CSS and HTML code. You can directly edit the styles that affect the appearance and formatting of the user engagement guide.

The CSS code provided has comments that guides you on what each section of the code does. The comments are marked with asterisks and hyphens, a common convention for multi-line comments in CSS.

The image displays the Code View of the step configuration.

Localization Settings

Gainsight PX allows you to translate the content of your engagement into other languages. You can set a default language and translate the engagement content into multiple languages, from the default language. If you have customers in different parts of the world, you can use this feature to display engagements to your customers in their local language. Gainsight PX supports translation to 107 languages.

To understand the engagement localization feature in detail refer to the Engagement Localization article.

LocalizationSettings.jpg

Branching

The branching capability for Guide engagements created in New Editor  empowers you to direct the flow of Guide engagements. You can include and configure custom CTA buttons within each step which grants users the flexibility to navigate directly to the preferred step, rather than adhering to a strict sequential flow. You can also customize the navigation path to the preferred next step when a tool-tip is skipped.

To customize the navigation flow and create branches in the Guide engagements refer to Branching in Guide Engagements.

The image displays the step navigation route.

Preview Engagement 

You can preview the current step of the guide engagement in-app to verify how the engagement is displayed on the application interface and to make further modifications.