Designing Your Program Emails

Your program is initially set up with default versions of program emails to get you up and running as quickly as possible. These default versions are loaded with generic images and messaging to convey the essence of the email. We recommend tailoring your program emails to ensure that the information is relevant to your program and product. See our doc on merge tags for information on how to include participant-specific details in your emails.

🔗 Editor layout

This section will walk you through the various parts of the email editor.

🔗 Contact information

This section allows you to customize the From Name and From Address fields, along with the email's subject line. A BCC can also be added, if you want a copy of this email to be sent to someone other than the participant—for example, a program manager.

If you plan to adjust the From email address, you will need to adjust your settings to ensure that our system is sending authentic emails on your behalf. Instructions can be found on our SaaSquatch & Emails page.

Please Note: All of these fields are required and initially populated with default information.

🔗 Horizontal toolbar

At the top of the editor you'll find the horizontal toolbar that allows you to do the following (from left to right):

• Preview how the email renders on a desktop, tablet or mobile screen.
• Buttons to Save the changes made to the email, Reset back to the default version, or head Back to the Program Settings page.
• View Component boxes to view how the individual components of the email overlay and interact with each other.
• View Code shows the underlying HTML source code for the email. Can be used to export email design.
• Toggle Images previews the email without images. Some users choose to not load images when viewing their emails so you should ensure the email remains readable without images.
• Send Test to send a test copy to an email address you specify. This allows you to see how the email looks when loaded by your email client.
• Import Template to import your own HTML source code for the email. Note that this feature will overwrite anything you have saved into the editor.

🔗 Workspace

Single clicking highlights the component and brings up a small menu in the upper right-hand of the component itself with four options:

• The Up arrow which will highlight the component higher up in the hierarchy (i.e. It will highlight the cell that contains the text you click the up arrow on).
• The Move button allows you to move the component to a different space. To use: click, hold and drag the move button to move the component to a new spot. A green bar will appear to assist you with placing the component.
• The Duplicate button duplicates the component, placing the newly created duplicate beside the original component.
• The Delete button which deletes the component.

While there is no 'Undo' button, there are two ways to resolve an error:

• The standard “undo” keyboard shortcut: Ctrl-z for Windows PCs and Cmd-z for MacOS.
• The ‘Reset’ button in the Horizontal Toolbar which restores the email to its default state. Clicking this button will erase any and all changes made.

Double clicking the component allows you to adjust the image or text in the component.

🔗 Vertical toolbar

From left to right, the vertical toolbar has four different sections that can be accessed using the four icons at the top.

The first adjusts the styling of the highlighted component. This includes adding classes, adjusting dimensions, text formatting and visual formatting such as borders, backgrounds and colours.

The second adjusts the settings for the highlighted component including alt text for images or IDs and titles for cells and text boxes.

The third lists all of the components in their hierarchical structure starting with the top body tag and going down. You can adjust the level a component is at by clicking and holding on the move icon and dragging the component up or down. Components can also be hidden using the eye icon to the right. Adjusting these settings will adjust any components nested within the component you have highlighted.

This provides a list of new components that you can drag and drop into the workspace. You can use this to add additional text, images, links and layout components to your email body.

🔗 Using the editor

If you would like to know how to do something that isn't listed here, please do not hesitate to reach out to our Support Team.

🔗 Add or delete components

All of the images, text, and links in the email are set into individual components that make up the structure of the email. These components are the building blocks of the email.

Note: New components will interact with the existing components in the email which can cause existing text and images to get shifted around. It is usually easier to make changes to existing components by updating an existing image or adding text to existing copy.

🔗 Adding a component

1. Navigate to the New Component list in the Vertical Toolbar.
2. Locate the type of component you want to add..
3. Click and drag the component into the Workspace and place it where you want the component to appear. A green bar will appear in the email to help you place the new component in your email.
4. (Optional) Adjust the component’s content or appearance using the tools in the Vertical Toolbar.
   • Double click your new component.
   • Click on the Paintbrush icon in the Vertical Toolbar.
   • If you added a text component, then click the Typography dropdown and enlarge the font size.
