Tutorials
We'll walk you through adding personalized referral program messaging to your Drip emails.
When you connect your GrowSurf campaign to Drip, you can easily embed a referral program into your Drip emails. Check out the examples below, each with ready-made code snippets that you can copy/paste and customize to your liking.
Display a static image in your email.

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 15px; background: #F5F5F5; max-width: 600px; margin: 0 auto; font-family: sans-serif;">
<tr>
<th>
<img src="https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-steps-2.png" alt="reward image" style="display: block; margin: 0 auto; width: 100%;">
</th>
</tr>
<tr style="background: #FFFFFF">
<td style="padding: 20px; text-align: center;">
<p style="font-size: 30px; margin: 5px;">Refer your friends, boost your savings</p>
<hr style="margin: 15px;">
<p style="font-size: 16px;">Get $5 for every friend you refer to PrismJar with your personal referral link:
<a href="{{ subscriber.grsf_share_url }}" style="color: #1673df; text-decoration: none;">{{ subscriber.grsf_share_url }}</a>
</p>
<div>
<a href="mailto:?body={{ subscriber.grsf_share_url }}%0AJoin%20PrismJar%20and%20we%20both%20get%20$10%20:)" style="display: inline-block; font-size: 24px; width: 50%; margin-bottom: 16px; margin-top: 10px; background: #dd4b39; color: #ffffff; padding: 12px; text-decoration: none;">Send to Email</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ subscriber.grsf_share_url }}" style="display: inline-block; font-size: 24px; width: 50%; margin-bottom: 16px; background: #3b5999; color: #ffffff; padding: 12px; text-decoration: none;">Post to Facebook</a>
<a href="https://twitter.com/intent/tweet?url={{ subscriber.grsf_share_url }}&text=Join%20PrismJar%20and%20we%20both%20get%20$10%20:)" style="display: inline-block; font-size: 24px; width: 50%; margin-bottom: 16px; background: #55acee; color: #ffffff; padding: 12px; text-decoration: none;">Send by Twitter</a>
</div>
</td>
</tr>
</table>
- 1.At line 4, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-steps-2.png
with your own image. - 2.At line 11 replace
PrismJar
with your own brand name. - 3.At line 12, replace
#1673df
with your own brand color. - 4.At line 15, replace the text
{{ subscriber.grsf_share_url }}%0AJoin%20PrismJar%20and%20we%20both%20get%20$10%20
with your own.- 1.
- 2.Make sure to include
{{ subscriber.grsf_share_url }}
only to the encoded message
- 5.At line 17, replace the text
Join%20PrismJar%20and%20we%20both%20get%20$5%20
with your own- 1.
Display a static image in your email.

<table width="100%" cellpadding="0" cellspacing="0" style="background: #1f2937; max-width: 600px; padding: 0; margin: 0 auto; font-family: sans-serif;">
<tr>
<td style="padding: 18px; text-align: center; border-top: 0; border-bottom: 0;">
<img src="https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/Gift0002.png" alt="reward image" style="display: block; margin: 0 auto; width: 100%;">
<h1 style="display: block; margin: 0; padding-top: 18px; font-size: 38px; font-style: normal; font-weight: bold; line-height: 125%; letter-spacing: 1px; text-align: center; color: #ffffff;">Get $10 in bonus credits when you refer a friend</h1>
</td>
</tr>
<tr>
<td style="padding-top: 0; padding-right: 18px; padding-left: 18px; word-break: break-word; color: #00265d; font-size: 16px; line-height: 150%; text-align: left;">
<h3 style="display: block; margin: 0; padding: 0; color: #FFFFFF; font-size: 18px; font-style: normal; font-weight: normal; line-height: 150%; letter-spacing: 1px; text-align: center;">The more friends you refer, the more money you make.</h3>
</td>
</tr>
<tr>
<td style="font-size: 18px; padding: 18px; padding-bottom: 36px;" align="center">
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ subscriber.email }}&grsf_first_name={{ subscriber.first_name }}&grsf_last_name={{ subscriber.last_name }}" style="display: inline-block; width: 20%; margin-bottom: 16px; margin-top: 10px; border-radius: 4px; background: #e87b3c; color: #ffffff; padding: 12px; text-decoration: none;">Get $10</a>
</td>
</tr>
</table>
- 1.At line 4, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/Gift0002.png
with your own image. - 2.At line 15, replace
#e87b3c
with your own brand color. - 3.At line 15, replace
YOUR_CAMPAIGN_ID
with your GrowSurf campaign ID (e.g,p9josq
)- 1.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
).
Display static images in email.

