Refer a Friend Reward email template
A refer-a-friend email for a card or fintech app: a deep green band with a big reward headline, give and get panels, three steps and a phone panel.
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>Refer a Friend Reward</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;}
.ete-ds-54{font-size:38px!important;line-height:42px!important;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
.ete-icon-cell{padding-left:2px!important;padding-right:2px!important;}
.ete-icon-wrap{min-width:0!important;}
.ete-split-text{padding:32px 20px 36px!important;}
.ete-ds-28{font-size:28px!important;line-height:31px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0a110d!important;}
.ete-content{background-color:#111a15!important;}
.ete-text{color:#d4e2d9!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#93a69a!important;}
.ete-link{color:#8fe3b8!important;}
.ete-border{border-color:#24342b!important;}
.ete-panel{background-color:#18231d!important;border-color:#24342b!important;}
.ete-btn{background-color:#8fe3b8!important;border-color:#8fe3b8!important;}
.ete-btn-text{color:#0a110d!important;}
.ete-btn-outline{border-color:#8fe3b8!important;}
.ete-btn-outline-text{color:#8fe3b8!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:#d4e2d9!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#93a69a!important;}
[data-ogsc] .ete-link{color:#8fe3b8!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0a110d!important;}
[data-ogsb] .ete-content{background-color:#111a15!important;}
[data-ogsb] .ete-panel{background-color:#18231d!important;border-color:#24342b!important;}
body,table,td,th,p,a,span,div,li{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
h1,h2,h3,.ete-hf{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
.ete-f-inter{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
.ete-f-poppins{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
</style>
<!--[if !mso]><!--><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Poppins:wght@400;600;700;800&display=swap"><!--<![endif]-->
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#eaf1ec;">
<!-- 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;">Invite a friend. When they make their first purchase, you both get $25 back. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#eaf1ec;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;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="center" class="ete-px" style="padding:28px 32px 20px;"><span class="ete-heading" style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#10241a;">Penny Card</span></td></tr>
<tr><td align="center" class="ete-px" style="padding:56px 6.67% 44px;mso-padding-alt:56px 40px 44px;background-color:#10241a;text-align:center;"><p style="margin:0 0 12px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8fe3b8;text-align:center;">Refer a friend</p><h1 class="ete-ds-54" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:54px;line-height:58px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;letter-spacing:-0.5px;font-size:min(54px,9vw);line-height:min(58px,9.67vw);overflow-wrap:anywhere;word-break:break-word;">Give $25, get $25</h1><p style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#ffffff;padding-top:16px;text-align:center;">Invite a friend to Penny Card. When they make their first purchase, you both get $25 back on your cards.</p><div style="padding-top:28px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center"><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/invite" style="height:48px;v-text-anchor:middle;width:199px;" arcsize="17%" strokecolor="#8fe3b8" fillcolor="#8fe3b8"><w:anchorlock/><center style="color:#10241a;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Invite a friend</center></v:roundrect><![endif]--><!--[if !mso]><!--><a href="https://example.com/invite" style="display:inline-block;background-color:#8fe3b8;border:1px solid #8fe3b8;line-height:48px;border-radius:8px;color:#10241a;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, 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 style="color:#10241a;">Invite a friend</span></a><!--<![endif]--></td></tr></table></div><p style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#ffffff;padding-top:14px;text-align:center;">Invite as many friends as you like this year.</p></td></tr>
<tr><td class="" style="padding:0;background-color:#10241a;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/refer-a-friend-reward-hero.jpg" alt="Two friends sit side by side holding glasses of iced tea" width="600" height="400" class="ete-fluid" style="display:block;width:600px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></td></tr>
<tr><td class="ete-px" style="padding:12px 22px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="556" cellpadding="0" cellspacing="0" border="0"><tr><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><div style="padding-top:0px;"><h3 class="ete-heading" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#10241a;text-align:center;mso-line-height-rule:exactly;">You get $25</h3></div><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3a4740;padding-top:6px;text-align:center;">Added to your card balance within three days of your friend's first purchase.</p></td></tr></table></div><!--[if mso]></td><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><div style="padding-top:0px;"><h3 class="ete-heading" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#10241a;text-align:center;mso-line-height-rule:exactly;">Your friend gets $25</h3></div><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3a4740;padding-top:6px;text-align:center;">Their welcome credit lands right after the first purchase, with no yearly fee.</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:28px 32px 12px;background-color:#e3efe7;"><div style="padding-bottom:20px;"><h3 class="" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#10241a;text-align:center;mso-line-height-rule:exactly;">How it works</h3></div><div style="font-size:0;text-align:center;"><!--[if mso]><table role="presentation" width="536" cellpadding="0" cellspacing="0" border="0"><tr><td width="178" valign="top"><![endif]--><div class="ete-icon-wrap" style="display:inline-block;vertical-align:top;width:33.33%;min-width:94px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 8px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/icon-mail-0f6b48.png" alt="" width="36" height="36" class="" style="display:block;width:36px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;margin:0 auto;"><p style="margin:0;padding-top:10px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:19px;font-weight:700;color:#10241a;text-align:center;">1. Share your link</p><p style="margin:0;padding-top:4px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;color:#10241a;text-align:center;">From the app or by email</p></td></tr></table></div><!--[if mso]></td><td width="178" valign="top"><![endif]--><div class="ete-icon-wrap" style="display:inline-block;vertical-align:top;width:33.33%;min-width:94px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 8px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/icon-users-0f6b48.png" alt="" width="36" height="36" class="" style="display:block;width:36px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;margin:0 auto;"><p style="margin:0;padding-top:10px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:19px;font-weight:700;color:#10241a;text-align:center;">2. They sign up</p><p style="margin:0;padding-top:4px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;color:#10241a;text-align:center;">In about five minutes</p></td></tr></table></div><!--[if mso]></td><td width="178" valign="top"><![endif]--><div class="ete-icon-wrap" style="display:inline-block;vertical-align:top;width:33.33%;min-width:94px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 8px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/icon-gift-0f6b48.png" alt="" width="36" height="36" class="" style="display:block;width:36px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;margin:0 auto;"><p style="margin:0;padding-top:10px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:19px;font-weight:700;color:#10241a;text-align:center;">3. You both get paid</p><p style="margin:0;padding-top:4px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;color:#10241a;text-align:center;">After their first buy</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td height="16" style="height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="" style="padding:0;"><div style="font-size:0;text-align:left;display:flex;flex-wrap:wrap;background-color:#10241a;"><!--[if mso]><table role="presentation" width="600" bgcolor="#10241a" cellpadding="0" cellspacing="0" border="0"><tr><td width="263" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:43.83%;max-width:100%;width:43.83%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:flex-start;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/refer-a-friend-reward-phone.jpg" alt="A man taps on his phone at a sunny outdoor table next to an iced coffee" width="263" height="329" class="ete-fluid" style="display:block;width:263px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;"></div><!--[if mso]></td><td width="337" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:56.16%;max-width:100%;width:56.16%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-split-text" style="padding:40px 32px;"><p style="margin:0 0 12px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8fe3b8;text-align:left;">In your app</p><h1 class="ete-ds-28" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:28px;line-height:34px;font-weight:700;color:#ffffff;text-align:left;mso-line-height-rule:exactly;">Watch your reward arrive</h1><p style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#ffffff;padding-top:16px;text-align:left;">Open the Rewards tab to see who joined and when your $25 lands.</p><div style="padding-top:28px;"><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/app" style="height:48px;v-text-anchor:middle;width:172px;" arcsize="17%" strokecolor="#ffffff" fillcolor="#ffffff"><w:anchorlock/><center style="color:#10241a;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Open the app</center></v:roundrect><![endif]--><!--[if !mso]><!--><a href="https://example.com/app" style="display:inline-block;background-color:#ffffff;border:1px solid #ffffff;line-height:48px;border-radius:8px;color:#10241a;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, 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 style="color:#10241a;">Open the app</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6b7a71;text-align:center;">Terms: your friend must be new to Penny Card and make a purchase within 30 days of signing up. Rewards are paid as card credit.</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6b7a71;line-height:20px;text-align:center;"><strong>Penny Card Inc.</strong><br>500 Market Street, Floor 6, San Francisco, CA 94105</p><p class="ete-muted" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6b7a71;line-height:20px;text-align:center;padding-top:10px;">You get this email because you have a Penny Card account. Card issued by a partner bank.</p><p class="ete-muted" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6b7a71;line-height:20px;text-align:center;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#6b7a71;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:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#6b7a71;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#6b7a71;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
About this template
A referral email for cards, banking apps, subscriptions and other services that reward people for inviting friends. The offer sits in the headline, so readers see the deal before they scroll.
A deep green band carries the eyebrow, a large Give $25, get $25 headline, one mint button and a small note. Right under it, a photo of two friends sharing tea keeps the tone personal. Two side by side panels spell out what each person gets. A light green row of three icons explains the steps: share your link, your friend signs up, and you both get paid.
A dark split panel with a phone photo shows where the reward appears, followed by a short terms line and the footer with the card issuer note. Clear numbers, short lines and one main button keep it easy to act on.
Change the amounts and the terms to match your program, and send it after a customer’s first good month.
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
- Green reward band with photo
- Give and get panels
- Three steps icon row
- Phone split panel
- Terms
- Footer
Subject line ideas
- Give $25, get $25, {{first_name}}
- Know someone who would like Penny Card?
- Your invite link is ready
Preview text idea
Invite a friend. When they make their first purchase, you both get $25 back.