5. Click Save in the Horizontal Toolbar to save your work.

🔗 Deleting a component

1. In the Workspace, click on the component you want to delete.
2. Click the trash can icon to delete the component from the email.
3. Once you are satisfied with the changes you have made, click the Save button. If you’ve made an error, you can use the Back button to leave the editor and the changes will not be saved.

🔗 Update the email copy

Text is divided into text components that are set in different sections of the email.

1. Double-click to highlight the text component. This will activate the text editor for that component. If you need to make a new text component, then follow the process above for adding a component.
2. Revise the text in the component. Formatting of the text can be done using the formatting toolbar in the upper left-hand corner of the component.
3. With the text component highlighted, you can make further formatting changes, including the font, color, weight and spacing, by going into the Formatting section of the Vertical Toolbar.
4. If everything looks good in the Workspace, send yourself a test email using the Send Test button in the Vertical Toolbar. Note that short tags will not be populated with the correct information in the test email. You can verify that these work when completing test referral loops later in the implementation process.
5. If the test email looks good, click the Save button to save the changes.

🔗 Add a custom image

1. Click to highlight the component that you would like to update the image in. If you need to make a new image component, then follow the process above for adding a component.
2. Once the component is selected, double-click it to bring up the Select Image window. Click on the Add Images button to select the image that you would like to use. Once the image has loaded in the Select Image window, double-click it to add it to the new component.
3. Adjust the size and location of the image using the selectors in the Workspace.
4. If everything looks good in the Workspace, send yourself a test email using the Send Test button in the Vertical Toolbar. Short tags will not be populated with the correct information in the test email. You can verify that these work when completing test referral loops later in the implementation process.
5. If the test email looks good, click the Save button to save the changes.

🔗 Add dynamic content

It is possible to add dynamic content, such as the user's name or the amount rewarded by using Short Tags. Short Tags can be added to any text component in the email and will be updated with the actual content when the email is sent to participants.

1. Find the Short Tag you wish to use by referring to our list on the Short Tag page.
2. In the Workspace, double-click on the text that you wish to add a short tag too.
3. Copy in the short tag. Be sure to preserve the structure of the tag. It should be two "handlebar" brackets followed by the contents of the tag, followed with another two "handlebar" brackets in the opposite direction. As an example: {{user.firstName}}.
4. Once you have added the short tags, click the Save button to save your changes.
5. Sending a test email from within the editor will NOT populate the short tags, so you will need to complete a test referral loop to confirm that the short tags are correct and providing the desired information in the email.
   • Note: If there is no information that corresponds to the short tag you're using, there will just be a space in lieu of the short tag. For instance, if you selected "Hello {{user.firstName}}. How are you? in your email but the user did not have data in the firstName field, the email would render as "Hello . How are you?".

🔗 Import a custom-built email

The SaaSquatch email editor can accept any HTML-formatted email code. You can import any HTML-based email that has been created for you. To import your own custom code:

If you have made any custom changes, they will be over written by an import. If you would like to save the current email, use the View Code button in the Horizontal Toolbar.

1. Click on the Import Template button in the Horizontal Toolbar to open the import window.
2. Copy your script into the Import Template window. Review the copied code for accuracy and completeness.
3. Click the Import button to load the custom code into the Email Editor.
4. Review the rendered preview in the Workspace to ensure there are no errors.
   • Note: It is possible to make changes using the Workspace and Vertical Toolbar but larger issues require you to make changes to the code itself and re-import it. You cannot edit the code directly in the editor.
5. If everything looks good in the Workspace, send yourself a test email using the Send Test button in the Vertical Toolbar. Note that short tags will not be populated with the correct information in the test email. You can verify that these work when completing test referral loops later in the implementation process.
6. If the test email looks good, click the Save button to save the email.

🔗 If you need help...

If you need any help editing your program emails, please reach out to our Support Team for further assistance.