Skip to main content
Gainsight Inc.

Use Templates

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. Users can use these default templates in creating engagements or can customize as per their requirement. For example, you can customize a template to display your company logo.

Also, customers can create their own templates.

  • Goal: To create personalized engagement templates.

image 1.png

To create a template:

  1. Click Engagements from the left pane as shown in the following image.
    image 2.png
  2. Click Create. Select an engagement type from the below list:
    • Dialog
    • Slider
    • Guide
    • Email
    • Survey
  3. Enter the desired name for the engagement (For example: New Dialog Engagement) and Click Create.
    image 3.png
  4. Select your desired template and click Preview.
    image 4.png
  5. Click Use.
    image 5.png
  6. Customize the template from the Editor page.
    customize.gif
  7. Click the + icon to create responsive content for different device types (Computer/Mobile/Tablet).
    icon.gif
  8. Use the toggle button to have the control to display engagements in particular device type. For example, you have created engagement to display both in Computer and Mobile, but later decided to display only in Computer, in this case you can just turn off the toggle button under Mobile slide.
    1.gif
  9. Click save as template to save your personalized template.
    image 6.png

CSS Styling

CSS styling tab allows you to visualise and edit the default css styling.

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

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 collision for different Data Object Model (DOM) elements in the engagement (this is hidden and user cannot see it).
    image 8.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.image 9.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, user can add classes in the HTML editor by clicking Code View.
    editor.gif
  2. Click Save.
  • Was this article helpful?