Email notification script

[surajkumar95]

I have a requirement to build a email notification script, where i need to create a button that will be used in notification wherever it is required. So, I have created it but the issue i am facing is the button is appearing correctly on the outlook web and preview but outlook desktop it is not appearing as expected. The requirement is to display the button on outlook desktop, mobile app android and iOS, as it is appearing on the outlook web.

Can anyone provide a solution? is there a restriction in html tags which didn't support in outlook apps but can work on outlook web.

var instanceURL = gs.getProperty('glide.servlet.uri');
var tableName = current.getTableName();
var sysId = current.getValue('sys_id');

var ticketURL = instanceURL +
'now/sow/record/' +
tableName +
'/' +
sysId;

var buttonHtml =
'<a href="' + ticketURL + '" ' +
'style="background-color:#1A45D7;' +
'border-radius:4px;' +
'color:#FFFFFF;' +
'display:inline-block;' +
'font-family:Arial;' +
'font-size:14px;' +
'font-weight:bold;' +
'line-height:20px;' +
'padding:10px 18px;' +
'text-align:center;' +
'text-decoration:none;">' +
'View Ticket' +
'</a>';

template.print(buttonHtml);

})(current, template, email, email_action, event);

[joshuajacks]

The short answer is that they use different rendering engines so they will treat html differently. Here are a couple articles about that topic:
Why can an HTML email look different across email clients? | AWeber

Why Outlook Breaks HTML Emails And How to Fix It | GlockApps

[Ankur Bawiskar]

@surajkumar95 

this is outlook rendering issue and not ServiceNow issue

try this workaround and see

(function runMailScript(current, template, email, email_action, event) {

    var instanceURL = gs.getProperty('glide.servlet.uri');
    var tableName = current.getTableName();
    var sysId = current.getUniqueValue();
    var ticketURL = instanceURL + 'now/sow/record/' + tableName + '/' + sysId;

    var buttonHtml = ''
    + '<table role="presentation" border="0" cellspacing="0" cellpadding="0">'
    + '<tr>'
    + '<td align="center">'
    + '<!--[if mso]>'
    + '<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" '
    + 'xmlns:w="urn:schemas-microsoft-com:office:word" '
    + 'href="' + ticketURL + '" '
    + 'style="height:40px;v-text-anchor:middle;width:150px;" '
    + 'arcsize="10%" strokecolor="#1A45D7" fillcolor="#1A45D7">'
    + '<w:anchorlock/>'
    + '<center style="color:#FFFFFF;font-family:Arial, sans-serif;font-size:14px;font-weight:bold;">'
    + 'View Ticket'
    + '</center>'
    + '</v:roundrect>'
    + '<![endif]-->'
    + '<!--[if !mso]><!-- -->'
    + '<a href="' + ticketURL + '" '
    + 'style="background-color:#1A45D7;border:1px solid #1A45D7;border-radius:4px;'
    + 'color:#FFFFFF;display:inline-block;font-family:Arial,sans-serif;font-size:14px;'
    + 'font-weight:bold;line-height:40px;text-align:center;text-decoration:none;'
    + 'width:150px;-webkit-text-size-adjust:none;">'
    + 'View Ticket'
    + '</a>'
    + '<!--<![endif]-->'
    + '</td>'
    + '</tr>'
    + '</table>';

    template.print(buttonHtml);

})(current, template, email, email_action, event);

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[Vikram Reddy]

Hi @surajkumar95,

Outlook desktop on Windows renders HTML mail through the Word rendering engine, not a browser engine, that's the whole issue here. It ignores border-radius, padding, display:inline-block and background-color on an anchor tag, which is exactly what your buttonHtml relies on. Outlook Web and the mobile apps use a real rendering engine, so the same markup looks fine there.

There's no CSS fix for this. The accepted pattern is a bulletproof button: a table cell for the background and spacing, plus a VML shape for Outlook desktop, wrapped in mso conditional comments so each client only sees the markup it can render.

1. Put the background color and padding on a td, not the anchor.
2. Add a v:roundrect VML block inside an if mso conditional comment for Outlook desktop, and keep your existing anchor inside an if !mso block for everything else.
3. Use arcsize on the VML shape to match your border-radius, roughly 20% arcsize equals a 7px radius.

Rough shape:

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="' + ticketURL + '" style="height:40px;v-text-anchor:middle;width:160px;" arcsize="10%" strokecolor="#1A45D7" fillcolor="#1A45D7">
<center style="color:#FFFFFF;font-family:Arial;font-size:14px;font-weight:bold;">View Ticket</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="' + ticketURL + '" style="background-color:#1A45D7;border-radius:4px;color:#FFFFFF;display:inline-block;font-family:Arial;font-size:14px;font-weight:bold;line-height:20px;​padding:10px 18​px;text-align:center;text-decoration:none;">View Ticket</a>
<!--<![endif]-->

Rather than hand rolling this per notification, the community article "Email Challenge: Creating Outlook Rounded Buttons" packages this exact pattern into two reusable script include functions, OutlookRoundedButtonDynamic and OutlookRoundedButtonFixed, that you can call from any notification email script.

If it still doesn't render right after this, tell me whether it's classic Outlook desktop or the new Outlook for Windows, the new one is Chromium based and behaves differently.

References

• Email Challenge: Creating Outlook Rounded Buttons
• Bulletproof Email Buttons for Outlook: VML + Accessible HTML

Thank you,
Vikram Karety
Octigo Solutions INC