Before you start, please make sure to read our guidelines:
The block-based, Visual Content Editor (VCE) has a built-in email template validation engine and an email HTML code generator. These tools help you check any formatting or content issues that could adversely affect your deliverability and marketing goals.
How does the template validation work?
The validation engine and the email generator are integrated in the block-based editor. When you create a new template or edit an existing one, it checks your HTML code against our guidelines and warns you in real-time via a message displayed in the live preview pane if it detects any issues.
Expand the validation warning messages to get a more detailed description of the errors. Each individual error description contains a link that will take you to the frame or block in which the issue has been found so that you can fix it.
As long as there are problems with your template’s syntax, you are not able to use it for campaign creation. On the Templates page, the thumbnail of an erroneous templates is marked with an orange exclamation mark and an error message.
The Email Generator
The Email Generator is integrated in the Content Creation step of the email creation flow. The email generator engine has the following improved features:
- Compiling the email in an improved way from the raw code of the content blocks and generating it for launching.
- Improved error correction and it is able to detect and correct the majority of the syntax errors by itself.
- Inlining the CSS to make the email appear in different inboxes without compatibility issues.
- Ensuring that you have syntactically valid HTML, CSS and ESL codes generated from the content blocks.
The Email Generator may translate HTML differently, but it always does so to maximize compliance with today's HTML standards.
These processes are running in the background. You can check the final result in the live preview pane and in the sent email, for example when sending test emails before launch.
Detecting errors
The email preview may change if the the HTML or ESL code does not contain entirely valid elements. In this case, the error should be corrected in the code, for example in the template or in the ESL code written for the campaign.
To ensure that the email is displayed correctly in any inbox, correct the occurring errors according to the preview of the generator.
Benefits of the Email Generator
As the Email Generator performs automatic corrections and adjustments to the HTML and CSS and ESL code in the background, you will have error-free, valid codes in the system.
Advantages
- Improving deliverability.
- Ensuring your email campaign is displayed correctly in all email inboxes.
- Generating valid codes.
The Email Generator does not affect the already running campaigns.
Email Generator monitors the following cases:
- Creating a new email campaign using an email template.
- Interpreting the code of the content blocks for displaying in the inbox preview.
- Adding tokens to your campaign:
- ESL token
- Personalization token (Editable, option codes)
- Email preview is displaying something suspicious or incorrect.
Troubleshooting
Use the VCE Editor with the Email Generator turned on:
1. Check the following in your email campaign:
a. Check any visible issues in the preview.
b. Check the correct operation of your links.
2. Send a test email before launch, to check the final result.
If you experience any issues
1. Make sure you use valid HTML/CSS code in your template or syntactically valid ESL-code. For example, check for the problems listed at Most common errors.
2. Correct the issues in the template (or in ESL) and update your campaign with the changes.
3. Test the campaign in the VCE Live Preview, and also by sending a test email to make sure it renders according to the preview.
If you experience any issues, but cannot resolve them on your own contact Emarsys Support for help. Describe the problem by providing context regarding the preview.
Most common errors
In the HTML-based block editor, these are the most common HTML tag issues:
| Issue | Example |
|---|---|
| Missing, incorrect or invalid closing tags for HTML elements. |
</<td>, </<span
|
| Lack of “ “ for attributes. |
href=https://bestrun.com/\" |
| Empty attributes. | <a href= …> |
| Invalid HTML structures. |
<p> and <ul> tags are inside another <p> <table> inside a <p> <table> inside an ESL token <div> inside a <p> |
Valid block code combinations
In the block editor, the most common errors are attributable to the use of invalid root elements in the HTML code.
The blocks you add to your template are represented by the #body# token in the code of your frame. When creating or editing the blocks, you need to consider how the #body# token is nested in the HTML of the template frame as the parent element of #body# determines which HTML tags can be the top-level elements, or root elements, in the blocks.
To avoid the block errors related to the use of invalid root elements, follow these basic rules that cover the most common frame structures.
Rule 1
If you choose <body> as the parent element of the #body# token in the frame, always use <table> and/or <div> as the root element in your blocks.
| Frame | Block roots |
|---|---|
...<body> #body#</body>... |
<table> <tr> <td>Content 1</td> <td>Content 2</td> </tr></table><div> Content3</div>
|
Rule 2
If you choose <center> as the parent element of the #body# token in the frame, always use <table> and/or <div> as the root element in your blocks.
| Frame | Block roots |
|---|---|
...<body>... <center> #body# </center>... </body>... |
<table> <tr> <td>Content 1</td> <td>Content 2</td> </tr></table><div> Content3</div> |
Rule 3
If you choose <div> as the parent element of the #body# token in the frame, always use <table> and/or <div> as the root element in your blocks.
| Frame | Block roots |
|---|---|
...<body>... <div> #body# </div>... </body>... |
<table> <tr> <td>Content 1</td> <td>Content 2</td> </tr></table><div> Content3</div> |
Rule 4
If you choose <table> as the parent element of the #body# token in the frame, always use <tr> as the root element in your blocks.
| Frame | Block roots |
|---|---|
...<body>... <table> #body# </table>... </body>... |
<tr> <td width=“10”> </td></tr><tr> <td>Content1</td></tr><tr> <td width=“10”> </td></tr>
|
Rule 5
If you choose td as the parent element of the #body# placeholder in the frame, always use <table> and/or <div> as the root element in your blocks.
| Frame | Block roots |
|---|---|
...<body>... <table> <tr> <td> #body# </td> </tr></table>... </body>... |
<table> <tr> <td>Content 1</td> <td>Content 2</td> </tr></table><div> Content3</div> |
Frame errors
When editing the frame of your template, you may run into the following issues and validation messages:
| Issue | Error message |
|---|---|
| Missing tokens. |
Error in 'frame'; missing #body# or #style# token. |
| Duplicated tokens. |
Error in 'frame'; multiple #body# or #style# tokens. |
| Misplaced tokens. |
Error in 'frame'; unexpected #body# or #style# token. |
| Empty frame. |
Error in 'frame'; frame is empty. |
The #body# token is nested in the tbody element.* |
Error in ‘frame’; unexpected <tbody>. |
* Currently, we do not allow this code combination in the template frame:
...<tbody>
#body#
</tbody>
...
Block errors
When editing the blocks of your template, you may run into the following issues and validation messages:
| Issue | Error message |
|---|---|
| The template has no blocks. | The template does not contain any blocks. |
| The template block is empty. |
Error in ‘New Block’; missing block root element. |
| The template contains a coding error. |
The template contains invalid blocks. |