HTML Template Troubleshooting Guide

Introduction

The HTML template editor makes email creation accessible to everyone without coding expertise. However, even when using the visual editor, it's easy to accidentally break your template. This guide focuses on one main goal: keeping your HTML code intact while making customisations.

Common Ways HTML gets broken

Merged Tags

Merge tags are placeholders that you can use in your templates to dynamically insert information. These placeholders get replaced with actual content when the email or template is rendered.

For example, instead of manually typing a user’s name every time you send an email, you can use a merge tag like {{firstName}} and it will automatically insert the user’s first name when the email is sent.

What happens: Your personalisation doesn't work, or worse, your merge tags appear as literal text in your sent emails.

Common mistakes:

<!-- Missing closing braces -->
Hello {{firstName
<!-- Extra spaces -->
Hello {{ firstName }}
<!-- Incorrect syntax -->
Hello {firstName}

Correct format:

Hello {{firstName}}

Prevention tip: Copy and paste existing merge tags rather than typing them manually.

Breaking Conditional Logic

If statements allow you to add conditional logic to your templates. With an if statement, you can show or hide content based on certain conditions. For example, in the successful booking email, company name will only show if it has been entered by the customer during the booking process.

What happens: Content that should be conditionally shown/hidden appears incorrectly or not at all.

Common mistakes:

<!-- Missing % symbol -->
{if Requirements != ''}
  <p>content here</p>
{endif}
<!-- Mismatched opening/closing tags -->
{%if Requirements != ''%}
  <p>content here</p>
{%if%}
<!-- Unclosed conditional statement -->
{% if Requirements != ''%}
  <p>{{Requirements}}</p>

Correct format:

{% if Requirements != ''%} 
  {{Requirements}}
{%endif%}

Prevention tip: Keep conditional logic simple. Test with different data scenarios.

Common Button Problems and Solutions

Buttons are particularly prone to breaking in email templates. Here are common issues:

Disappearing buttons:

Cause: Accidentally deleting the container element
Solution: Always select the button text, not the entire button, when editing
Prevention: Use the structure panel to identify the button component before editing

Broken links:

Cause: Incomplete URLs (missing "https://") or spaces in URLs or merged tag has incorrect syntax
Solution: Always include the full URL starting with "http://" or "https://" and check the merged tag syntax (see above)
Prevention: Test all links in preview mode before sending

Buttons displaying as plain text:

Cause: Editing button HTML directly and breaking the code structure
Solution: Recreate the button using the button element tool
Prevention: Only edit button text and properties through the visual editor

Inconsistent button appearance across email clients:

Cause: Using unsupported styling options
Solution: Stick to basic button styles and avoid gradients or complex effects
Prevention: Test emails in multiple clients before sending

Safe Editing Practices

Make One Change at a Time

Don't try to make multiple changes at once. Make a single change, then test it before moving on.

Use the Test email feature

After each change, click the test email to make sure nothing is broken.