Tutorials

We'll walk you through adding personalized referral program messaging to your SendGrid emails.

When you connect your GrowSurf campaign to SendGrid, you can easily embed a referral program into your SendGrid 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 SendGrid email

<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={{email}}" 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="{{growsurf_share_url}}" style="color: #8E4CED;">{{growsurf_share_url}}</a>
</td>
</tr>
<tr>
<td align="center">
You currently have {{growsurf_total_referral_count}} referrals. <a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{email}}" style="color: #8E4CED;">Check your status here</a>. {{growsurf_next_milestone}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Customize the contents

  1. At line 20, replace all instances of Evening Stew with your own brand name.

  2. At lines 25, 30, and 35, replace #8E4CED with your own brand color.

  3. At line 25 and 35, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)

    1. If you setup a custom domain for your GrowSurf landing page, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your landing page URL (e.g, https://refer.yourwebsite.com).

  4. At line 35, because {{growsurf_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 2

Display different reward images based on how many referrals the participant has made.

What it looks like

Copy/paste this HTML code into your SendGrid email

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="10" width="600">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="background: #8E4CED; color: #FFFFFF; border-radius: 20px; text-align: center; display: inline-block; padding: 5px 10px">
{{growsurf_total_referral_count}} referrals
</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold; padding: 10px 0px 15px 0px">
💯 Refer your friends, win stuff
</td>
</tr>
<tr>
<td>
1. Share your unique link with friends/coworkers
</td>
</tr>
<tr>
<td>
2. When they sign up you unlock a reward
</td>
</tr>
<tr>
<td>
3. Keep on sharing to unlock more rewards
</td>
</tr>
<tr>
<td>
<img src="https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/0-won.png" alt="rewards" style="display: block; margin: 0 auto; max-width: 800px; width: 100%">
<a href="{{growsurf_share_url}}" style="display: block; background: #FAFAFA; color: #8E4CED; text-decoration: none; text-align: center; padding: 20px; font-size: 1.25em; font-weight: bold">{{growsurf_share_url}}</a>
</td>
</tr>
<tr>
<td style="text-align: center; margin-bottom: 5px; padding: 0">
Your unique link:
</td>
</tr>
<tr>
<td align="center">
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{email}}" 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">View your referral progress</a>
</td>
</tr>
<tr>
<td align="center">
<i>{{growsurf_next_milestone}}</i>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Customize the contents

  1. At lines 9, 36, and 46, replace #8E4CED with your own brand color.

  2. At line 46, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)

    1. If you setup a custom domain for your GrowSurf landing page, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your landing page URL (e.g, https://refer.yourwebsite.com).

  3. At line 35, replace https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/0-won.png with your own image based on {{growsurf_total_referral_count}}. In this example, you would display any one of these five images at a given time:

    1. If {{growsurf_total_referral_count}} <3, then display this image.

    2. If {{growsurf_total_referral_count}} >=3 and <5, then display this image.

    3. If {{growsurf_total_referral_count}} >=5 and <10, then display this image.

    4. If {{growsurf_total_referral_count}} >=10 and <20, then display this image.

    5. If {{growsurf_total_referral_count}} >=20, then display this image.

  4. At line 51, because {{growsurf_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 3

Display a GIF image with rotating rewards in your email.

What it looks like

Copy/paste this HTML code into your SendGrid email

<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">
Share Evening Stew
</td>
</tr>
<tr>
<td>
<img src="https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/rotating-rewards.gif" alt="rewards" style="display: block; margin: 0 auto; max-width: 300px; width: 100%">
</td>
</tr>
<tr>
<td align="center">
🙌
Share Evening Stew with your friends/coworkers and earn free swag. Copy/paste your referral link: <a href="{{growsurf_share_url}}" style="color: #8E4CED;">{{growsurf_share_url}}</a> or <a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{email}}" style="color: #8E4CED;">click here</a> to see your progress towards rewards.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Customize the contents

  1. At lines 10 and 21, replace Evening Stew with your own brand name.

  2. At line 21, replace all instances of#8E4CED with your own brand color.

  3. At line 21, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)

    1. If you setup a custom domain for your GrowSurf landing page, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your landing page URL (e.g, https://refer.yourwebsite.com).

  4. At line 15, replace https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/rewards-inline.png with your own GIF image (you can use a tool like https://ezgif.com/maker).

Example 4

Display a static image in your email.

What it looks like

Copy/paste this HTML code into your SendGrid email

<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">
Love Husto? Refer a friend
</td>
</tr>
<tr>
<td align="center">
You can earn a $200 gift card when your friend signs up for Husto.
</td>
</tr>
<tr>
<td align="center">
Copy and share your unique link: <a href="{{growsurf_share_url}}" style="color: #F46A54;">{{growsurf_share_url}}</a>
</td>
</tr>
<tr>
<td>
<img src="https://growsurf-blog.s3-us-west-2.amazonaws.com/husto/gift-card-reward.png" alt="reward" style="display: block; margin: 0 auto; max-width: 300px; width: 100%">
</td>
</tr>
<tr>
<td align="center">
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={$email}" style="background: #F46A54; color: #FFFFFF; margin-bottom: 20px; text-align: center; padding: 20px; border-radius: 3px; display: inline-block; text-decoration: none">View your referral progress</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Customize the contents

  1. At lines 10 and 15, replace Husto with your own brand name.

  2. At lines 20 and 30, replace #F46A54 with your own brand color.

  3. At line 30, replace YOUR_CAMPAIGN_ID with your GrowSurf campaign ID (e.g, p9josq)

    1. If you setup a custom domain for your GrowSurf landing page, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your landing page URL (e.g, https://refer.yourwebsite.com).

Example 5

Display a static image with text next to it.

What it looks like

Copy/paste this HTML code into your SendGrid email

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="700">
<tr>
<td>
<img src="https://growsurf-blog.s3-us-west-2.amazonaws.com/husto/reward.png" alt="growsurf" width="45px" height="auto" style="float: left; padding-top: 12px; padding-right: 15px">
<p>Love Husto? Earn a $200 gift card and a free month of Husto Premium for you and a friend! Copy and share your unique link: <a href="{{growsurf_share_url}}" style="color: #F46A54;">{{growsurf_share_url}}</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>

Customize the contents

  1. At line 8, replace the entire https://husto.com?grsf=abc123 instead with your landing page URL (e.g, https://refer.yourwebsite.com).

  2. At line 8, replace #F46A54 with your own brand color.