David Simpson Apps

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.

Browse the Email template gallery for ready-to-use examples.

Images

Images must be hosted on public internet servers. Reference them using full URLs:

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

Subitems

Use template blocks to repeat content for each subitem.

Unordered list:

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

Table:

<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>

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

<!-- Data 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

<!-- Data 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>

Item Email

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

 

Please note: Any updates sent via the {Item.Email} email address will appear in monday.com as an update by the owner of the automation. Details of the actual sender’s email address will be lost.

Board URL

<!-- Data 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

<!-- Data 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>