SaaSquatch Help Center

SaaSquatch offers a WYSIWYG (What You See Is What You Get) drag-and-drop editor that allows you to customize the look and contents of the emails sent to your participants.

Default Versions

The editor page will initially load with the default version of the email you are viewing. These default versions are intended to get you up and running as quickly as possible with your Growth Automation Program and contain several dynamic Short Tags that ensure the messaging is dynamically updated to match the parameters of your specific program. Furthermore, these default versions are loaded with generic images designed to convey the essence of the email.

You can return to these default version at any time by clicking on the “Reset” button above the editor. We highly recommend reviewing these default templates and making changes to ensure that the information your users receive is relevant to your program and product.

Editor Layout

Contact Information

This section allows you to specify the "From" portion of the email by using the From Name and From Address fields as well as the Subject line of the email using the Subject field.

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

The Horizontal Toolbar

The 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):

  • Adjust the view so you can preview how the widget renders on a desktop, tablet or mobile screen.
  • Buttons to Save the changes made to the widget, Reset back to the default version, or head Back to the Program Settings page.
  • View Component View Component boxes allowing you to view how the individual components of the email overlay and interact with each other.
  • View Code View Code allows you to view and copy the underlying HTML source code for the email.
  • Toggle Images Toggle Images will preview the email without images. This is useful as some user's elect to not load images when viewing their emails. It is always good practice to ensure the email remains readable without rich content like images.
  • Send Test Send Test will allow you to send a test email to an email address of your choosing. This allows you to see how the email looks when loaded by an email client.
  • Import Template Import Template is used to copy in your own HTML source code for the email. Note that this feature will overwrite anything you have saved into the editor.

The Workspace

This is the space where the email you are editing is rendered as well as where you will interact with its various components.

By default each individual component, including text, images, buttons and cells are surrounded by a dotted line enabling you to see how they are laid out and interact with each other. You can interact with the components in three ways, hovering, clicking and double clicking.

Hovering over a component will highlight it in blue and indicate what it is (text, image, cell, etc). This is a great way to see what components may be nested within other components as well as ones that may rely on others for placement or sizing.

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

  • The Up arrow which will instead 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 which allows you to move the component to a different space. To use this, click and hold on the move button and then drag the component to the new spot. You will notice a green bar appears to assist you with placing the component.
  • The Duplicate button which will duplicate the component, placing the newly created duplicate beside the original component.
  • The Delete button which will delete the component.

While there isn't an explicit 'Undo' button, there are two options if you make an error:

  • The ‘Reset’ button in the Horizontal Toolbar will restore the email to its default state. Clicking this button will cause you to lose any and all changes you have made.
  • The standard “undo” keyboard shortcut, which is Ctrl-z for Windows PCs and Cmd-z for MacOS.

Double clicking inside the component you wish to edit will allow you to adjust the contents of the component, be it image or text.

The Vertical Toolbar

From left to right, the vertical toolbar has four different sections that can be individually accessed by clicking on the four icons at the top of it.

Toolbar icon The first allows you to adjust the styling of the highlighted component. This includes adding classes, adjusting dimensions, text formatting and the visual formatting such as borders, backgrounds and colours.

Toolbar icon The second allows you to adjust the settings for the components including things like alt text for images or IDs and titles for cells and text boxes.

Toolbar icon The third lists all of the components in their hierarchical structure starting with the top body tag and going down from there. In this list you can adjust the level a component is at by clicking and holding on the move icon and dragging the component up or down. You can also hide a component by clicking on the eye icon to the right. Note that either of these settings will adjust any additional components nested within the component you have selected.

Toolbar icon The final section 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 as needed.

How Do I...

This section is designed to provide you with step-by-step instructions for performing several common tasks you might need to do with the email 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 Success Team.

How Do I Import a Custom Built Email?

The SaaSquatch email editor can accept any HTML-formatted email code. This means that you can easily import any HTML-based email that has been created for you. Simply follow these steps to import your own custom code:

While you can use the Reset button to return the email to its default state (see Default Versions above), if you have made any custom changes, they will be over written by an import. Be sure to save your code using the View Code button in the Horizontal Toolbar.

  1. Click on the Import Template button Import Template in the Horizontal Toolbar to open the import window.
  2. Copy your script into the Import Template window and be sure to review the copied code to ensure that it was copied completely and correctly.
  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: While it is possible to make small changes using the Workspace and Vertical Toolbar, larger issues may require you to make changes to the code itself and re-import it. You cannot edit the underlying 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 import and update the look of the emails received by your users.

How Do I Add/Delete a Component?

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

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

To add a new component to the email, navigate to the New Component list in the Vertical Toolbar and locate the type of component you would like to add. Click and drag that component from the Vertical Toolbar into the Workspace and over the area of the email you would like to add. A green bar will appear in the email to help you place the new component in your email.

To delete a component, click on it in the Workspace to highlight it. You should see a little trash can icon appear on the border of the component. Click the trash can icon to delete the componenent from the email.

Once you are satisfied with the changes you have made, click the Save button. If you have made an error, you can use the Back button to leave the editor and the changes will not be saved.

How Do I Add a Custom Image?

It is possible to easily replace or add images to the email directly within the editor.

  1. Click to highlight the component that you would like to update the image in. If you need to make a new image component, refer to How do I Add/Delete A Component.
  2. Once you have selected the component to update, 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 upload from your computer or web address. 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. 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 and update the look of the emails received by your users.

How I Update The Copy of The Email?

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

  1. Double-click to highlight the component that you would like to update the text in, this will activate the text editor for that component. If you need to make a new text component, refer to How do I Add/Delete A Component.
  2. Make the changes to the text in the component. You can also adjust the formatting of the text using the formatting toolbar that will appear in the upper left-hand corner of the component.
  3. With the text component highlighted, you can make further formatting changes, including the font, colour, 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 and update the look of the emails received by your users.

How Do I Add Dynamic Content?

It is possible to add dynamic content, or content that automatically updates as needed, such as the user's name or the amount rewarded by using a feature we call 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 actually sent to participants.

  1. Locate the Short Tag you wish to use by referring to our list on the Short Tag doc page.
  2. In the Workspace, double-click on the text that you wish to add a short tag too.
  3. Add 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, closed 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 and push them out to your implementation.
  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 correctly placed and providing the desired information in the email.
    • Note: If there is no information that corresponds to the short tag you have chosen to use, the email will just render with 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?".

If you have any difficulties creating and editing your email, please do not hesitate to reach out to our Success Team for further assistance.