Notification emails in HTML format

Overview

Lean IX supports sending notification emails in HTML format and allows to customize the header and the footer of each mail using a template. To enable this feature, please reach out to your Customer Success Manager. They then can turn on the customization option for HTML-based notification emails for your workspace.

When enabled, a custom header and footer section for all sent emails can be configured. The sections allow defining HTML code for an improved layout and even dynamic content in the header and the footer of a notification mail. Dynamic content will be generated by using a so called template engine that allows inserting variables into the text.

Thymeleaf Requirement

When you have the feature enabled from the MTM, the next step to do is to set the Header and Footer. In order to set up your email Header and Footer, we use the Thymeleaf templating engine. Please refer to the Thymeleaf template engine documentation for which expressions are allowed. Note that this configuration is a fairly technical task and requires HTML and some scripting knowledge.

🚧
Information
Please note that the maximum size for each template is limited to 50.000 characters

Enable HTML mails

To start using the HTML mails, you can do as follows:

Go to the Administration page

Click on the General tab

Scroll down until you see the HTML Mail Templates

Click on the checkbox to Enable HTML mails

Scroll down and click the Save button

When you enable the feature, a test button UI will appear. The UI offers to send a test mail based on the currently entered template or code. This allows to check the valid syntax and ensure proper formatting before enabling all notifications when saving the configuration. You can start experimenting by adding using the Sample Header and Footer snippet available on this page.

You can click on the Send Test Email button to see the result of the template. You will see a success notification when your templates are correct. You will then receive an email showing the template.

You will get an error when your template has issue, as shown here:

Variables allowed in the Thymeleaf

The variables that can be used in the HTML mails templates are:

workspaceName

userName

firstName

lastName

Notifications type that is allowed:

activation_success, bookmark.ownerChange.new, bookmark.ownerChange.old, bookmark.shared, comment.new, comment.replied, 
confirmation, email-notification, export, factSheet.created, factSheet.qualitySeal.broken, factSheet.subscribed, 
factSheet.unsubscribed, factSheet.updated.accountable, factSheet.updated.observer, factSheet.updated.responsible, 
invitation, invitation_accepted, invitation_approved, invitation_reminder, lifecycle.beforeChange, lifecycle.changed, 
password_expired, password_expires_soon, password_set, Poll participation email: added Fact Sheets, 
Poll participation email: initial invitation, poll.reminder, reset_password, snapshot.created, snapshot.restorationFailed, 
snapshot.restored, survey.invitation.test_run, welcome

Sample Header Snippet

Enter this snippet in the “Header Template“ section to test a sample HTML mail.

