Email Template Builder

Work with Elements

1. Select the required Element. The element is highlighted and more options appear.
2. You can perform following actions:

• Select Parent: To navigate to the element parent, click the Up Arrow icon and select required parent option.
• Move: To move the element to another container or block, click the Move icon.
• Delete: To delete the element, click the Delete icon.
• Edit: To delete the saved details of element, click the Edit icon.
• Style: To apply styles to elements, click the Style tab and apply one or more format options.

Add Blocks

Users can select any container option from the Blocks library when creating email layouts. Each selected block displays a predefined number of Containers. Gainsight has restricted adding additional containers in a block, however you can select from available block-container options or choose to remove containers. This standardizes the email template design process, ensuring consistency, reducing layout errors, and simplifying email creation.

To add blocks and containers in the email template layout:

1. Drag and drop the Blocks element to the email template layout.
2. Select a container type.

Add Text

To add texts in the email template layout:

1. Drag and drop the Text element to the email template layout.
2. Delete the default text ‘Insert your text here’.
3. Enter the required text. 
4. Select the text.
5. Select one or more options from the formatting section such as font, increase font size, decrease font size, font color, bold, italic, underline, link, so on.
6. (Optional) To apply style to Text:
   1. Select the text element.
   2. Click the Style tab. 
   3. Apply one or more format options.

Note

• You can easily paste tables and inline images from various sources, such as Google Sheets or Microsoft Excel, directly into the Text element.  
• Furthermore, you can add images in the Text element directly using the Rich Text Editor Toolbar. 
• Text alignment is determined at the container level, not for the selected portion. To align a specific portion of text, place it in a separate text element to customize the alignment.

<p class="MsoNormal" style="margin:0cm; font-size:12pt; font-family:'Calibri',sans-serif; color:#1F497D;">
  <b><i><u>This is a formatted text</u></i></b> 
  <span style="color:red; background:yellow;">with inline styles</span>.
</p>

<p><strong><em><u>This is a formatted text</u></em></strong> with inline styles.</p>

<p class="MsoNormal" style="margin:0cm; font-size:12pt; font-family:'Calibri',sans-serif; color:#1F497D;">
  <b><i><u>This is a formatted text</u></i></b> 
  <span style="color:red; background:yellow;">with inline styles</span>.
</p>

<p class="MsoNormal" style="margin:0cm; font-size:12pt; font-family:'Calibri',sans-serif; color:#1F497D;">
  <b><i><u>This is a formatted text</u></i></b> 
  <span style="color:red; background:yellow;">with inline styles</span>.
</p>

Add Image

To add images in the email template layout:

1. Drag and drop the Image element to the email template layout.

   1. To upload image:

      1. From Upload tab, click Choose an Image to upload. 

      2. Select image from the system.

   2. To add image web address:

      1. From the Web Address tab, enter image URL.
2. Add Alternate text for the image.
   
3. Click Add Link. 
4. Place the cursor in the Insert Token container.
5. Enter the redirection link.
6. (Optional) Click Add link description for screen readers to read aloud to add a description.
   
7. (Optional) Turn on the Link Tracking toggle button.

Note:  Link Tracking enables Gainsight to track the user clicks on the link.

8. Click Update.
9. (Optional) To apply styles to Image:

1. Select the image element you added.

2.  Click the Style tab. 

3. Apply one or more options from the Dimension and Decorations sections.

IMPORTANT:

• Image size must be less than or equal to 2MB.
• Image must be in one of the following formats: 

     PNG, JPG, JPEG or GIF

Add Reports

To add reports in the email template layout:

1. Drag the Reports element to the email template layout.
2. Select one of the following Report Type:

• Inline
• Attachment

3. For Attachment Report Type:

   1. Select Attachment Report Type option.
   2. Enter Report Attachment Name.
   3. Click Update.
4. For Inline Report Type:
   1. Select Inline Report Type option.
   2. Click Update.
