Use Templates

Overview

Templates are pre-formatted layouts that help you create engagements in a specific format. Templates save you time on the initial setup and configuration of your engagement layouts. Gainsight PX provides default templates out of the box. You can use the default templates for creating engagements or customize the templates as required. For example, you can customize a template to display your company logo. The goal of this feature is to help you create personalized engagement templates.

Create Template

While building in-product engagements Gainsight PX recommends that you build reusable templates and create a consistent experience that matches your product and brand styling. The template will be available in your Saved Template section of the template library.

To create a template:

1. Click Engagements from the left pane.
2. Click Create.

3. Select an engagement type from the following options:

• Dialog
• Slider
• Guide
• Email
• Survey

4. Enter the desired name for the engagement (Example: New Dialog Engagement) and Click Create.

5. Select the required template and click Preview.

6. Select the required steps or select all the steps and then click Use to use the template in your engagement.

7. Customize the template from the Editor page. Simply use the right side WYSIWYG for specific inline styling, embedding videos, images, and overlay settings.

8. From the Steps tab, click the + icon and select the required option from the drop-down menu to create responsive content for different device types (Computer/Mobile/Tablet).

9. Use the toggle button to have the control to display engagements for the required device type. For example, if you have created engagement to display both on computer and mobile but later decided to display only on the computer, you can just turn off the toggle button in the Mobile slide.

10. Click the save as template button to save your personalized template to the Saved Templates tab.

Configure CSS Styling

Using CSS is an effective way to apply default styling for an in-app engagement. CSS helps you control any UI element except in cases where the element uses an inline styling on the HTML element. Inline styling can be done via the WYSIWYG or via the HTML code. The CSS styling for an engagement can be managed through the editor. You can edit CSS content for each step of the Guide/Slider/Survey Engagements separately. This does not apply changes to the entire engagement. CSS tab allows you to visualize and edit the default CSS styling.

Following options are available for CSS styling:

• Default Styling: The default tab allows you to see a list of default rules pre-defined for the selected engagement type. Using the CSS tab on the right side of the editor it is recommended to update the following CSS class with settings that fit your product.

.px-dialog-wrapper {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    text-align: left;
    color: #000;
    padding: 40px 40px 40px 40px;
    width: 100%;
}

Note: The CSS in the default styling tab is not editable.

• Override Styling: using this feature, you can modify the existing default CSS style and can re-write your own CSS to customize engagements more easily to avoid a collision for different Data Object Model (DOM) elements in the engagement. The DOM elements are hidden and not visible in the user interface. You can perform the edits on Step and Engagement CSS tabs.

By default, engagements follow the CSS styling defined in the Default tab. Any custom CSS, detailed in the Engagement (Slider/Guide/Survey) CSS tab will override that styling. Step CSS is applicable for a particular step in an engagement guide, while the Engagement (Slider/Guide/Survey) CSS is applicable for all steps in the engagement.

IMPORTANT: The step CSS takes precedence over the engagement CSS. For example, in the engagement CSS if you set the content text color as Red, and in the step CSS you set the color as Blue, the text color is displayed in Blue.

Gainsight PX has a built-in CSS with styling class hierarchy. The following table lists the default classes available in PX Guide engagements. You can modify these classes or add your own classes in the Engagement (Guide tab) CSS editor.

.apt-carousel-title {
   color: #747474;s
   text-align: *right*;