Notification Template Examples
Brett_Moffett
Cireson PACE Super IT Monkey ✭✭✭✭✭
I often get asked when I am on consulting projects what other customers do with their notification templates and what they look like so I thought I'd start a discussion here and ask people to post pictures (and the associated HTML if possible) for their Notification templates so we can all share in what it is that others are doing.
There is some argument for colourful pictures and fancy formatting, but there is equal argument for simplicity and basic text. By sharing all of our solutions we can see what others are doing and the thought process behind them.
Please share away.
There is some argument for colourful pictures and fancy formatting, but there is equal argument for simplicity and basic text. By sharing all of our solutions we can see what others are doing and the thought process behind them.
Please share away.
0
Comments
As you can see, lots of colour and graphics in this one. (IT Monkey loves the attention)
Key factors in what we were trying to achieve here was how to get in touch with us if you needed to (Portal and phone support hours etc.) and key links to the places you can get more info (Portal, Community, Twitter, etc.)
I have been working on this over the last few days after being inspired by the Cireson notification I received to a Incident I had raised with them. Basically I am creating multiple word documents as templates and making them look a whole lot better than they do currently. The following is a Change Request creation notification and I have a series of others I am working through which will look similar and just made appropriate for the work item they are supporting.
I have used the solution at from here to help with my notification URLS and that has made life very easy.
This one is very simple and gets the message across. Simple for the customer to read and get the core detail they need.
Super simple logo in the top right corner and the branding colour of black and white made this a super simple and clean design.
Here we go..
A great way to show all the basic information needed (On the right) and all the needed details on the left.
Super easy to read and all the information that anyone needs.
Created
Request user input
Resolved (w/ survey)
Order confirmation
PS: It's a huge pain in the butt to make these look good (or just somewhat proper) in Outlook!
Our "internal" notifications for analysts when WIs are assigned to them or their support group is a lot more simple, without any graphics:
I love the way you have the progress in the little icons at the top of the template.
Gives it a real purpose and feel for where the request or incident is at.
The "How To" style guides at the bottom of the page is also a great way to disseminate information fast to those who need it the most.
Great Example!!
Thanks! We were through some iterations with the progress display, where this one was a close contestant:
But in that case, the progress-bar is an image, so we opted for the table-styled progress to accommodate responsiveness.
Yeah, the "How To" at the bottom is nice, but it contains a but too much text for my taste. But the information is almost to important to leave out, so it's staying there for now. At least until I can do some A/B testing with and without it.
Our old templates where designed around a "postcard"-design, where the border-color changed based on what kinda mail it was (created: blue, request input: red, resolved: green), e.g.:
With a good number of personal using BYOD and IOS mobile devices and the primary email client being Outlook. We wanted a picture-less templates as most of these programs strip the out on reply/forwards. Plus depending on your configurations the exchange connector could bring the pictures back in as attachments on replies.
Another customer I have did a similar approach with no logos for the same reason and used colour to signify the different types (Closed and Open)
Here is their template:
Approval Rejected:
Incident Logged:
Approval:
Our analysts use Tier Watcher for when tickets have been logged/assigned and they also receive similar notifications to above when a comment has been added to their assigned WI, likewise do the End Users.
@Konstantin_Slavin-Bo - Really like what you have done with your notification templates!
Also, how are you handling review activities? Do you have some js to invoke the Approve and Reject buttons in the portalen, or are you just doing a mailto: link?
Review activities are just set up as a mailto: link with the tags [approved] [rejected], had a thought about going down the js route but the mailto works well for us so no need!
<a href="http://yoursite.com" target="_blank" style="font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #7E95BE; border-top: 12px solid #cb87f2; border-bottom: 12px solid #cb87f2; border-right: 18px solid #cb87f2; border-left: 18px solid #cb87f2; display: inline-block; border-color: #7E95BE;">
buttontext</a>
The templates we have are quite simple, some text and a table with the item details, maybe a portal link or mailto button. They were made some years ago and haven't really changed. I think they could do with some finessing, the table is maybe a little clunky looking, but certainly obvious when it hits your inbox
IR Created:
IR Resolved
SR Created:
Thanks
Thanks! I've attached the HTML along with the images. The HTML contains some Outlook-specific tweaks, which may or may not mess a bit with the design in a proper HTML viewer. The images are not encoded inside the HTML, as that would add them as attachments to the mail. Rather, we are hosting them on a on-site server, which is added to the Trusted Sites zone, such that Outlook will show them as default.
@Tom_Hyde - I tried out the code you shared, but unfortunately it doesn't look as good in Outlook as in your screenshots. They're from a browser, right? In Outlook it just ends up looking the same as the buttons in my own templates. But thanks a lot for sharing!
I like the format of having the information split with the horizontal lines. Maybe it's just the way my eyes track on a page when reading but it makes it very clear and easy to read.
Can i assume the colour border changes when an Incident is closed or opened?
This thread has given me some great ideas to update/improve our layout and get back into getting re-acclimated with HTML/CSS (following this nifty old walk-through https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770 )
Like many, taking bits and pieces from examples here for ideas on what I am creating. Currently I am working with an example similar to what Tom_Hyde provided, once I figure out how to essentially get the Planning Tab of a CR in my Review Activity, I will be set.
Thanks for all for the inspiration and motivation to spend the extra time to get back to this nifty stuff.
Nice and clean and easy to read. The clean logo all on white makes it crisp and easy on the eyes.
Keep these examples coming.
I think this is a great place for people to get ideas and to refine the quality of communication back and forth to end users.
Is there a method for including a standardised 'header' and 'footer' into the body of an email template?
I want to have a single html file of each that is automatically added to any email template notification so if any details change in either, then I only have to make a single change rather than having to make the same change to multiple templates.
@Tom_Hyde
@Tom_Hyde Really loved your notification template. so elegant. Would you mind sharing the HTML template for the same?
Any of you great people care to share some of your email templates, please?