HTML Message Templates Best Practices

Updated April 16, 2024 17:34

When an Administrator is editing a Message Template it is possible to utilize a Code View and modify the message with HTML. This articles focuses on how to use HTML in your Message Templates and important considerations that can affect the deliverability of outbound emails.

Custom Code Advisory

Absorb will be unable to troubleshoot custom code used in a Message Template. For troubleshooting specific to your HTML, please test in an internal environment to determine the cause of the issue, or determine if you are using functions that will not work as detailed below.

Accessing Code View

From the Admin Experience you can edit a Message Template so as to present a message, or email exactly as you want to your Users. Beyond the standard rich text editor is the Code View that allows you to insert HTML for more advanced changes. To access the Code View please advise this method:

Access the Admin Experience.
From the left hand side of the Admin Interface open the Setup menu and click Message Templates.
From the Message Templates Report select the Message Template in the Language you want to edit.
Under Actions on the right hand side, click Edit Template.
On the right hand side of the rich text editor, click the ellipsis button. A new row will appear under the rich text editor.
Click the HTML Tag button to enable Code View.
The Message Template will be displayed as HTML instead of rich text.
Click the HTML Tag button again to complete editing from Code View.

Confirming HTML Changes

After making changes from the Code View, make sure to click the HTML Tag <> button to disable Code View and confirm the changes. Navigating away from the page without disabling Code View may cause changes to be lost. Make sure to save after closing Code View and confirming all changes.

Approved Functions

When editing a Message Template with HTML there are a number of functions that can be called to achieve certain outcomes. This section details the supported Tags and Attributes.

Approved Tags

An HTML Tag is a fundamental component of Hypertext Markup Language (HTML). It serves as a formatted command that provides instructions for structuring and presenting content within a web page. The following list includes all supported Tags:

```
<h1>
```
```
<h2>
```
```
<h3>
```
```
<h4>
```
```
<h5>
```
```
<h6>
```
```
<blockquote>
```
```
<p>
```
```
<a>
```
```
<ul>
```
```
<ol>
```
```
<li>
```
```
<b>
```
```
<i>
```
```
<strong>
```
```
<em>
```
```
<strike>
```
```
<code>
```
```
<hr>
```
```
<br>
```
```
<div>
```
```
<pre>
```
```
<img>*
```
```
<br>*
```
```
<hr>*
```
```
<u>
```
```
<span>
```
```
<table>
```
```
<tbody>
```
```
<thead>
```
```
<tr>
```
```
<td>
```

Self Closing Tags

Tags in the above list denoted with an * are self closing.

Approved Attributes

An HTML Attribute is a modifier that can be added to the opening Tag of an HTML element. These attributes either alter the default behavior of an element or provide additional information about it. The following table indicates the supported Attributes per Tag.

Tag	Supported Attributes
*	style
a	href, name, target
img	src, alt
table	width, cellpadding, cellspacing, border, align
td	align, width, height

Best Practices for Custom HTML

When using HTML for a Message Template it is important to remember there are potential conflicts that exist outside of your Portal. This section contains considerations to review if you preparing the HTML for a Message Template.

Email Width

For best results, emails should have a maximum width of 600-800 pixels. This will make them behave better within the preview-pane size of many email clients.

Design for Simplicity

While it may be possible to design an incredibly complex Message Template in consideration of the approved HTML functions above. A minimalist design approach will prevent your email from being considered spam, or flagged as potentially malicious. Overt customization may cause delivery issues depending on the recipient and their security settings.

Images Don't Always Load

Many email clients block images out-right, or will only allow images to load if the sender is specifically approved. So as to avoid including essential information that a User can miss. Don't use images to store important information. Anything that a User must receive should be, when at all possible, included as plain text.

Important to consider as well that an excess of images in an email may cause delivery to fail, or become incredibly delayed due to the size of the message itself.

Additional Code References

As Absorb does not allow for the usage of custom code outside circumstances such as HTML in a Message Template, do not include references to custom CSS, or Javascript in your HTML. Something like a custom accordion or tabs menu will not be able to reference code beyond what is included in the Message Template itself.