<table width="100%" cellpadding="0" cellspacing="0" style="background: #ffffff; max-width: 600px; margin: 0 auto; font-family: sans-serif;">
<tr>
<td style="padding: 20px; text-align: left;">
<p style="padding: 0; margin: 0; text-align: left; 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; text-align: left; font-weight: 100; color: #484848; line-height: 1.4; font-size: 18px;">Love Cointech? Spread the excitement by referring friends and you'll both get $10.</p>
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ subscriber.email }}&grsf_first_name={{ subscriber.first_name }}&grsf_last_name={{ subscriber.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-left: 20px; padding-right: 20px;">
<hr style="width:100%; text-align:left;">
</td>
</tr>
<tr>
<td style="padding: 20px;">
<p style="padding: 0; margin: 0; text-align: left; color: #484848; line-height: 1.3; font-weight: 700; font-size: 25px;">It's easy to get rewarded</p>
<p style="padding-top: 10px; padding-bottom: 20px; margin: 0; text-align: left; font-weight: 100; color: #484848; line-height: 1.4; font-size: 18px;">Refer friends to Cointech and we'll give you both $10 in account credits for every friend who makes their first deposit.</p>
<table border="0" cellpadding="0" style="padding-bottom: 20px;">
<tr>
<td style="padding: 10px;">
<div style="background: #4f46e5; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 22px; height: 40px; width: 40px; border-radius: 40px;">1</div>
</td>
<td style="padding: 10px; text-align: left;">
<h3 style="margin-bottom: 5px;">Spread the word</h3>
<p style="margin-top: 5px;">Go to your Cointech page to get your unique referral link and share it via text, email, or social media</p>
</td>
</tr>
<tr>
<td style="padding: 10px;">
<div style="background: #4f46e5; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 22px; height: 40px; width: 40px; border-radius: 40px;">2</div>
</td>
<td style="padding: 10px; text-align: left;">
<h3 style="margin-bottom: 5px;">You'll get $10</h3>
<p style="margin-top: 5px;">Receive $10 for each friend your refer that makes their first deposit</p>
</td>
</tr>
<tr>
<td style="padding: 10px;">
<div style="background: #4f46e5; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 22px; height: 40px; width: 40px; border-radius: 40px;">3</div>
</td>
<td style="padding: 10px; text-align: left;">
<h3 style="margin-bottom: 5px;">Your friends get $10</h3>
<p style="margin-top: 5px;">Each friend you refer also gets $10 in account credits. Everyone wins!</p>
</td>
</tr>
</table>
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ subscriber.email }}&grsf_first_name={{ subscriber.first_name }}&grsf_last_name={{ subscriber.last_name }}" style="display: inline-block; font-size: 18px; margin-bottom: 16px; background: #4f46e5; color: #ffffff; padding:12px 24px 12px 24px; text-decoration: none;">Refer Friends</a>
</td>
</tr>
</table>
- 1.At line 5, replace all instances of
Cointech
with your own brand name. - 2.At lines 6, 21, 30, 39, and 47, replace
#4f46e5
with your own brand color. - 3.At lines 6 and 47, replace
YOUR_CAMPAIGN_ID
with your GrowSurf campaign ID (e.g,p9josq
)- 1.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
).
Display a static image in your email.

