How can I add styling and images to emails sent to participants?

Full customization is possible with email bodies, as LoyaltySurf emails support HTML.

Instructions on how to implement HTML emails

  1. Download this email.html sample file to start with
    1. Note: this file does not include any <html></html> tags. If you use a different file to start, make sure to exclude those tags.
  2. Edit the HTML contents
  3. Inline the CSS and minify the HTML code before pasting it into the body field
    1. Use a CSS inliner tool such as the Mailchimp CSS Inliner Tool (because some email clients strip out tags from emails)
    2. Use a tool like the HTML Minifier to minify your HTML
    3. Make sure there are no <html></html> tags
    4. Your HTML file should look something like this (inlined and minified): email.min.html
  4. Paste the minified HTML content into the email body field
    1. Note: The real-time preview section won't reflect the HTML accurately (see image below)
    2. Test what your email looks like by clicking the bottom-left 'Test Email' button within the Email editor popup window
    3. 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 on in local development (this code will need to be minified)
  • email.min.html = (minified version) the code that you would paste into the LoyaltySurf email window body.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.