Preparing your HTML email templates

The templating for HTML templates uses exactly the same syntax as described in Preparing your Word templates.

However, preparing HTML code and any necessary images is a somewhat more complicated challenge than simply designing a basic Word template. For this reason, we have supplied the Email template gallery so that you can copy the HTML files. Some of these files will link to images on the public internet. You will also need to host any images used in your email on the public internet too.

Images

An example of the HTML tag for an externally hosted image is given below:

CODE

<img src="https://yourdomain.com/path/to/logo.png" width="300" height="80" alt="Your company logo">

Subitems

One common pattern for subitems is to build a list or a table.

Subitems can be added as lists or table rows see the example templates in the Email template gallery for further details of how to achieve this, but basically they can be listed in an unordered list like so:

CODE

<ul>
  {#Subitems}
    <li>{Item.Name} ({Item.ID}) – {Column Name}</li>
  {/Subitems}
</ul>

…or in a table like so:

CODE

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Column Name</th>
    </tr>
  </thead>
  <tbody>
    {#Subitems}
      <tr>
        <td>{Item.Name}</td>
        <td>{Item.ID}</td>
        <td>{Column Name}</td>
      </tr>
    {/Subitems}
  </tbody>
</table>

Multiple subitems will be displayed by the contents of the repeating block surrounded by the template blocks – {#Subitems} and {/Subitems}.

When viewing HTML tables containing the subitems block surrounding a table rows, the displayed HTML template will not always render correctly until the monday.com data has been added to complete the HTML document.

In these cases, it is important to send some test emails to check the HTML rendering.