Adding image as email header

meghanareddy206
Tera Contributor

‎06-11-2018 01:01 PM

I'm trying to add an image as email header in Servicenow using mail scripts calling from email template. I'm able to see the image perfectly but its not responsive when delivered to outlook. When I maximize the screen in outlook, header breaks in middle of the page. When I try the same code in any html editor, its working fine.The actual size of the image is bytes: 492,543 width = 1122, height = 280.  Any help will be appreciated.

Mail script code for header:

(function runMailScript(current, template, email, email_action, event) {
var link = gs.getProperty('glide.servlet.uri');
var div = "<head><style>.responsive {width: 100%; height: auto;}</style></head><img class='responsive' src='" + link + "sampleimg.png'/>";
template.print(div);
})(current, template, email, email_action, event);

calling this in an email template below:

${mail_script:header}
 
Hi ${approver.name},
 
${sysapproval.request} created by ${sysapproval.opened_by} is now pending your approval.
 
 
${mailto:mailto.approval.ritm} | ${mailto:mailto.rejection.ritm}
 
${mail_script: ritm_email_approval}
  
${mail_script:snow_footer} 
Labels:
0 Helpfuls
  • 2,160 Views
3 REPLIES 3

Roger Poore
Tera Guru

‎06-11-2018 06:12 PM

Have you tried it like this (adding body tag and closing html)?

var div = "<html><head><style>.responsive {width: 100%; height: auto;}</style></head><body><img class='responsive' src='" + link + "sampleimg.png'/></body></html>";

Also, have you tried viewing the source code when opening the e-mail in Outlook? Outlook uses Word for rendering e-mails. Viewing the source should give you an indication as to what's going on.

0 Helpfuls

meghanareddy206
Tera Contributor
In response to Roger Poore

‎06-12-2018 08:35 AM

Thanks roger, I have used the same code above, but still no luck. Also, able to see the outlook source, its displaying the same code. what else we can check from outlook?

Outlook source code for image:

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><div>
<div><style>.responsive {width: 100%; height: auto;}</style><img class="responsive" src="cid:sampleimg.png@SNC.237a32a24e823212"></div>
</div>
<div>
<div>&nbsp;</div>
</div>

0 Helpfuls

Roger Poore
Tera Guru
In response to meghanareddy206

‎06-12-2018 09:11 AM

What if you reversed your process?  I mean, in Outlook, compose an HTML e-mail like you want it to look for the notification.  Then transfer that to your mail script. 

Otherwise, you could try something like http://emailframe.work/ which was made to help with this type of thing. Use those templates rather than what you've been doing.

0 Helpfuls