Change Password Link Template Button Does Not Appear in Desktop Outlook

Knowledge Articles
1

Overview

This article explains why the button in a change password (link) email is not rendered when viewed in Desktop Outlook.

Applies To

  • Email templates
  • Desktop Outlook

Cause

Desktop Outlook, particularly older versions, does not use a dedicated HTML rendering engine. Instead, it uses a Microsoft Word-based rendering engine. This can result in emails rendering differently in Desktop Outlook compared to other email clients, including the web-based Outlook application.

Solution

Use inline styling with the style attribute instead of Cascading Style Sheets (CSS) classes for the button to be rendered in older Desktop Outlook versions. These versions frequently ignore external or embedded stylesheets, leading to rendering inconsistencies.

e.g.

      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="{{url | escape }}" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Confirm</a> </td>
        </tr>
      </table>