Email Reminder Template

Return to Notification Center page.

This is an example of the Reminder Email Template code used by the SIMbox Notification Center.

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
 <!-- Replace the text within the title element to change the notification mail subject -->
 <title>[ProductName] Courseware Reminder - [Courseware.Name] starting on [Courseware.StartDateLocal]
 </title>
 <style type="text/css">
 BODY
 {
 font-family: Arial, Helvetica, Sans-Serif;
 }
 #ReminderWrapper
 {
 width: 500px;
 height: 350px;
 background: #D8E8FD; /* Old browsers */
 background: -moz-linear-gradient(top, #d8e8fd 0%, #5684d3 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8e8fd), color-stop(100%,#5684d3)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #d8e8fd 0%,#5684d3 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #d8e8fd 0%,#5684d3 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #d8e8fd 0%,#5684d3 100%); /* IE10+ */
 background: linear-gradient(top, #d8e8fd 0%,#5684d3 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8e8fd', endColorstr='#5684d3',GradientType=0 ); /* IE6-9 */
 border: 1px solid #5875A6;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 -webkit-box-shadow: 0px 3px 8px 0px #000000;
 -moz-box-shadow: 0px 3px 8px 0px #000000;
 box-shadow: 0px 3px 8px 0px #000000;
 }
 #ReminderBanner
 {
 width: 484px;
 height: 32px;
 margin-top: 8px;
 margin-left: 8px;
 background: #5684d4; /* Old browsers */
 background: -moz-linear-gradient(top, #5684d4 0%, #0d419b 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5684d4), color-stop(100%,#0d419b)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #5684d4 0%,#0d419b 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #5684d4 0%,#0d419b 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #5684d4 0%,#0d419b 100%); /* IE10+ */
 background: linear-gradient(top, #5684d4 0%,#0d419b 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5684d4', endColorstr='#0d419b',GradientType=0 ); /* IE6-9 */
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 }
 #ReminderIcon
 {
 width: 24px;
 height: 24px;
 margin-top: 4px;
 margin-left: 4px;
 float: left;
 }
 #ReminderMasthead
 {
 color: white;
 font-size: 14px;
 font-weight: bold;
 float: left;
 width: 450px;
 height: 24px;
 margin-left: 4px;
 margin-top: 8px;
 }
 #ReminderTitle
 {
 color: #002157;
 font-size: 16px;
 font-weight: bold;
 width: 484px;
 height: 64px;
 margin-left: 8px;
 margin-top: 8px;
 }
 #ReminderContent
 {
 color: black;
 background-color: white;
 -webkit-box-shadow: inset 2px 2px 6px 0px #bbbbbb;
 -moz-box-shadow: inset 2px 2px 6px 0px #bbbbbb;
 box-shadow: inset 2px 2px 6px 0px #bbbbbb;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 font-size: 12px;
 width: 484px;
 height: 220px;
 margin-left: 8px;
 margin-right: 8px;
 margin-top: 8px;
 border: 1px solid #5875A6;
 }
 #MainBody
 {
 width: 100%;
 height: 100%;
 }
 </style>
</head>
<body>
 <div id="MainBody">
 <div id="ReminderWrapper">
 <div id="ReminderBanner">
 <div id="ReminderIcon">
 <img src='[reminder_icon.png]' alt="Reminder Icon" />
 </div>
 <div id="ReminderMasthead">
 [ProductName] - Courseware Reminder
 </div>
 </div>
 <div id="ReminderTitle">
 [Courseware.Name]
 <br />
 Starting at [Courseware.StartDateLocal]
 </div>
 <div id="ReminderContent">
 <p style="margin: 8px;">
 Dear [Recipient.Name],
 <br />
 This is a reminder mail for your upcoming course [Courseware.Name] starting on [Courseware.StartDateLocal]
 and ending on [Courseware.EndDateLocal].
 <br />
 <br />
 Please be prepared.
 <br />
 <br />
 Thanks,
 <br />
 <br />
 [ProductName] Notification Center
 <br />
 <br />
 This message was auto generated on [DateTime.UtcNow] GMT Time
 </p>
 <img alt='logo' src='[SIMbox_logo.png]' style="margin: 8px;" />
 </div>
 </div>
 </div>
</body>
</html>

Return to Notification Center page.