5. Double click the report that you add. The Edit Report window appears.
6. From the Edit Report dropdown list, select a report.
7. Click Edit. The Edit Report window is displayed.
8. From the Report dropdown list, select the report to be added.
9. (Optional) Click the Add Filter icon to add filters.
   Note: Consistent with the previous version, the new widget does not support Filter on Measure.
   
   1. From the Field dropdown, select a field.
   2. From the Value dropdown list, select one of the following fields to fetch the data.
      • ‘To’ Recipients > Person
      • Company > GSID
      • Relationship > GSID
      • Relationship Type > GSID
   3. Click Apply.
      
      Note: To ensure accurate mapping when using Add Filter, select the specific field from the lookup dropdown list, not the parent lookup field. Data validation is not applied to SFDC reports, so users must manually ensure that data types match to avoid errors.
10. (Optional) Click the Change visualization icon to select the required visualization type of the report.
    Note: 
    • CSMs can change the visualization of any report to a Tabular report if required.
    • Tabular Report displays a table of only five columns and 20 rows.
11. Click Run Report.
12. (Optional) Click the Settings icon to select one of the following:
    
    • Grid Options: Use grid options to freeze the first column and wrap text.
    • Ranking and Sorting: Use ranking if you want to include Top (ASC) x or Bottom (DESC) x records based on a particular field in the report. For more information on how to use Ranking, refer to the Advanced Report Settings article. 
      Note: Currently, the configured Row Height for a report is not applied in emails sent from Cockpit, P360, or Journey Orchestrator.
      
13. Click Save Report.

Add Survey

To add survey in the email template layout:

1. Drag and drop the Survey element to the email template layout.
2. Select one of the following Survey Type. 

• Button
• Link
• Question

3. For Button or Link Survey Type:
   1. Enter Display Text.
   2. From Choose a Survey dropdown, select the required survey.
4. (Optional) Turn on Enable Link Tracking toggle button.
5. Click Update.
6. (Optional) To apply style to the Survey:

• Select the added survey element.
•  Click the Style tab. 
• Apply one or more format options.

Add Attachment

To add attachments in the email template layout:

1. Drag and drop the Attachment element to the email template layout.
2. Select a file from the system.

IMPORTANT:

File size must be less than or equal to 5MB.

Add Button

To add buttons in the email template layout:

1. Drag and drop the Button element to the email template layout.
2. In the Button Text field, enter the text to be displayed on the button.
3. Place the cursor in the Insert Token container.
4. Enter the redirection link.
5. (Optional) Turn on Enable Link Tracking toggle button.
   Note: Link Tracking enables Gainsight to track the user clicks on a button. This information is recorded in Journey Orchestrator Analytics.

6. (Optional) From the Adjust Corner Radius option, set the button corner radius. 
   Note: The maximum corner rounding radius is limited to half the button's height.

7. Click Update.
8. (Optional) To apply style to Button:

• Select the added button element.
• Click the Style tab. 
• Apply one or more format options.

Note: To edit a token properties, click the added token and modify the required information.

For more information on token properties, refer to the Token section.

Add Video

To add videos in the email template layout:

1. Drag and drop the Video element to the email template layout.
2. Enter a video link.
3. Enter the Alternative Text.
4. In Video Thumbnail, click Browse and select an image from the system.
5. Select the Video Player Icon.
6. Click Update.
7. (Optional) To apply style to Video:

• Select the added video element.
• Click the Style tab. 
• Apply one or more options from the Dimension and Decorations sections.

Add Token

To add tokens in the email template layout:

1. Drag and drop the Token element to the email template layout.
2. Double click the token placeholder. The Token Properties window appears.
3. In Display Name field, enter a label for the tokenized field.
4. In the Default Value field, enter the text that is added if the token value is missing.

For Example: For a First Name field that is blank, the default could be Customer.

5. Select required value from the Default Mapping drop-down menu.
6. Select required value from the Value Type drop-down menu.

• CURRENCY 
• DATE
• NUMBER
• TEXT

7. Click Update.
8. (Optional) To apply style to Token:

• Select the added token element.
• Click the Style tab. 
• Apply one or more format options.

Add Divider

The Divider element is used to add a dividing line between the containers.

The divider line can be of following types:

• Dotted 
• Dashed
• Solid
• Double
• Groove
• Ridge
• Inset
• Outset

