When an organization chooses to make the shift to ServiceNow for their platform of choice, the cultural and organization change that comes along with that: a new platform, a new user experience, new way of working - user adoption can be hit or miss.
Part of the Core implementation of the ServiceNow platform is branding wherein you customize the instance to match organizational colors and setting up your organization’s logo. One piece that might get overlooked in this is adding branding to the notifications sent by the platform. Out of the box (OOB), ServiceNow has Next Experience branding in the “Employee notification layout” that looks like this:
This layout is used in most of the customer facing notifications that they will receive: Request is opened, commented, incident opened/closed, so we want to make sure that this avenue of communication matches our organization’s branding.
Getting custom
To get our emails in line with our brand, we will be using that is known as an email layout and associated template. To start, navigate to System Policy > Email > Layouts. Once here, you’ll see the OOB offerings and any that you may have already defined. Go ahead and click New in the top and you’ll be taken to the new record form. For the sake of this demo, I’m using a name of “Demo: Branded Email Layout.” Now, email layouts allow for two options: Basic and Advanced.
Basic
Basic gives you a “What You See Is What You Get” (WYSIWYG) editor you may be familiar with. This is the simplest option because you can click to insert an image and add ${notification:body} and be done.
Once you’ve saved your layout, you’re going to need to create a template associated with this layout. To do this, you’ll go to System Notification > Email > Templates and click on create new. On this screen, all you need to populate are Name and Email layout respectively choosing what your values should be.
For your template, you can also pre-define your subject line and email body if you are not planning to associate the template to a notification where these are defined. This just simplifies creation because then you just make a blank notification choosing the template. For our purpose, we’re populating our content on the notification and using the template as a styling framework like what comes OOB.
For this demo, I’ve updated the “Incident was opened” notification to use our Demo template. The end result when creating an incident is the following notification sent:
Now, you’re probably saying “That’s it?” - yes, for basic. You’ve put your brand header in the template and you’re populating the notification body below that. Congrats!
Advanced
This is where my fun starts. Email layouts allow you full control via HTML to build your layout and as someone who LOVES code, this is my preference. Simply click the Advanced checkbox and we can get started.
Preface: ServiceNow uses Bootstrap behind the scenes (Version 3.3.6 to be exact) meaning you can customize your emails the same way you would a service portal widget. If you have features in version 4 or 5 that you just have to have, you can specify the CDN in a <head> tag to make them accessible. This is also not a Bootstrap tutorial (let alone an HTML/CSS tutorial), if you have not worked with Bootstrap before I would advise reviewing their documentation.
Skeleton
The skeleton we’ll be using is:
<html lang="en">
<head>
<meta charset="utf-8">
</meta>
<meta name="viewport" content="width=device-width, initial-scale=1">
</meta>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</link>
</head>
<body>
<h1>Hello, world!</h1>
${notification:body}
</body>
</html>
This turns our notification into the following:
Containers, Columns, and Rows - oh my!
Let’s clean up our layout a little and add a banner image by using containers, columns, and rows.
<html lang="en">
<head>
<meta charset="utf-8">
</meta>
<meta name="viewport" content="width=device-width, initial-scale=1">
</meta>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</link>
</head>
<body>
<div class="container d-flex justify-content-center">
<div class="col-md-8 col-sm-10">
<div class="row">
<img class="img-fluid" src="banner-placeholder.png" style="padding: 0; width: 100%; height: auto;" />
</div>
<div class="row" style="margin-top: 25px;">
<h1>Hello, world!</h1>
${notification:body}
</div>
</div>
</div>
</body>
</html>
Note: banner-placeholder.png is an OOB image you can find under System UI > Images. You must make sure your respective banner has been uploaded and replace this src.
Note: To edit the button color, you’ll need to go and edit the Email script incident_link changing line 17 for background color. I’ve changed it to match the gray color of the banner-placeholder image.
Footer
Lastly, you may want to include some contact information for your Service Desk along with some additional branding in the footer of the email as well. So let’s build this in!
First, go back up to the <head> tag and add the following line to be able to use Bootstrap Icons:
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css>">
Next, we’re going to add a new div with class of row to hold our footer and nest some divs within that to hold a company logo, contact information, and some styling to keep everything in line.
<div class="row" style="margin-top: 25px; border-top: 2px solid #CCCCCC; ">
<div>
<div style="width:110px; max-width:110px; min-width:100px; float:left; padding-top:15px">
<img src="thumbnail.png"></img>
</div>
<div
style="width:190px; max-width:190px; font-family:Arial; font-size:12px; margin-top:0.5em; color:rgb(102,102,102); letter-spacing:2px; border-left:2px solid rgb(211,216,215); padding-top:3px; padding-left:10px; overflow:hidden">
<p style="white-space: pre-wrap;">
Your Organization
(888) 123-4567
M-F 8am-5pm
<br></br>
</p>
<p>
<a href="" style="margin-top:0.5em; color:rgb(102,102,102); text-decoration:none" target="_blank">
<i class="bi bi-telephone-fill"></i> Phone
</a><br></br>
<a href="" style="margin-top:0.5em; color:rgb(102,102,102); text-decoration:none" target="_blank">
<i class="bi bi-envelope-fill"></i> Email
</a><br></br>
<a href="" style="margin-top:0.5em; color:rgb(102,102,102); text-decoration:none" target="_blank">
<i class="bi bi-chat-fill"></i> Chat
</a>
</p>
</div>
<div
style="width:190px; max-width:190px; margin-top:0.5em; color:rgb(102,102,102); border-left:2px solid rgb(251,224,181); padding-top:3px; padding-left:10px; overflow:hidden">
</div>
</div>
</div>
Save and test one final time and you should now have something that looks like the following:
Now, you have a perfect opportunity to truly make a branded layout as unique as your organization’s style! As I mentioned earlier, this is not intended to be an HTML/CSS tutorial but with some resources like W3Schools you can continue to grow from this foundation of using HTML within Email Layouts.
Liked this article? Hit bookmark and mark it as helpful - it would mean a lot to me.
See something wrong with this article? Let me know down below!
LinkedIn
