How can I add styling and images to emails sent to participants?
Full customization is possible with email bodies, as GrowSurf emails support HTML.
Instructions on how to implement HTML emails
- Download this email.html sample file to start with
- Note: this file does not include any
<html></html>
tags. If you use a different file to start, make sure to exclude those tags.
- Note: this file does not include any
- Edit the HTML contents
- Note: If you are using the {{shareUrl}} dynamic text variable in an HTML element, please use {{shareUrlRaw}} instead. More details here.
- Inline the CSS and minify the HTML code before pasting it into the body field
- Use a CSS inliner tool such as the Mailchimp CSS Inliner Tool (because some email clients strip out tags from emails)
- Use a tool like the HTML Minifier to minify your HTML
- Make sure there are no
<html></html>
tags - Your HTML file should look something like this (inlined and minified): email.min.html
- Paste the minified HTML content into the email body field
- Note: The real-time preview section won't reflect the HTML accurately (see image below)
- Test what your email looks like by clicking the bottom-left 'Test Email' button within the Email editor popup window
- Note: Line breaks in your code will be interpreted as a <br>. To resolve the issue, remove all line breaks from your code.
Example files:
The following are example files referenced from the instructions above.
- email.html = the code that you would work in local development (this code will need to be minified)
- email.min.html = (minified version) the code that you would paste into the GrowSurf email window body.