<table width="100%" cellpadding="0" cellspacing="0" style="background: #ffffff; max-width: 600px; margin: 0 auto; font-family: sans-serif;">
<tr>
<td style="padding-left: 20px; padding-right: 20px; text-align: left;">
<p style="font-size: 25px; font-weight: 700;">Give $200, Get $200</p>
<p style="padding-bottom: 20px">Did you know you can get $200 when you refer LearnEd to a friend?</p>
</td>
</tr>
<tr>
<td style="text-align: center;">
<img src="https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/507b3cec-5435-499f-96d7-46c5a4d6d79f.svg" alt="reward image" style="width: 100%;">
</td>
</tr>
<tr>
<td style="padding-left: 20px; padding-right: 20px; padding-top: 20px;">
<table border="0" cellpadding="0">
<tr>
<td style="width: 100%; text-align: left; line-height: 1.6">
<p>Simply share your unique referral link with your friends/family and we'll give both of you a $200 gift card for everyone who enrolls into a LearnEd program! It's a win-win for all.</p>
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ subscriber.email }}&grsf_first_name={{ subscriber.first_name }}&grsf_last_name={{ subscriber.last_name }}" style="display: inline-block; font-size: 18px; margin-bottom: 16px; border-radius: 10px; background: #ee1152; color: #ffffff; padding: 12px 24px 12px 24px; text-decoration: none;">Refer Friends</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
- 1.At line 5, replace
LearnEd
with your own brand name. - 2.At line 10, replace
https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/507b3cec-5435-499f-96d7-46c5a4d6d79f.svg
with your own image. - 3.At line 19, replace
YOUR_CAMPAIGN_ID
with your GrowSurf campaign ID (e.g,p9josq
)- 1.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
).
- 4.At line 19, replace
#ee1152
with your own brand color
Display a static image in your email.

<table width="100%" cellpadding="0" cellspacing="0" style="background: #ffffff; max-width: 600px; margin: 0 auto; font-family: sans-serif;">
<tr>
<td style="padding: 20px; text-align: center;">
<h1 style="margin: 5px;">Give $100, Get $100</h1>
<img src="https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/people.png" alt="reward image" style="display: block; padding-top: 20px; margin: 0 auto; width: 100%;">
</td>
</tr>
<tr>
<td style="padding-left: 20px; padding-right: 20px; margin: 0; text-align: left;">
<p>Give $100, Get $100.</p>
<p>Did you know that you can get $100 for referrals?</p>
<p style="line-height: 1.6;">Simply share your unique referral link:
<a href="{{ subscriber.grsf_share_url }}" style="color: #4f46e5; text-decoration: none;">{{ subscriber.grsf_share_url }}</a> or click the button below to invite them from your personal referral portal. We'll give you and your friends both a $100 gift card when they activate an insurance policy with us.
</p>
</td>
</tr>
<tr>
<td style="padding-left: 20px; padding-right: 20px; margin: 0 auto; text-align: center;">
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ subscriber.email }}&grsf_first_name={{ subscriber.first_name }}&grsf_last_name={{ subscriber.last_name }}" style="display: inline-block; margin-bottom: 20px; margin-top: 20px; border-radius: 4px; background: #094a83; color: #ffffff; padding: 20px; text-decoration: none; font-size: 18px; text-align: center;">Refer Friends</a>
</td>
</tr>
</table>
- 1.At line 5, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/people.png
with your own image. - 2.At line 19, replace
#094a83
with your own brand color. - 3.At line 19, replace
YOUR_CAMPAIGN_ID
with your GrowSurf campaign ID (e.g,p9josq
)- 1.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
).
Display a static image in your email.

