Referral email template: give $15, get $15

Send this email after the customer has formed an opinion, not at checkout. For a consumable like coffee or skincare, that is roughly 14 days after delivery, once they have used the product twice and know whether they like it. A referral ask at order confirmation falls flat because the buyer has no evidence yet. Wait for the moment they would recommend it unprompted, and the email simply removes the friction.

The offer is dual-sided and framed as a gift, not a commission. "Give a friend $15, get $15 when they buy" outperforms "Get $15 for referring." The recipient stays the hero, and your brand is the messenger. Flat dollar credits beat percentage discounts here, because $15 reads as spendable money where 15 percent reads as a coupon that needs math.

The whole email funnels to one link. Subject line: "Give $15, get $15. Your code is inside." Preheader: "Share Hearth with a friend. You both get $15." Headline names the reward and the first name: "Your $15 is ready, Jordan." The personal link (hearth.co/r/JORDAN15) and the friend code (JORDAN15) sit in a card above the button so the reader can copy either one. The button does a single thing: "Share your link." No "Shop new arrivals" beside it, because a second call to action splits clicks and halves the referrals you collect.

What to expect: referral emails sent to your own customer base clear 8 to 15 percent click-through, against a promotional baseline near 1 to 2 percent. Of the people who click, 5 to 9 percent share. Those shares convert friends at 10 to 20 percent, because the endorsement does the selling for you. A monthly nudge to buyers who have not yet referred typically lifts program volume 20 to 30 percent inside the first quarter.

This email compiles from MJML into the same nested-table HTML every major ESP accepts. Layout comes from tables inside tables, not divs or flexbox, because Outlook's Word rendering engine ignores CSS positioning and would collapse a div layout. Every style sits inline on its element, since Gmail clips and partly strips <style> blocks, and inline CSS survives the clip.

The button is bulletproof. MJML emits a VML roundrect with an anchorlock for Outlook, wrapped in conditional comments, plus a normal anchor tag for every other client. The amber call to action shows as a real filled rectangle in Outlook 2016 through 365, not the transparent, zero-padding rectangle you get from a CSS-only button.

The offer and the code are live text, not text baked into an image. Live text stays selectable, scales on mobile, and survives dark mode. Image text vanishes when images are blocked on first open, which is still common in Outlook and Gmail, and it inverts badly in dark mode. The color-scheme meta locks the email to light only, so the amber button never flips to a dark-on-dark block that hides the call to action.

Mobile gets exactly one media query: a single @media (max-width:600px) rule that stacks the two header columns, drops the headline to 34 pixels, and forces the image and button to full width. Nothing fancier, because Gmail strips much of the CSS inside a style block it cannot fully parse. The web font, Hanken Grotesk, loads through MJML's font declaration and falls back to Helvetica Neue, then Helvetica, then Arial, so the email reads correctly in clients that block remote fonts.

Copy the compiled HTML. If you only have the MJML, run it through the mjml.io browser editor or the CLI command "mjml referral.mjml -o referral.html" to produce the HTML. The compiled file is what you paste.

In Klaviyo, open Campaigns or Flows, start a new email, choose to import HTML or drop an HTML block into the drag-and-drop editor, and paste the file into the source. In Mailchimp, create a campaign, choose Code your own, then Paste in code, and drop the HTML in.

Rebrand in four edits. Replace HEARTH with the client's wordmark, swap the hero image URL, change the two hex values (amber accent #c8782e and espresso ink #2a1d14) in the <mj-attributes> block, and update the footer address with the real links. The whole email re-skins from those two colors, so the link card, the button, and the headlines all move together.

Wire the merge tags so each recipient sees their own link and code. In Klaviyo, replace Jordan with {{ first_name|default:'friend' }} and swap the static URL for a custom profile property such as {{ person|lookup:'Referral Link' }}, or the merge tag your referral app exposes (Friendbuy, Smile, Refersion). In Mailchimp, drop in *|FNAME|* for the name and *|REFERRALLINK|* for the share URL.

Test before you send. Open the email in Gmail web, Apple Mail on iOS, and Outlook desktop, the three clients that catch most breakage. Turn dark mode on for the Apple Mail and Outlook checks. Confirm the link resolves to the right share page and the code matches the recipient. A 20-minute test pass here saves the apology email later.