To add a divider:

1. Drag and drop the Divider element to the email template layout.
2. (Optional) To apply style to Divider:

• Select the added divider element.
• Click the Style tab. 
• Apply one or more format options.

Add HTML

To add HTML:

1. Drag and drop the HTML element to the email template layout. The HTML editor appears.
2. Type the HTML code in the editor.
3. Click Update.

Add Socials

Admins can now choose from a variety of social media icons available in the Social Element. They can select up to five icons at a time.

To add Socials:

1. Drag and drop the Socials element to the email template layout. 
2. Double click the socials element you added. The Socials Properties window appears.
3. In the Link field, enter the redirection link of the social network site. 
4. Enter Alternate Text.
5. Click Update.
6. (Optional) Click Close icon, to remove the respective social network option.
7. (Optional) To apply style to Socials:

• Select the added socials element.
• Click the Style tab. 
• Apply one or more format options.

Add C360 Layouts

To add C360 Layouts:

1. Drag and drop the C360 Layouts element to the email template layout. 
2. Select Layout Type from the drop down menu.
3. Enter the Display Text.
4. (Optional) Turn on the Enable Link Tracking toggle button.
5. Click Update.
6. (Optional) To apply style to C360 Layout Button:

• Select the added C360 Layouts element.
• Click the Style tab. 
• Apply one or more format options.

Note: If you are unable to create or edit Email Templates, you may not have the required Journey Orchestrator permissions. 

Button Appearance in Outlook with Active Link Tracking

When emails are sent through SendGrid with Link Tracking turned on, button styles may appear differently in Outlook for Windows (versions 2007–2019 and Office 365 desktop).

The variation occurs because Outlook does not support border-radius CSS property on standard HTML <a> tags, which are used when link tracking is active. As a result, buttons may appear with square corners when Link Tracking is turned on, and rounded corners when it is off in these Outlook versions.

This behavior is applicable for regular email button, Survey button and C360 layout button. 

Note: Button rendering is consistent in Gmail and the Email Template Preview, regardless of whether Link Tracking is turned on or off.

Default Mapping Support

Template Body

The Template Body section allows you to configure padding for the Template Body and change its background color.

To configure padding and background color for Template body:

1. Navigate to General Settings.
2. Click Template Body. 

For Background:

3. Click the filled color box besides Background. The color palette appears.
4. Select a required color.
5. Click outside color palette to apply changes. 

For Internal Padding:

6. Enter the required value to the Top, Bottom, Left and Right sides to apply padding between the template body and email content area.

     Note: You can apply maximum 40px padding for all the sides.

Email Content Area 

You can configure settings such as padding, width, background color and more for Email Content Area. 

To configure settings for Email Content Area:

1. Navigate to General Settings.
2. Click Email Content Area.
3. Provide the following details:
   1. Fluid Width: Select the Fluid Width toggle to make the email width dynamically adapt to the screen size of the device in which it is viewed.
   2. Width: Enter the required width (630px is the recommended width).
      Note: Clicking the Close icon beside the Width field makes the email width fluid.
   3. Background: Select the required background color.
   4. Font: Select the required font.
   5. Font Size: Select the required font size.
   6. Font Color: Select the required font color.
   7. Internal Padding: Enter the required value to the Top, Bottom, Left and Right sides to apply padding between the email content area and containers. 

Note: You can apply a maximum 40px padding for all the sides.

Mobile Settings

You can turn ON the Mobile Responsive toggle switch to ensure that all the elements in the selected container or email content area are clearly visible on mobile devices for an optimal user experience.

Note: You can also manually turn OFF the Mobile Responsive toggle switch from the Style tab for specific image or video thumbnail, if required.

Advanced Settings

Advanced Settings option (in the Elements tab) is available for large or complex templates that may cause sluggish scrolling or delayed edits. You can use this setting when:

• The template is very large or highly styled.
• The editor UI freezing, lagging, or scrolling slowly.
• You are importing HTML (pasting code) and notice a performance degradation.
  Note: This mode is optional and should be enabled only when you experience performance issues.