<table width="100%" cellpadding="0" cellspacing="0" style="background: #1f2937; max-width: 600px; padding: 0; margin: 0 auto; font-family: sans-serif;">
<tr>
<td style="text-align: center; border-top: 0; border-bottom: 0; ">
<div style="padding: 20px;">
<img src="https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/welcome.png" alt="reward image" style="display: block; margin: 0 auto; width: 100%;">
<div>
<h1 style="display: block; margin: 0; padding-top: 40px; padding-bottom: 20px; font-size: 18px; font-style: normal; font-weight: bold; color: #ffffff;">Invite your friends to Sips</h1>
</td>
</tr>
<tr>
<td style="padding-bottom: 20px; font-size: 16px;">
<p style="display: block; margin: 0; padding: 0; color: #ffffff; font-style: normal; font-weight: normal; text-align: center;">Get a friend saving with Sips, and you'll both get $10 in accounts credits.</p>
</td>
</tr>
<tr>
<td style="padding-top: 0; font-size: 16px;">
<p style="display: block; margin: 0; padding: 0; color: #ffffff; font-style: normal;font-weight: normal;text-align: center;">Copy & share your link:<a href="{{ subscriber.grsf_share_url }}" style="color: #ffffff;">{{ subscriber.grsf_share_url }}</a></p>
</td>
</tr>
<tr>
<td style="font-size: 16px; padding-top: 20px;" align="center">
<p style="color: #ffffff;">Or spread the word on social media:</p>
</td>
</tr>
<tr>
<td style="font-size: 16px; padding-top: 20px; padding-bottom: 40px;" align="center">
<a href="https://twitter.com/intent/tweet?url={{ subscriber.grsf_share_url }}&text=Hey!%20Do%20you%20love%20wine?%20So%20do%20I.%20)." style="display: inline-block; background: #55acee; color: #ffffff; padding: 12px; text-decoration: none; border-radius: 4px">
<img style="max-width: 20px; width: 20px;" src="https://growsurf-blog.s3.us-west-2.amazonaws.com/social/twitter/white.png" alt="Twitter">
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ subscriber.grsf_share_url }}" style="display: inline-block; background: #3b5999; color: #ffffff; padding: 12px; text-decoration: none; border-radius: 4px;">
<img style="max-width: 20px; width: 20px;" src="https://growsurf-blog.s3.us-west-2.amazonaws.com/social/facebook/white.png" alt="Facebook">
</a>
<a href="mailto:?body={{ subscriber.grsf_share_url }}%0AHey!%20Do%20you%20love%20wine?%20So%20do%20I." style="display: inline-block; background: #3b3b3b; color: #ffffff; padding: 12px; text-decoration: none; border-radius: 4px;">
<img style="max-width: 20px; width: 20px;" src="https://growsurf-blog.s3.us-west-2.amazonaws.com/social/email/white.png" alt="Email">
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ subscriber.grsf_share_url }}" style="display: inline-block; background: #0077B5; color: #ffffff; padding: 12px; text-decoration: none; border-radius: 4px;">
<img style="max-width: 20px; width: 20px;" src="https://growsurf-blog.s3.us-west-2.amazonaws.com/social/linkedin/white.png" alt="LinkedIn">
</a>
<a href="https://wa.me?text={{ subscriber.grsf_share_url }}" style="display: inline-block; background: #25D366; color: #ffffff; padding: 12px; text-decoration: none; border-radius: 4px;">
<img style="max-width: 20px; width: 20px;" src="https://growsurf-blog.s3.us-west-2.amazonaws.com/social/whatsapp/white.png" alt="WhatsApp">
</a>
</td>
</tr>
</table>
- 1.At line 5, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/welcome.png
with your own image. - 2.At lines 7 and 12, replace
Sips
with your own brand name. - 3.At line 27, replace the text
Hey!%20Do%20you%20love%20wine?%20So%20do%20I.
with your own.- 1.
- 4.At line 33, replace the text
{{ subscriber.grsf_share_url }}%0AHey!%20Do%20you%20love%20wine?%20So%20do%20I.
with your own- 1.
- 2.Make sure to include
{{ subscriber.grsf_share_url }}
only to the encoded message
Display a static image in your email.

<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={{ subscriber.email }}&grsf_first_name={{ subscriber.first_name }}&grsf_last_name={{ subscriber.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>
- 1.At line 4, replace all instances of
PrismJar
with your own brand name. - 2.At line 8, replace
#1673df
with your own brand color. - 3.At line 8, replace
YOUR_CAMPAIGN_ID
with your GrowSurf campaign ID (e.g,p9josq
)- 1.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
).
- 4.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.
Display static images in your email.

<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;