HTML support in Emails

Feature requests
, , ,
288

Hi @shayan.moussawi,
Here’s an example of how it’s being used in our team.

Recipe:

image
image887×367 35.1 KB

Email:

image
image1477×652 64.6 KB

Notification:
image

To achieve this, what I did was test out different HTML inserts in 1 test notification and then documented the ones that did work for me.

Here’s the ones that I found worked, and you simply insert that around your usual text (see my plain text notification above)

- Heading 1: <h1>Your text</h1>
- Heading 2: <h2>Your text</h2>
- Heading 3: <h3>Your text</h3>
- Bold text: <b>Your text</b>
- Italic text: <i>Your text</i>
- Strong text: <strong>Your text</strong>
- Red text: <p style="color:red;">Your text</p>
- Green text: <p style="color:MediumSeaGreen;">Your text</p>
- Custom colour text: <p style="color:#FEBE10;">Your text</p>
- Huge red text: <p style="font-size:50px;color:red;">Your text</p><p></p>
- Red banner with white text: <p style="background-color:tomato; color:white;"><b>Your text</b></p>
- Huge red banner with white text: <p style="background-color:tomato; font-size:50px; color:white;"><b>Your text</b></p>
- Huge custom colour banner with white text: <p style="background-color:#febe10; font-size:50px; color:black;"><b>Your text</b></p>
- Bullet point list: <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
- Numbered list: <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
- Hyperlink: <a href="https://google.com">🔗Hyperlink</a>
- Blank row: <br> where you want the gap