- Product launch
- and Promotional, Announcement
Course Comment Notification email template
A comment notification for an online course: who commented on which lesson, the comment as a quote with avatar, a reply button and a settings link.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Course Comment Notification</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0c110d!important;}
.ete-content{background-color:#151c17!important;}
.ete-text{color:#d3dfd6!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#98a89c!important;}
.ete-link{color:#86efac!important;}
.ete-border{border-color:#28352b!important;}
.ete-panel{background-color:#1c261f!important;border-color:#28352b!important;}
.ete-btn{background-color:#22c55e!important;border-color:#22c55e!important;}
.ete-btn-text{color:#052e12!important;}
.ete-btn-outline{border-color:#22c55e!important;}
.ete-btn-outline-text{color:#22c55e!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#d3dfd6!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#98a89c!important;}
[data-ogsc] .ete-link{color:#86efac!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0c110d!important;}
[data-ogsb] .ete-content{background-color:#151c17!important;}
[data-ogsb] .ete-panel{background-color:#1c261f!important;border-color:#28352b!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f1f5f1;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Priya asked a question about color theory basics. Reply right from here. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f1f5f1;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="580" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="580" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:580px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;border-radius:10px;overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="left" class="ete-px" style="padding:28px 32px 20px;"><span class="ete-heading" style="font-family:Verdana, Geneva, sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#14241a;">Learnloop</span></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:17px;line-height:27px;color:#38443b;text-align:left;"><b>Priya Nair</b> commented on <b>Lesson 4: Color theory basics</b> in your course Intro to Illustration.</p></td></tr>
<tr><td class="ete-px" style="padding:20px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:4px 0 4px 20px;border-left:4px solid #15803d;"><p class="ete-text" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:18px;line-height:29px;color:#38443b;font-family:Verdana, Geneva, sans-serif;font-style:italic;">The warm and cool palette exercise finally made sense to me. Could you share how you pick the accent color when both palettes are on one page?</p><table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top:14px;"><tr><td width="56" valign="middle" style="padding-right:12px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/learnloop-avatar.png" alt="Portrait illustration of Priya Nair" width="44" height="44" class="" style="display:block;width:44px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;border-radius:22px;"></td><td valign="middle" style="font-family:Verdana, Geneva, sans-serif;font-size:14px;line-height:20px;"><span class="ete-heading" style="font-weight:700;color:#14241a;">Priya Nair</span><br><span class="ete-muted" style="color:#6a766d;">Student, joined in March</span></td></tr></table></td></tr></table></td></tr>
<tr><td align="left" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/lessons/4/comments/551" style="height:48px;v-text-anchor:middle;width:190px;" arcsize="42%" strokecolor="#15803d" fillcolor="#15803d"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Reply to Priya</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/lessons/4/comments/551" style="display:inline-block;background-color:#15803d;border:1px solid #15803d;line-height:48px;border-radius:20px;color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-text" style="color:#ffffff;">Reply to Priya</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:13px;line-height:21px;color:#6a766d;text-align:left;">Posted 31 August at 6:12 PM. You get these notices because you teach this course.</p></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:13px;line-height:21px;color:#6a766d;line-height:20px;text-align:left;"><strong>Learnloop</strong><br>12 Quad Street, Ann Arbor, MI 48104</p><p class="ete-muted" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:13px;line-height:21px;color:#6a766d;line-height:20px;text-align:left;padding-top:10px;">Course activity email.</p><p class="ete-muted" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:13px;line-height:21px;color:#6a766d;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="https://example.com/settings/notifications" style="color:#6a766d;text-decoration:underline;">Notification settings</a> · <a class="ete-link" href="{{unsubscribe_url}}" style="color:#6a766d;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:Verdana, Geneva, sans-serif;font-size:12px;line-height:18px;color:#6a766d;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#6a766d;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Postmark Transactional Email Templates by Wildbit (now ActiveCampaign), MIT license.
About this template
Online course platforms send many small notices, and this one should feel personal. The email for Learnloop, a sample course site, starts with a single sentence: who commented, on which lesson, in which course. No banner, no hero, just the news.
The comment itself appears as a quote with the student avatar and name, so the instructor can read it right in the inbox. A green reply button opens the thread. A muted line explains why the email arrived, and the footer adds a link to notification settings for people who want fewer emails.
Bundle several comments into one digest if a lesson gets busy. Put the commenter name in the subject line. Keep the quote short, cut long comments after two or three lines and link to the rest.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Wordmark
- Comment headline
- Comment quote with avatar
- Reply button
- Why you got this
- Footer with notification settings
Subject line ideas
- Priya Nair commented on Lesson 4
- New question in Intro to Illustration
- {{commenter_name}} replied to your lesson
Preview text idea
Priya asked a question about color theory basics. Reply right from here.