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

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
  2. Select the required template and click Preview.
    Preview.png
  3. Click Use to use the template in your engagement.
    ClickUse.png
  4. Customize the template from the Editor page.
    customize.gif
  5. 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
  6. 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 in Computer and Mobile but later decided to display only in Computer, you can just turn off the toggle button in the Mobile slide.
    Toggle button option.png
  7. Click the save as template button to save your personalized template to the Saved Templates tab.
    SaveAsTemplate.png

Configure CSS Styling

CSS styling tab allows you to visualize and edit the default CSS styling.

Following options are available for CSS styling:

  • Default Styling: This tab allows you to see a list of default rules pre-defined per engagement type.DefaultCSS.png

Note: User can only view the CSS in default styling tab.

  • 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.
    DialogCSS.png

Edit CSS Level

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

  1. Click CSS Styling tab. You will be automatically landed on Override styling.

By default, you will 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*;

CSS properties can be modified only on New Slides. Cannot be changed on Saved/Default/Recently Used templates.

  1. In addition, you can add classes in the HTML editor by clicking Code View.
    Code View.png
  2. Click Save.
  • Was this article helpful?