Using [if mso] to configure button in User Invite Email Template

For our User Invitation Template I’m including a button for the ${regUrl}. The Microsoft Outlook local client does not display the button properly, so I used the following logic to check for Microsoft Outlook and adjust accordingly.

<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
<![endif]-->
<span style="mso-text-raise: 15pt;">Register for Password Self-Service</span>
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
<![endif]-->

This works with other HTML Editors and tools, but IDN strips it out when you save the template. Can this same if statement be accomplished using Velocity? Thanks for your input.

Welcome to the developer community Chad.

Which part does it strip out? Can you show us the before and after so we can see exactly what is happening?

BEFORE

<td style="padding:0px 40px 0px 40px">
										<a rel="noopener" target="_blank" href="${regUrl}" style="background-color: #88F3B9; font-size: 14px; font-family:'poppins' , sans-serif; font-weight: bold; text-decoration: none; padding: 16px 50px; color: #51575e; border-radius: 5px; display: inline-block; mso-padding-alt: 0;">
    <!--[if mso]>
    <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
    <![endif]-->
    <span style="mso-text-raise: 15pt;">Register for Password Self-Service</span>
    <!--[if mso]>
    <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
    <![endif]-->
</a></td>

AFTER:

<td style="padding: 0px 40px 0px 40px;">
                <a href="${regUrl}" style="background-color: #88f3b9; font-size: 14px; font-family: 'poppins', sans-serif; font-weight: bold; text-decoration: none; padding: 16px 50px; color: #51575e; border-radius: 5px;">
                    Register for Password Self-Service
                </a>
</td>

Our email template service uses an HTML sanitizer that enforces a list of allowed HTML tags and attributes, which is why you are seeing some of them removed from the final result. The list of allowed HTML tags and attribute can be found in the email template docs.

Allowed formatting elements (style is the only allowed attribute): “b”, “i”, “font”, “s”, “u”, “o”, “sup”, “sub”, “ins”, “del”, “strong”, “strike”, “tt”, “code”, “big”, “small”, “br”, “span”, “em”

Allowed block elements (style is the only allowed attribute): “p”, “div”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”, “ul”, “ol”, “li”, “blockquote”

Allowed tags and attributes:

tag attributes
body id
img id, src, alt, height, width
html id
a id, href
table id
tr id
td id
th id
br id

Comments, including conditional comments, are not allowed.

Most styling is allowed. The list is so long that it’s probably not useful to document here.

Thanks Colin. That makes sense. Curious if others have found a better way to use buttons that work with MS Outlook Client.

Hi @colin_mckibben , so does this mean that things such as:

<td width="30%">
<td colspan="3">

are not allowed in OOTB Email Templates?
On a side note… I’m testing sending emails from IDN Workflows, and its interesting to note that Workflows do not strip out anything from my original HTML body content. They also render HTML tables just fine. The only issue I see is that emails sent from Workflows do not render Base64 encoded images though…

I don’t believe so, but if you identify attributes that work but aren’t listed in the docs then please let me know.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.