<style>
.chip {
  display: inline-block;
  padding: 0 25px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.chip img {
  float: left;
  margin: 0 10px 0 -25px;
  height: 120px;
  width: 120px;
  border-radius: 50%;
}
</style>

<div class="chip">
  <img style='width:49px;height:49px;' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAYAAABznEEcAAAAAXNSR0IArs4c6QAAAHhlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAADGgAwAEAAAAAQAAADEAAAAAvSNWDwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABLJJREFUaAXdWE2O2zYYJWlfIAWaJisrTYPsCvcEo9kFQe4wk11QzB1GuUEXE6C7ODfoIlN0F/kGTpbNn7RzspkcYEz2PVo0NBpRY1H0YBoCMn9E8nuPH78fS4jvoMhdcUimj5KRUCn3l0IVHxavc7Z3UXZC4v6vj3Mj5V4DcCmknH1avM4a44O7UUnw9JUZfW6gKtGfuDFpzPzju79T149RqxibuD1GWs1cW0rz9NPbU4kn0XJ1D1p4znfU0M/TJ5mbF6MexdiEe1TADthWUu5/XJz+xTbLt+WHb2fLf/Nbdx9S8ymee2df3v+BOkqJpgmjTUJEvC4+I9bifMY5KJNfpk9S24rwE42EEmsSRqnch6tY/FPgHW1EGKET1jFKNBJayIKAnEY6wG2MvGNOr1fRSChlckqWUqT0Umw3y/3p40M3thI6d+2hdTQSFSjrTumlmkRoA8bIlwRMu6mu1lD8dj29RbTCk3ZAsWlpjMilkoXUOq0HP7reaEKxUTQXS1Bny/eLH+4+gDbkb+hOcLWmqFPcsQS11YBWep8ul/1YJeqJOFAub9JapvRaNHpqZBcph5P5v6+ja4JaGItx4uKAESqRQhfMZHlavkA45CSjkKDn0bz7xhxvAabkHBr9SMlZDFKDSXjSbselhDst4JkSDLQFuSjp+SASdQL0/Uw5EHhy3+k6g7cMtTjcuF1kuEOMPphEPSYwa/UBt4A9PzbzXV/BEul6GhoAgyM23Sex4W6/CiHAtfWsls6AYyFlHLKIa+j/Df49I6Ad4ESL0H1wDHapdQy4iiH7BJO4IGw7r3RhSbOzRfbbXLLpB5OQSmXGmDc06M1ugQ1GdKNWWeDy72PZVt7pzjOTrBSCGcpIiWJ5InO2Y5dQOVeS+OnI5PBAew3ACFJi9vVEZo3x4O4QOV4SPBU9Ep8bqEr0N5EXnmn+5WTtahvztu7GkOONE2YsZg4JNPH06wsp8SRqJfANSTznO2ro9pHJ3LyQOoacVk1YYEYcE5SSYr/NBmpzSpLj3L6ltscgOe2aMCIhIF6XNgJ8p843mprcOTIpx3qXSHJaSQB8QkCmI4Iu/7SfaErOW+n1fLb7lFhyWkngrhcWTHVSHcA2Rt4xx/sqlhwfibySnNJ7tKH48Xdz6MZHOiznAYm82mOQnFYSFShelQm9R5MIbQBX4SUBoJ5XV6vCs30VS470ieRJO6CYQ0I5XGuBBSldq1tH1+vaIXUMOZ0AKgEZwF26+9SAPBeHoVqoEx4qp5MEBfEqMW8CaD6JNUZoJGbKcZ1y6od3o9qdmrAGPRaJiwNSQRNaFMxkycIXCPsyHCrnEgl6nvU3pHXacQWgsnqfIz2Z9SEVU84FEp502PEoYRMFbCLBwCVDx9jW6XlsORsS9Y0Bdm7gUhFEct/pOoMnQ6XwDcm5XWS4XUa/CzmWRN1X+7JWgu0qtYy0RLqetrneXcmxERsnn1YAX/lOvosA39WzWgFn0DZ/V3Ls1w5sTv/PcoATLWyr5w+cgfuEhI9i9lDy5ha7knP5k031Z6gJoFf/6uyXhI977dk2uZKz1oQQGRTxBic1b5vbZ4wRHTaRta2BAV6LnDbZN37sPyIZeGabHweOAAAAAElFTkSuQmCC" alt=" ">
  <text th:text="${'Enjoy the collaboration,  ' + firstName}">Enjoy the collaboration</text>
</div>

<hr>
<h1 th:text="${'Welcome to Header workspace ' + workspaceName}"></h1>
<h2>

<div th:switch="${notificationType}"> 
  <p th:case="'invitation'">Welcome in Header</p>
  <p th:case="*">Any other text</p>
</div>

<div th:switch="${notificationType}"> 
  <p th:case="'invitation'" style="display: none;">

Sample Footer Snippet

Enter this template in the “Footer Template“ section to test a sample HTML email.

<hr>
<a href="https://app.leanix.net/CSIDemo/inventory">Welcome into the Footer Section</a>
<style>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: blue;
  color: white;
  text-align: center;
}
</style>

<div class="footer">
  <p>Continue: This is an example for the footer</p>
</div>

Overview

Thymeleaf Requirement

🚧Information

Enable HTML mails

Variables allowed in the Thymeleaf

Sample Header Snippet

Sample Footer Snippet

🚧
Information