Problem css notification outlook

aaaadrian · ‎07-27-2017

Hi,

I created an e-mail notification to send approver. I added two button (one button to approve other button to reject request).

The problem is my button doesn't show in outlook when i receive notification. The buttons show correctly in servicenow when i click on "Preview notification"

I think the problem is about CSS.

Could you help me ?

I attached some snapshot and html code for buttons.

<div><!-- [if mso]><span id="CmCaReT"></span>
   <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${mail_script:approval_link_[TEST]}" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#000000" fillcolor="#28b82d">
       <w:anchorlock/>
       <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Click here to approve</center>
   </v:roundrect>
<![endif]--> <a style="background-color: #28b82d; border: 1px solid #000000; border-radius: 4px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all;" href="${mail_script:approval_link_[TEST]}">Click here to approve</a> <!-- [if mso]>
   <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${mail_script:reject_link_[TEST]}" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#000000" fillcolor="#b82839">
       <w:anchorlock/>
       <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Click here to reject</center>
   </v:roundrect>
<![endif]--> <a style="background-color: #b82839; border: 1px solid #000000; border-radius: 4px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all;" href="${mail_script:reject_link_[TEST]}">Click here to reject</a></div>

In my outlook no button displayed.

Mike Allen · ‎07-27-2017

What does the source of the email say? Can you see that the buttons should be there but are not rendering? Or, were they stripped from the html?

nainitha · ‎08-30-2017

Hi Adrian,

I have the similar issue. Do you able to make buttons visible on outlook notifications?

aaaadrian · ‎10-03-2017

Hi ,

Yes I have succeeded to make buttons visible on outlook notifications. It's works very well on mobile phone too.

If my memory serves me well, i using code from https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design (see 3: Border_based buttons section)

Currently I using this code in my approval notification and i call two "mail_script":

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<a style="text-align: center; width: 200px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #28b82d; border-top: 12px solid #28b82d; border-bottom: 12px solid #28b82d; border-right: 18px solid #28b82d; border-left: 18px solid #28b82d; display: inline-block;" href="${mail_script:approval_link}" target="_blank">Click here to approve</a>

</td>

<td>

<a style="text-align: center; width: 200px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #b82839; border-top: 12px solid #b82839; border-bottom: 12px solid #b82839; border-right: 18px solid #b82839; border-left: 18px solid #b82839; display: inline-block;" href="${mail_script:reject_link}" target="_blank">Click here to reject</a>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

My approval script is:

(function(smtpAddress, approvalFor, watermark) {
// Link to approval by mail
var href = 'mailto:'+ smtpAddress +'?subject=Re%3A%20'+ approvalFor +'%20-%20approve&body=Hello,I approve your request '+ approvalFor +'.Thanks.'+ watermark +'"';

// Link to see RITM (approval by RITM)
//var href = gs.getProperty('glide.servlet.uri') + 'nav_to.do?uri=' + current.getTableName() + '.do?sys_id=' + current.getValue('sys_id') + '%26sysparm_input=approved';

template.print(href);
})(gs.getProperty('glide.email.user'), current.sysapproval.getDisplayValue(), email.watermark);

My reject script is:

(function(smtpAddress, approvalFor, watermark) {
// Link to reject by mail
var href = 'mailto:'+ smtpAddress +'?subject=Re%3A%20'+ approvalFor +'%20-%20reject&body=Hello%2CI reject your request '+ approvalFor +' because%28Explanation mandatory%29%3AThanks%2C'+ watermark +'"';

// Link to see RITM (reject by RITM)
//var href = gs.getProperty('glide.servlet.uri') + 'nav_to.do?uri=' + current.getTableName() + '.do?sys_id=' + current.getValue('sys_id') + '%26sysparm_input=rejected';

template.print(href);
})(gs.getProperty('glide.email.user'), current.sysapproval.getDisplayValue(), email.watermark);

Sorry for code formater.

Jan Fr_hlich · ‎07-22-2020

The problem with your original code is that  doesn't work in Outlook because there is a space between <!-- and [if mso]. Instead it should look like this:

However when using the source code editor in a Notification, ServiceNow will automatically format the code and add a space. This is still the case in Orlando.