We'll walk you through adding personalized referral program messaging to your Customer.io emails.
When you connect your GrowSurf campaign to Customer.io, you can easily embed a referral program into your Customer.io emails. Check out the examples below, each with ready-made code snippets that you can copy/paste and customize to your liking.
Example 1
Display a static image in your email.
What it looks like
Copy/paste this HTML code into your Customer.io email
At line 15, replace #e87b3c with your own brand color.
At line 15, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)
If you set up a custom domain for your GrowSurf Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
Example 3
Display static images in email.
What it looks like
Copy/paste this HTML code into your Customer.io email
Customize the contents
At line 5, replace all instances of Cointech with your own brand name.
At lines 6, 21, 30, 39 and 47, replace #4f46e5 with your own brand color.
At lines 6 and 47, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)
If you set up a custom domain for your GrowSurf Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
Example 4
Display a static image in your email.
What it looks like
Copy/paste this HTML code into your Customer.io email
Customize the contents
At line 5, replace LearnEd with your own brand name.
At line 19, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)
If you set up a custom domain for your GrowSurf Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
At line 19, replace #ee1152 with your own brand color.
Example 5
Display a static image in your email.
What it looks like
Copy/paste this HTML code into your Customer.io email
At line 19, replace #094a83 with your own brand color.
At line 19, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)
If you set up a custom domain for your GrowSurf Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
Example 6
Display a static image in your email.
What it looks like
Copy/paste this HTML code into your Customer.io email
Make sure to include {{customer.grsf_share_url}} only to the encoded message
Example 7
Display a static image in your email.
What it looks like
Copy/paste this HTML code into your Customer.io email
Customize the contents
At line 4, replace all instances of PrismJar with your own brand name.
At line 8, replace #1673df with your own brand color.
At line 8, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)
If you set up a custom domain for your GrowSurf Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
At line 12, replace https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/boy-and-girl-giving-high-five-to-each-other.png with your own image.
Example 8
Display static images in your email.
What it looks like
Copy/paste this HTML code into your Customer.io email
Customize the contents
At lines 5 and 24, replace all instances of Cointech with your own brand name.
At lines 6 and 42, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)
If you set up a custom domain for your GrowSurf Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
At lines 6 and 42, replace #4f46e5 with your own brand color.
At line 22, replace https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-steps-1.png with your own image.
At line 27, replace https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-profiles-4.png with your own image.
At line 32, replace https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-steps-2.png with your own image.
Example 9
Display a static image in your email.
What it looks like
Copy/paste this HTML code into your Customer.io email
Customize the contents
At line 20, replace all instances of Evening Stew with your own brand name.
At lines 25, 30, and 35, replace #8E4CED with your own brand color.
At line 25 and 35, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)
If you setup a custom domain for your GrowSurf Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
At line 35, because {{customer.grsf_next_milestone}} is used, make sure that any milestone rewards you have in your GrowSurf campaign have Next Milestone values set (see image. Note: This only applies to milestone rewards).
Example 10
Display different reward images based on how many referrals the participant has made.
What it looks like
Copy/paste this HTML code into your Customer.io email
Customize the contents
At lines 9, 41, and 46, replace #8E4CED with your own brand color.
At line 46, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)
If you setup a custom domain for your GrowSurf Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
If {{customer.grsf_total_referral_count}} <3, then display this image.
If {{customer.grsf_total_referral_count}} >=3 and <5, then display this image.
If {{customer.grsf_total_referral_count}} >=5 and <10, then display this image.
If {{customer.grsf_total_referral_count}} >=10 and <20, then display this image.
If {{customer.grsf_total_referral_count}} >=20, then display this image.
At line 51, because {{customer.grsf_next_milestone}} is used, make sure that any milestone rewards you have in your GrowSurf campaign have Next Milestone values set (see image. Note: This only applies to milestone rewards).
Example 11
Display a GIF image with rotating rewards in your email.
What it looks like
Copy/paste this HTML code into your Customer.io email
Customize the contents
At lines 10 and 21, replace Evening Stew with your own brand name.
At line 21, replace all instances of#8E4CED with your own brand color.
At line 21, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)
If you setup a custom domain for your GrowSurf Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
Copy/paste this HTML code into your Customer.io email
Customize the contents
At lines 10 and 15, replace Husto with your own brand name.
At lines 20 and 30, replace #F46A54 with your own brand color.
At line 30, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)
If you setup a custom domain for your GrowSurfReferral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
<table width="100%" cellpadding="0" cellspacing="0" style="background: #ffffff; max-width: 600px; margin: 0 auto; font-family: sans-serif; padding-left: 20px; padding-right: 20px;">
<tr>
<td style="text-align: left; font-weight: 400; font-size: 16px;">
<p style="line-height: 1.6;">Thanks for using PrismJar to manage your workforce. We hope your customer experience is amazing and one that's worth sharing. In fact, you can invite your friends and colleagues to try PrismJar, and you each get a $100 gift card when they sign up for an annual subscription.</p>
</td>
</tr>
<tr>
<td style="font-size: 16px; padding-bottom: 30px;" align="center"> <a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{customer.email}}&grsf_first_name={{customer.first_name}}&grsf_last_name={{customer.last_name}}" style="display: inline-block; min-width: 50%; border-radius: 4px; background: #1673df; color: #ffffff; padding: 12px; text-decoration: none;">Invite A Friend, Get $100</a> </td>
</tr>
<tr>
<td>
<img src="https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/boy-and-girl-giving-high-five-to-each-other.png" alt="reward image" style="display: block; width: 100%; max-width: 300px; margin: 0 auto;">
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="background: #ffffff; max-width: 700px; margin: 0 auto; font-family: sans-serif;">
<tr>
<td style="padding: 20px; text-align: center;">
<p style="padding: 0; margin: 0; font-weight: 700; color: #484848; line-height: 1.3; font-size: 25px;">Get $10 when you refer a friend</p>
<p style="padding-top: 10px; padding-bottom: 25px; margin: 0; font-weight: 100; color: #484848; line-height: 1.4; font-size: 18px;">Love Cointech? Spread the excitement by referring friends and we'll give you both get $10.</p>
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{customer.email}}&grsf_first_name={{customer.first_name}}&grsf_last_name={{customer.last_name}}" style="display: inline-block; font-size: 18px; margin-bottom: 12px; background: #4f46e5; color: #ffffff; padding: 12px 24px 12px 24px; text-decoration: none;">Refer Friends</a>
</td>
</tr>
<tr>
<td style="padding: 10px 0;">
<hr style="width: 50%; max-width: 120px; border-top: 1px solid #acacac;">
</td>
</tr>
<tr>
<td>
<p style="padding-top: 20px; margin: 0; text-align: center; color: #484848; line-height: 1.3; font-weight: 700; font-size: 25px;">Here's how to get $10</p>
<tr>
<td style="padding: 20px; background: #ffffff;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 33.33%; vertical-align: top; padding: 10px; color: #484848; text-align: center;">
<img src="https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-steps-1.png" alt="step 1" style="display: inline-block; height: auto; max-height: 60px; border: none; padding-top: 10px; padding-bottom: 10px;">
<p style="font-weight: 700;">Spread the word</p>
<p>Go to your Cointech page to get your unique referral link and share it via text, email, or social media</p>
</td>
<td style="width: 33.33%; vertical-align: top; padding: 10px; color: #484848; text-align: center;">
<img src="https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-profiles-4.png" alt="step 2" style="display: inline-block; height: auto; max-height: 60px; border: none; padding-top: 10px; padding-bottom: 10px;">
<p style="font-weight: 700;">You'll get $10</p>
<p>Receive $10 for each friend your refer that makes their first deposit</p>
</td>
<td style="width: 33.33%; vertical-align: top; padding: 10px; color: #484848; text-align: center;">
<img src="https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-steps-2.png" alt="step 3" style="display: inline-block; height: auto; max-height: 60px; border: none; padding-top: 10px; padding-bottom: 10px;">
<p style="font-weight: 700;">Your friends get $10</p>
<p>Each friend you refer also gets $10 in account credits. Everyone wins!</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align: center;">
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{customer.email}}&grsf_first_name={{customer.first_name}}&grsf_last_name={{customer.last_name}}" style="display: inline-block; font-size: 18px; margin-bottom: 12px; background: #4f46e5; color: #ffffff; padding: 12px 24px 12px 24px; text-decoration: none;">Refer Friends</a>
</td>
</tr>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="800">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td align="center" style="font-size: 24px; font-weight: bold">
⚡️ Get your swag 🔥
</td>
</tr>
<tr>
<td>
<img src="https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/rewards-inline.png" alt="rewards" style="display: block; margin: 0 auto; max-width: 600px; width: 100%">
</td>
</tr>
<tr>
<td align="center">
<strong>Become an Evening Stew ambassador.</strong> Invite your friends and coworkers to sign up to Evening Stew and get rewarded with exclusive swag.
</td>
</tr>
<tr>
<td align="center">
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{customer.email}}&grsf_first_name={{customer.first_name}}&grsf_last_name={{customer.last_name}}" style="background: #8E4CED; color: #FFFFFF; margin-bottom: 20px; margin-top: 20px; text-align: center; padding: 20px; border-radius: 3px; display: inline-block; text-decoration: none">Share with a friend</a>
</td>
</tr>
<tr>
<td align="center">
Or you can copy/paste your unique link here: <a href="{{customer.grsf_share_url}}" style="color: #8E4CED;">{{customer.grsf_share_url}}</a>
</td>
</tr>
<tr>
<td align="center">
You currently have {{customer.grsf_total_referral_count}} referrals. <a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{customer.email}}&grsf_first_name={{customer.first_name}}&grsf_last_name={{customer.last_name}}" style="color: #8E4CED;">Check your status here</a>. {{customer.grsf_next_milestone}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
