Tutorials
We'll walk you through adding personalized referral program messaging to your HubSpot emails.
When you connect your GrowSurf campaign to HubSpot, you can easily embed a referral program into your HubSpot emails. Check out the examples below, each with ready-made code snippets that you can copy/paste and customize to your liking.
Please note for HubSpot-specific HTML email templates you must include the required HubL tags and CAN-SPAM tokens.

Example 1

Display a static image in your email.

What it looks like

Copy/paste this HTML code into your HubSpot email

1
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
2
<tr>
3
<td align="center" valign="top">
4
<table border="0" cellpadding="10" cellspacing="0" width="800">
5
<tr>
6
<td align="center" valign="top">
7
<table border="0" cellpadding="10" cellspacing="0" width="100%">
8
<tr>
9
<td align="center" style="font-size: 24px; font-weight: bold">
10
Get your swag
11
</td>
12
</tr>
13
<tr>
14
<td>
15
<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%">
16
</td>
17
</tr>
18
<tr>
19
<td align="center">
20
<strong>Become an Evening Stew ambassador.</strong> Invite your friends and coworkers to sign up to Evening Stew and get rewarded with exclusive swag.
21
</td>
22
</tr>
23
<tr>
24
<td align="center">
25
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ contact.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>
26
</td>
27
</tr>
28
<tr>
29
<td align="center">
30
Or you can copy/paste your unique link here: <a href="{{ contact.growsurf_share_url }}" style="color: #8E4CED;">{{ contact.growsurf_share_url }}</a>
31
</td>
32
</tr>
33
<tr>
34
<td align="center">
35
You currently have {{ contact.growsurf_total_referral_count }} referrals. <a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ contact.email }}" style="color: #8E4CED;">Check your status here</a>. {{ contact.growsurf_next_milestone }}
36
</td>
37
</tr>
38
</table>
39
</td>
40
</tr>
41
</table>
42
</td>
43
</tr>
44
</table>
Copied!

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 Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
    5.
    At line 35, because {{ contact.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 HubSpot email

1
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
2
<tr>
3
<td align="center" valign="top">
4
<table border="0" cellpadding="10" cellspacing="10" width="600">
5
<tr>
6
<td align="center" valign="top">
7
<table border="0" cellpadding="0" cellspacing="0" width="100%">
8
<tr>
9
<td style="background: #8E4CED; color: #FFFFFF; border-radius: 20px; text-align: center; display: inline-block; padding: 5px 10px">
10
{{ contact.growsurf_total_referral_count }} referrals
11
</td>
12
</tr>
13
<tr>
14
<td style="font-size: 24px; font-weight: bold; padding: 10px 0px 15px 0px">
15
Refer your friends, win stuff
16
</td>
17
</tr>
18
<tr>
19
<td>
20
1. Share your unique link with friends/coworkers
21
</td>
22
</tr>
23
<tr>
24
<td>
25
2. When they sign up you unlock a reward
26
</td>
27
</tr>
28
<tr>
29
<td>
30
3. Keep on sharing to unlock more rewards
31
</td>
32
</tr>
33
<tr>
34
<td style="text-align: center; margin-bottom: 5px; padding: 0">
35
<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%">
36
Your unique link:
37
</td>
38
</tr>
39
<tr>
40
<td>
41
<a href="{{ contact.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">{{ contact.growsurf_share_url }}</a>
42
</td>
43
</tr>
44
<tr>
45
<td align="center">
46
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ contact.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>
47
</td>
48
</tr>
49
<tr>
50
<td align="center">
51
<i>{{ contact.growsurf_next_milestone }}</i>
52
</td>
53
</tr>
54
</table>
55
</td>
56
</tr>
57
</table>
58
</td>
59
</tr>
60
</table>
Copied!

Customize the contents

    1.
    At lines 9, 41, 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 Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal 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 {{ contact.growsurf_total_referral_count }}. In this example, you would display any one of these five images at a given time:
      1.
      If {{ contact.growsurf_total_referral_count }} <3, then display this image.
      2.
      If {{ contact.growsurf_total_referral_count }} >=3 and <5, then display this image.
      3.
      If {{ contact.growsurf_total_referral_count }} >=5 and <10, then display this image.
      4.
      If {{ contact.growsurf_total_referral_count }} >=10 and <20, then display this image.
      5.
      If {{ contact.growsurf_total_referral_count }} >=20, then display this image.
    4.
    At line 51, because {{ contact.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 HubSpot email

1
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
2
<tr>
3
<td align="center" valign="top">
4
<table border="0" cellpadding="10" cellspacing="0" width="800">
5
<tr>
6
<td align="center" valign="top">
7
<table border="0" cellpadding="10" cellspacing="0" width="100%">
8
<tr>
9
<td align="center" style="font-size: 24px; font-weight: bold">
10
Share Evening Stew
11
</td>
12
</tr>
13
<tr>
14
<td>
15
<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%">
16
</td>
17
</tr>
18
<tr>
19
<td align="center">
20
πŸ™Œ
21
Share Evening Stew with your friends/coworkers and earn free swag. Copy/paste your referral link: <a href="{{ contact.growsurf_share_url }}" style="color: #8E4CED;">{{ contact.growsurf_share_url }}</a> or <a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ contact.email }}" style="color: #8E4CED;">click here</a> to see your progress towards rewards.
22
</td>
23
</tr>
24
</table>
25
</td>
26
</tr>
27
</table>
28
</td>
29
</tr>
30
</table>
Copied!

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 Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal 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 HubSpot email

1
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
2
<tr>
3
<td align="center" valign="top">
4
<table border="0" cellpadding="10" cellspacing="0" width="800">
5
<tr>
6
<td align="center" valign="top">
7
<table border="0" cellpadding="10" cellspacing="0" width="100%">
8
<tr>
9
<td align="center" style="font-size: 24px; font-weight: bold">
10
Love Husto? Refer a friend
11
</td>
12
</tr>
13
<tr>
14
<td align="center">
15
You can earn a $200 gift card when your friend signs up for Husto.
16
</td>
17
</tr>
18
<tr>
19
<td align="center">
20
Copy and share your unique link: <a href="{{ contact.growsurf_share_url }}" style="color: #F46A54;">{{ contact.growsurf_share_url }}</a>
21
</td>
22
</tr>
23
<tr>
24
<td>
25
<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%">
26
</td>
27
</tr>
28
<tr>
29
<td align="center">
30
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ contact.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>
31
</td>
32
</tr>
33
</table>
34
</td>
35
</tr>
36
</table>
37
</td>
38
</tr>
39
</table>
Copied!

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 Referral Portal, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your Referral Portal 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 HubSpot email

1
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
2
<tr>
3
<td align="center" valign="top">
4
<table border="0" cellpadding="20" cellspacing="0" width="700">
5
<tr>
6
<td>
7
<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">
8
<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="{{ contact.growsurf_share_url }}" style="color: #F46A54;">{{ contact.growsurf_share_url }}</a></p>
9
</td>
10
</tr>
11
</table>
12
</td>
13
</tr>
14
</table>
Copied!

Customize the contents

    2.
    At line 8, replace the entire https://husto.com?grsf=abc123 instead with your Referral Portal URL (e.g, https://refer.yourwebsite.com).
    3.
    At line 8, replace #F46A54 with your own brand color.
Last modified 2mo ago