Responsive Email Templates for Mobile & Desktop
A Responsive Email Template Design is about how you can send an Email/Notification to the End Users that can appear based on the Device i.e. Desktop/Mobile. It gives a proper look and feel on all your devices.
It automatically adjusts the screen size based on the different devices and viewports.
Step by Step Configuration
Design/Customize CSS: In order to have a responsive email template, first you should decide which CSS that you would like to use. There are several ways to define this as we have several websites that provide responsive css. I took one from W3 Schools.
- Create a record under Service Portal → CSS
- Copy the content from this link and paste it in CSS field.
- Save the Record
Create a Script Include - Give the name as "EmailTemplate" and copy the below content
var EmailTemplate = Class.create();
EmailTemplate.prototype = {
initialize: function(gr) {
this.current = gr;
},
applyStyle: function() {
var gr = new GlideRecord('sp_css');
//Change the SYSID here
gr.addQuery('sys_id', '<sysid of your css file>');
gr.query();
if(gr.next()) {
return "<style>" + gr.css.toString() + "</style>";
}
},
IncidentOpened: function() {
var html = "<html>";
html += this.applyStyle();
html += "<body>";
html += this.addLogo(); //Remove this in case Logo is not needed
html += '<div class="w3-row-padding">';
html += '<div class="w3-third"><h2>Incident Number</h2><p>' + this.current.number.toString() + '<p></div>';
html += '<div class="w3-third"><h2>Short Description</h2><p>' + this.current.short_description + '<p></div>';
html += '<div class="w3-third"><h2>Description</h2><p>' + this.current.description + '<p></div>';
html += "<b>Your Incident has been submitted successfully. Incident has been assigned to " + this.current.assignment_group.getDisplayValue() + '. Someone from this group will contact you in resolving your issue.<br><br> Have a nice day!';
html += "</div></body></html>";
return html;
},
addLogo: function() {
//You can add your own logo over here
return '<img src="mylogo.png" width="200" height="200"/>';
},
type: 'EmailTemplate'
};Create a Notification Email Script - Give name as "incident_open" and copy the below content
(function runMailScript(/* GlideRecord */ current, /* TemplatePrinter */ template,
/* Optional EmailOutbound */ email, /* Optional GlideRecord */ email_action,
/* Optional GlideRecord */ event) {
var obj = new EmailTemplate(current);
template.print(obj.IncidentOpened());
// Add your code here
})(current, template, email, email_action, event);Notification Update - I took the OOTB Notification "Incident opened for me" and called with the above email script
You are all set now and the Email looks like this on Mobile & Desktop
Desktop
Mobile
References
Logo Creation : https://www.freelogodesign.org/
Responsive Templates : https://www.w3schools.com/css/css_rwd_templates.asp
Please provide your feedback so that I can update this Article with new content if needed.
Thanks,
Narsing
Hey,
Thanks for your feedback. I just tested on Gmail on Mobile and it is working there as well. In case, if it is not displaying in any other cross-platform, we need to add the media types within the CSS to render properly.
The render happens based on the screen sizes of the device.
Thanks,
Narsing
