Trigger Guide Engagement from Badge icon in the V2 Editor

Overview

A badge is an icon that can be used to trigger a Guide, Slider, or Survey engagement. You can link the badge icon to any element in your application and configure it to trigger the engagement either through a click or hover on the badge icon. Customize the badge icon, and add or modify the tooltip content from PX Editor in your application.

Differences Between Badge and Hotspot

The following table shows the differences between a Hotspot step and a Badge icon.

Hotspot	Badge
Hotspot can be used multiple times in a guide engagement.	Badge icon can be used only once at the beginning of the guide engagement.
Hotspot is considered to be a step in the guide engagement.	Badge icon is not considered to be a step in the guide engagement.

For more information on how to configure Hotspot in the Guide engagement, refer to the Hotspot section of the Create Gainsight PX In-App Guide Engagement article.

Use Cases for Badge Icon

Following are a few sample scenarios where the badge icon can be used:

When you have an option on the User Interface (UI) that can be set to Active but cannot be reverted, configure the badge icon with tooltip text. This eliminates the need for separate Hotspot and tooltip steps.
When you create a walkthrough guide for a new feature , or a survey engagement to gather feedback on a new product, use the badge icon as a trigger for your engagement.

Select Badge Icon as Trigger Method

To select the badge icon as the trigger method:

From the left pane, click Engagements.
Click Create.
Select the Guide, Slider, or Survey icon and click Create.
From the Triggered by drop down, select Badge.

Guide Editor with the Triggered by menu open, showing Badge selected as the trigger type for the engagement.

When a guide is triggered by badge, the audience criteria set in the engagement is still honored.

Configure Badge Icon

As part of the badge configuration, you can customize the behavior and appearance of the badge as well as the tooltip.

Configure Badge Design

Configure the appearance, behavior, and placement of the badge to match your engagement requirements.The following options are available:

Guide Editor showing Badge Design settings to configure the badge icon, image, tooltip, alternative text, size, interaction type, visibility, and mapping.

Section	Settings
Icon and Tooltip: Configure the badge icon and the tooltip displayed to users.	Icon: Use a PX icon. Style: Select an icon from the available icon set. Fill: Select the icon background color. Image: Use a custom image as the badge icon by entering an image URL. Preserve image shape: Display the image in its original shape while maintaining its aspect ratio. Use badge tooltip: Display a tooltip with the badge to add a description or additional text. Show tooltip arrow: Display a pointer for the tooltip.
Alternative Text: Configure accessibility text for the badge image.	Alternative Text: Enter descriptive text for screen readers and accessibility tools.
Size and Color: Customize the appearance of the badge.	Size: Adjust the badge size (or image width for custom images). Fill: Select the badge background color. Opacity: Set the badge transparency. Border Color: Select the border color. Border Width: Set the border thickness. TIP: For custom images, Gainsight recommends setting the border width to zero.
Interaction Type: Configure how users interact with the badge.	Click: Display the tooltip or launch the engagement when users click the badge. Hover: Display the tooltip or launch the engagement when users hover over the badge.
Badge Visibility: Control how often the badge is displayed to qualified users.	Once: Display the badge only once per user. Always: Display the badge throughout the engagement schedule. For more information, refer to the Badge Qualification Scope section.
Selector: View or modify the element associated with the badge. For more information, refer to the Map Badge Icon section.	View or edit the CSS selector of the target element.
Mapping: Associate the badge with a UI element in your application.	Map or remap the badge to a different UI element in the In-App Editor. For more information, refer to the Map Badge Icon section.
Position: Configure where the badge appears relative to the mapped UI element.	Position: Select the badge location around the mapped element. From Top (px): Specify the vertical offset from the selected position. From Left (px): Specify the horizontal offset from the selected position. Custom Z-Index: Set the stacking order of the badge relative to other page elements.

Configure Badge Tooltip Design

Configure the appearance, position, and text formatting of the badge tooltip to align with your branding and improve readability. The following settings are available:

Badge tooltip displayed in the Guide Editor with the Badge Tooltip Design settings panel open for configuring size, colors, position, shadow, and text styling.

Section	Settings
Size: Configure the dimensions of the badge tooltip.	Auto-height: Automatically adjusts the tooltip height based on its content. Height: Specify the tooltip height when Auto-height is turned off. Width: Specify the tooltip width.
Color and Fill: Customize the appearance of the tooltip background.	Select the background color for the tooltip.
Position: Configure where the tooltip appears relative to the badge.	Position: Select the tooltip placement around the badge. From Top (px): Specify the vertical offset from the selected position. From Left (px): Specify the horizontal offset from the selected position.
Shadow: Apply a shadow effect to the tooltip.	Enable: Turn on or off the tooltip shadow. Select the shadow color. Opacity: Specify the shadow opacity. Blur: Specify the shadow blur radius. X: Specify the horizontal shadow offset. Y: Specify the vertical shadow offset.
Font Styling: Customize the appearance of the tooltip text.	Select the font for the tooltip text. Specify the font size. Apply formatting such as bold, italics, underline, block quote, strike through, or super script. Clear Formatting: Remove all applied text formatting.
Color: Customize the colors used in the tooltip text.	Text: Select the text color. Highlight: Select the highlight color for the selected text.
Advanced Text Styling: Apply additional formatting to the tooltip content.	Configure additional formatting options such as headings levels, paragraph texts, text highlight, alignment, line height, indentation, numbered list, and bulleted list.
Insert: Add rich content to the tooltip.	Media: Insert visual elements into the tooltip: Insert Image Browse: Add images stored in your system. Library: Add images stored in the Gainsight library. URL: Add images using image URL. Insert Video Add URL: Enter the URL of the video. Embed Code: Paste the video's embed code. Hyperlink: Add a hyperlink to the selected text. Emoji: Insert emoticons into the tooltip content.

Map Badge Icon

Mapping associates the badge with a specific UI element in your application. Map the badge icon to the UI element it must appear next to, or the action you want to highlight. Use the In-App Editor to select the target element, adjust the badge position, and fine-tune its placement.

Badge icons can be mapped only from the In-App Editor.

To map the badge icon using the In-App Editor:

In the Editor section, click the Edit In-App button.
Enter your application URL and click Launch.
With the Mapping Mode turned on, click the UI element to link the badge icon.

Note: Hover over elements in your application to identify CSS elements. PX highlights each identifiable element with a blue outline.
(Optional) Use the configurations in the MAPPING AND POSITION section to refine the mapping.

Badge settings in the Guide Editor showing Badge Visibility options to display the badge once or always.

Badge Qualification Scope

The Qualification Scope section of an engagement describes how many times the badge icon must be displayed.

When you select the trigger method of an engagement to be only Badge, the Qualification Scope section in the Schedule step is not editable and only badge-level control is applicable.

Guide Editor showing Badge selected as the trigger type and indicating that Qualification Scope settings do not apply to badge-triggered engagements.

The Badge Visibility section has the following options.

Once: Displays the badge icon only the first time the user qualifies for the engagement.
Always: Displays the badge icon until the engagement schedule ends.

In-App Editor in Mapping Mode showing a mapped badge and the Mapping and Position configuration options.

For example, if you set the guide schedule from March 1, 2020 to March 31, 2020, and select the Badge Visibility scope as Once, the badge appears only once. After this, the badge is never displayed even if the guide schedule is active. If you select the Badge Visibility scope as Always, the badge icon is always displayed during the guide schedule.