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);

[Ankur Bawiskar]

@surajkumar95 

Glad to know.

💡 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