3 Replies Latest reply on Jul 23, 2012 6:26 AM by Carl.Simpson

    HTML E-mail sample

    Expert

      In the enhancement section there is discussion about formatting e-mails using rich text and HTML text.  Thought I would share what I think is a nice example of a e-mail that we send out when an incident is resolved.

       

      Resolution.jpg

       

      <html>
      <head>
      <style>
      p {
          margin-top:0;
          margin-bottom:10px;
          margin-left: 1em;
      }
      h3 {
          margin-top:0;
          margin-bottom:6px;
          margin-left: 1em;
      }
      #content {
          width: 90%;
      }
      #logo {
          width:215px;
          height:73px;
          background: URL(http://www.kumc.edu/Images/kumclogo.gif);
          background-repeat: norepeat;
      }
      #incident {
          width:100%;
          border-top: none;
          border-right: 2px solid #ccc;
          border-left: none;
          border-bottom:2px solid #ccc;
          background-color:#f7f7e4;
          margin-bottom: .5em;
      }
      #problem {
          width:100%;
          border-top: none;
          border-right: 2px solid #ccc;
          border-left: none;
          border-bottom:2px solid #ccc;
          background-color: #f7e4e7;
          margin-bottom: .5em;
      }
      #resolution {
          width:100%;
          border-top: none;
          border-right: 2px solid #ccc;
          border-left: none;
          border-bottom:2px solid #ccc;
          background-color:#e5e4f7;
          margin-bottom: .5em;
      }
      #survey {
          width:100%;
          border-top: none;
          border-right: 2px solid #ccc;
          border-left: none;
          border-bottom:2px solid #ccc;
          background-color:#ccffff;
          margin-bottom: .5em;
      }
      #E-mailpoint {
          width:100%;
          border-top: none;
          border-right: none;
          border-left: none;
          border-bottom: none;
          background-color: #ffffff;
              color: #eeeeee;
          margin-bottom: .5em;
      }
      </style>
      </head>
      <body>
        <div id="content">
        <div id="logo"> </div>
        <h2>Customer Support Incident Resolution:</h2>
        <p>THIS IS AN AUTOMATED EMAIL: DO NOT REPLY. If you need additional help, please call 913-588-7995.</p>
        <div id="incident">
          <h3>Incident #: {Id}</h3>
          <p>Created by: {CreationUser/Name}</p>
          <p>User: {RaiseUser/Name}</p>
        </div>
        <div id="problem">
          <h3>Problem:</h3>
          <p>{Description}</p>
        </div>
        <div id="resolution">
          <h3>Resolution:</h3>
          <p>{Resolutions/Description}</p>
        </div>
        <div id="survey">
          <h3>Survey Information</h3>
          <p>We appreciate your feedback. Please take the time to complete our short survey: <br />
          <a href="{$ApplicationSetting.ProcessApprover.ServicePortalApproverURL$}">Click on this Survey Link</a></p>
          <p>You may need to log into the survey with the following username: <b>kumc\{RaiseUser/Name}</b></p>
          <p>Your standard network password may also be required.  This is a temperary fix.  Eventually a username and password will not be required.</p>
        </div>
        <p>PLEASE NOTE: You can review the history of all your incidents opened with   Customer Support at anytime via the Customer Support Self Service Portal by   clicking on the following link <a href="https://support.kumc.edu/serviceportal/login.aspx">Service Portal</a>.</p>
      </div>
      <div id="E-mailpoint">
      <h6>2010.1.17</h6>
      </div>
      </body>
      </html>

       

      I will admit that I cheated and had a web developer spend a few minutes and whip up the style sheet for me.  It may look like a lot but really, its not that bad.