Feature adoption email template
Teach one useful workflow and connect it to a customer outcome. Free to copy as HTML, React Email or plain text.
Get the code
View the code ↓- From
- Acme <hello@acme.com>
- Subject
- Try approvals before your next send
- Preview
- A small workflow that keeps launches calmer.
Copy the code
Email-client-safe HTML, the same email as a React Email component, and a plain-text version for clients that do not show HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta name="viewport" content="width=device-width"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no"/><meta name="color-scheme" content="light"/><meta name="supported-color-schemes" content="light"/><title>A small workflow that keeps launches calmer.</title><style>
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
mso-font-alt: 'Arial';
}
* {
font-family: 'Inter', Arial;
}
</style><style>blockquote,h1,h2,h3,img,li,ol,p,ul{margin-top:0;margin-bottom:0}@media only screen and (max-width:425px){.mr-hide-mobile{display:none!important;max-height:0!important;overflow:hidden!important}.mr-show-mobile{display:block!important;max-height:none!important;overflow:visible!important}.tab-row-stack{width:100%!important}.tab-col-stack{display:block!important;width:100%!important;height:auto!important}.tab-pad-stack{padding-left:0!important;padding-right:0!important}.tab-mobile-gap-0{padding-top:0px!important;padding-bottom:0px!important}.tab-mobile-gap-2{padding-top:1px!important;padding-bottom:1px!important}.tab-mobile-gap-4{padding-top:2px!important;padding-bottom:2px!important}.tab-mobile-gap-6{padding-top:3px!important;padding-bottom:3px!important}.tab-mobile-gap-8{padding-top:4px!important;padding-bottom:4px!important}.tab-mobile-gap-10{padding-top:5px!important;padding-bottom:5px!important}.tab-mobile-gap-12{padding-top:6px!important;padding-bottom:6px!important}.tab-mobile-gap-14{padding-top:7px!important;padding-bottom:7px!important}.tab-mobile-gap-16{padding-top:8px!important;padding-bottom:8px!important}.tab-mobile-gap-18{padding-top:9px!important;padding-bottom:9px!important}.tab-mobile-gap-20{padding-top:10px!important;padding-bottom:10px!important}.tab-mobile-gap-22{padding-top:11px!important;padding-bottom:11px!important}.tab-mobile-gap-24{padding-top:12px!important;padding-bottom:12px!important}.tab-mobile-gap-26{padding-top:13px!important;padding-bottom:13px!important}.tab-mobile-gap-28{padding-top:14px!important;padding-bottom:14px!important}.tab-mobile-gap-30{padding-top:15px!important;padding-bottom:15px!important}.tab-mobile-gap-32{padding-top:16px!important;padding-bottom:16px!important}.tab-mobile-gap-34{padding-top:17px!important;padding-bottom:17px!important}.tab-mobile-gap-36{padding-top:18px!important;padding-bottom:18px!important}.tab-mobile-gap-38{padding-top:19px!important;padding-bottom:19px!important}.tab-mobile-gap-40{padding-top:20px!important;padding-bottom:20px!important}}</style></head><body dir="ltr" lang="en" style="background-color:#f1f7f3;margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0"><!--$--><!--html--><!--head--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin:0px;background-color:#f1f7f3;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-family:Inter, Arial, sans-serif"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">A small workflow that keeps launches calmer.<div> </div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:640px;background-color:#ffffff;min-width:0px;border-radius:0px;border-width:0px;border-color:transparent;width:100%;margin:0 auto"><tbody><tr style="width:100%"><td style="padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px"><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#14532d;margin:0 0 12px 0;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0">Hi {{name}},</p><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#14532d;margin:0 0 12px 0;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0">I noticed your team sends to large lists without a review step before launch.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"><tbody style="width:100%"><tr style="width:100%"><td align="left" data-id="__react-email-column" style="border-color:#bbf7d0;border-width:1px;border-style:solid;background-color:#f0fdf4;border-radius:12px;padding-top:18px;padding-right:20px;padding-bottom:18px;padding-left:20px"><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#14532d;margin:0 0 12px 0;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0"><span style="color:#15803d"><strong>TRY THIS: APPROVALS</strong></span></p><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#14532d;margin:0 0 12px 0;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0">One person signs off before a send goes out. Most teams catch a broken link or a wrong segment in the first week.</p><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#14532d;margin:0 0 12px 0;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0"><strong>Start small: </strong>turn it on for your largest template only.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:100%;text-align:left;margin-bottom:0px"><tbody><tr style="width:100%"><td><a href="{{action_url}}" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;color:#ffffff;background-color:#15803d;border-color:#15803d;border-width:2px;border-style:solid;font-size:14px;font-weight:600;border-radius:6px;padding:10px 32px 10px 32px;padding-top:10px;padding-right:32px;padding-bottom:10px;padding-left:32px" target="_blank"><span><!--[if mso]><i style="mso-font-width:400%;mso-text-raise:15px" hidden>    </i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:7.5px">Turn on approvals</span><span><!--[if mso]><i style="mso-font-width:400%" hidden>    ​</i><![endif]--></span></a></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;height:12px"><tbody><tr style="width:100%"><td></td></tr></tbody></table><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#14532d;margin:0 0 0px 0;margin-top:0;margin-right:0;margin-bottom:0px;margin-left:0">If it slows you down, switching it off takes one click.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;height:8px"><tbody><tr style="width:100%"><td></td></tr></tbody></table><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#14532d;margin:0 0 12px 0;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0">Best,</p><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#14532d;margin:0 0 0px 0;margin-top:0;margin-right:0;margin-bottom:0px;margin-left:0"><strong>{{sender_name}}</strong><br/><span style="color:#16a34a">{{sender_title}} · {{organization_name}}</span></p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;height:16px"><tbody><tr style="width:100%"><td></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:40px;margin-right:0;margin-bottom:0;margin-left:0"><tbody style="width:100%"><tr style="width:100%"><td align="left" data-id="__react-email-column" style="border-color:#e2e8f0;border-width:0;border-style:solid;background-color:#ffffff;border-radius:0;padding-top:24px;padding-right:0;padding-bottom:24px;padding-left:0"><p style="font-size:15px;line-height:26.25px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#14532d;margin:0 0 0px 0;margin-top:0;margin-right:0;margin-bottom:0px;margin-left:0">{{organization_name}} • {{organization_address}}</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><!--/$--></body></html>Send it from your own domain
This email goes to one person at a time, from your app. In MarkRelay it is a built-in starter template: save it in the editor, then send it by ID through the email API in your own Cloudflare account, over Cloudflare Email Sending. The variables below are the ones this template uses.
POST $MARKRELAY_API_URL/emails/send
{
"from": "Acme <hello@acme.com>",
"to": "customer@example.com",
"templateId": "tpl_…",
"variables": {
"action_url": "https://example.com",
"name": "Alex",
"organization_address": "123 Main Street, Springfield",
"organization_name": "Acme",
"sender_name": "Jordan Lee",
"sender_title": "Account Manager"
}
}The template is free to use with any sending service. See how templates work in MarkRelay.
More customer success templates
Own your email stack today
Buy MarkRelay once and run it in your Cloudflare account. MarkRelay adds no per-message or per-seat charge; Cloudflare usage and service limits remain separate.