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.

QR codes

The app supports displaying QR codes for various scenarios. The QR code can be accessed as a data URI or a publicly available web address.

Data URIs are used so that the image produced does not have to be externally hosted and accessible on the internet.

Please note that some email providers may block images which use data URIs.

In each of the examples below, the name of the column, item, board or account has been added as alt text for the image and the image has been wrapped in an anchor containing the URL for the QR code.

Link columns

For a column of type Link, named Website, the QR code can be added as follows:

CODE

<!-- Date URI -->
<a href="{Website.URL}" target="_blank">
  <img 
    src="{Website.URL.QR.dataURI}" 
    width="150" height="150" 
    alt="{Website.text}">
</a>

<!-- publicly available web address -->
<a href="{Website.URL}" target="_blank">
  <img 
    src="{Website.URL.QR.URL}" 
    width="150" height="150" 
    alt="{Website.text}">
</a>

Item URL

CODE

<!-- Date URI -->
<a href="{Item.URL}" target="_blank">
  <img 
    src="{Item.URL.QR.dataURI}" 
    width="150" height="150" 
    alt="{Item.Name}">
</a>

<!-- publicly available web address -->
<a href="{Item.URL}" target="_blank">
  <img 
    src="{Item.URL.QR.URL}" 
    width="150" height="150" 
    alt="{Item.Name}">
</a>

Board URL

CODE

<!-- Date URI -->
<a href="{Board.URL}" target="_blank">
  <img 
    src="{Board.URL.QR.dataURI}" 
    width="150" height="150" 
    alt="{Board.Name}">
</a>

<!-- publicly available web address -->
<a href="{Board.URL}" target="_blank">
  <img 
    src="{Board.URL.QR.URL}" 
    width="150" height="150" 
    alt="{Board.Name}">
</a>

Account URL

CODE

<!-- Date URI -->
<a href="{monday.Account.URL}" target="_blank">
  <img 
    src="{monday.Account.URL.QR.dataURI}" 
    width="150" height="150" 
    alt="{monday.Account.Name}">
</a>

<!-- publicly available web address -->
<a href="{monday.Account.URL}" target="_blank">
  <img 
    src="{monday.Account.URL.QR.URL}" 
    width="150" height="150" 
    alt="{monday.Account.Name}">
</a>