Skip to main content
Gainsight Inc.

Use Templates

This article provides information on how to create and use templates for your engagements.

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.

UseTemp1.png

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.

CreateEng.png

  1. Select an engagement type from the following options:
  • Dialog
  • Slider
  • Guide
  • Email
  • Survey
  1. Enter the desired name for the engagement (Example: New Dialog Engagement) and Click Create.

NewEngagementDialogBox.png

  1. Select the required template and click Preview.

Preview.png

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

ClickUse.png

  1. Customize the template from the Editor page. Simply use the right side WYSIWYG for specific inline styling, embedding videos, images, and overlay settings.
  2. 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).

Device Option Editor.png

  1. 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.

Toggle button option.png

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

SaveAsTemplate.png

Configure CSS Styling

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%;
}

DefaultCSS.png

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.

DialogCSS.png

Edit CSS

You customize default styling by editing the Step and Engagement CSS details.

  • Step CSS: View and edit the CSS for each step of the Guide/Slider/Survey Engagements separately. This enhancement is particularly useful if you want the CSS edits to affect only a certain step and not the entire engagement. 
  • Engagement CSS: View and edit the CSS for the entire engagement within a single tab.

Note: 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 then the step CSS overrides the engagement CSS and the text color is displayed in Blue.

To edit CSS level of an engagement, perform the following steps:

  1. Click CSS tab. By default, you can see the pre-defined style in this tab.

CSSTab.png

  1. Select the CSS you want to edit, as required. For example: if you want to modify the content text alignment or font size, you need to set it on “.apt-carousel-content” as shown below.
.apt-carousel-title {
   color: #747474;s
   text-align: *right*;

Note: CSS properties can be modified only on new slides. The properties cannot be changed on Saved/Default/Recently Used templates.

  1. Additionally, you can add classes in the HTML editor by clicking Code View. Click the Code View button again to exit the HTML editor.

Code_View.png

  1. Click Save.
  • Was this article helpful?