Tutorials
We'll walk you through adding personalized referral program messaging to your Intercom emails.
When you connect your GrowSurf campaign to Intercom, you can easily embed a referral program into your Intercom 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 Intercom 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="{{ custom_data.growsurf_share_url }}" style="color: #1673df; text-decoration: none;">{{ custom_data.growsurf_share_url }}</a>
</p>
<div>
<a href="mailto:?body={{ custom_data.growsurf_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={{ custom_data.growsurf_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={{ custom_data.growsurf_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>Customize the contents
At line 4, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-steps-2.pngwith your own image.At line 11 replace
PrismJarwith your own brand name.At line 12, replace
#1673dfwith your own brand color.At line 15, replace the text
{{ custom_data.growsurf_share_url }}%0AJoin%20PrismJar%20and%20we%20both%20get%20$10%20with your own.Make sure to encode the message using a tool like https://www.url-encode-decode.com
Make sure to include
{{ custom_data.growsurf_share_url }}only to the encoded message
At line 17, replace the text
Join%20PrismJar%20and%20we%20both%20get%20$5%20with your ownMake sure to encode the message using a tool like https://www.url-encode-decode.com
Example 2
Display a static image in your email.
What it looks like
Copy/paste this HTML code into your Intercom 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={{ contact.email }}&grsf_first_name={{ contact.firstname }}&grsf_last_name={{ contact.lastname }}" 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>Customize the contents
At line 4, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/Gift0002.pngwith your own image.At line 15, replace
#e87b3cwith your own brand color.At line 15, replace
YOUR_CAMPAIGN_IDwith 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_IDinstead 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 Intercom 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={{ contact.email }}&grsf_first_name={{ contact.firstname }}&grsf_last_name={{ contact.lastname }}" 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={{ contact.email }}&grsf_first_name={{ contact.firstname }}&grsf_last_name={{ contact.lastname }}" 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>Customize the contents
At line 5, replace all instances of
Cointechwith your own brand name.At lines 6, 21, 30, 39, and 47, replace
#4f46e5with your own brand color.At lines 6 and 47, replace
YOUR_CAMPAIGN_IDwith 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_IDinstead 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 Intercom 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={{ contact.email }}&grsf_first_name={{ contact.firstname }}&grsf_last_name={{ contact.lastname }}" 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>Customize the contents
At line 5, replace
LearnEdwith your own brand name.At line 10, replace
https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/507b3cec-5435-499f-96d7-46c5a4d6d79f.svgwith your own image.At line 19, replace
YOUR_CAMPAIGN_IDwith 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_IDinstead with your Referral Portal URL (e.g,https://refer.yourwebsite.com).
At line 19, replace
#ee1152with your own brand color.
Example 5
Display a static image in your email.
What it looks like
Copy/paste this HTML code into your Intercom 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="{{ custom_data.growsurf_share_url }}" style="color: #4f46e5; text-decoration: none;">{{ custom_data.growsurf_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={{ contact.email }}&grsf_first_name={{ contact.firstname }}&grsf_last_name={{ contact.lastname }}" 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>Customize the contents
At line 5, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/people.pngwith your own image.At line 19, replace
#094a83with your own brand color.At line 19, replace
YOUR_CAMPAIGN_IDwith 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_IDinstead 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 Intercom 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="{{ custom_data.growsurf_share_url }}" style="color: #ffffff;">{{ custom_data.growsurf_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={{ custom_data.growsurf_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={{ custom_data.growsurf_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={{ custom_data.growsurf_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={{ custom_data.growsurf_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={{ custom_data.growsurf_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>Customize the contents
At line 5, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/email-examples/welcome.pngwith your own image.At lines 7 and 12, replace
Sipswith your own brand name.At line 27, replace the text
Hey!%20Do%20you%20love%20wine?%20So%20do%20I.with your own.Make sure to encode the message using a tool like https://www.url-encode-decode.com
At line 33, replace the text
{{ custom_data.growsurf_share_url }}%0AHey!%20Do%20you%20love%20wine?%20So%20do%20I.with your ownMake sure to encode the message using a tool like https://www.url-encode-decode.com
Make sure to include
{{ custom_data.growsurf_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 Intercom 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={{ contact.email }}&grsf_first_name={{ contact.firstname }}&grsf_last_name={{ contact.lastname }}" 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>Customize the contents
At line 4, replace all instances of
PrismJarwith your own brand name.At line 8, replace
#1673dfwith your own brand color.At line 8, replace
YOUR_CAMPAIGN_IDwith 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_IDinstead 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.pngwith your own image.
Example 8
Display static images in your email.
What it looks like
Copy/paste this HTML code into your Intercom 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; 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={{ contact.email }}&grsf_first_name={{ contact.firstname }}&grsf_last_name={{ contact.lastname }}" 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={{ contact.email }}&grsf_first_name={{ contact.firstname }}&grsf_last_name={{ contact.lastname }}" 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>Customize the contents
At lines 5 and 24, replace all instances of
Cointechwith your own brand name.At lines 6 and 42, replace
YOUR_CAMPAIGN_IDwith 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_IDinstead with your Referral Portal URL (e.g,https://refer.yourwebsite.com).
At lines 6 and 42, replace
#4f46e5with your own brand color.At line 22, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-steps-1.pngwith your own image.At line 27, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-profiles-4.pngwith your own image.At line 32, replace
https://growsurf-blog.s3.us-west-2.amazonaws.com/illustrations/GrowSurf-steps-2.pngwith your own image.
Example 9
Display a static image in your email.
What it looks like
Copy/paste this HTML code into your Intercom 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 }}&grsf_first_name={{ first_name }}&grsf_last_name={{ 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="{{ custom_data.growsurf_share_url }}" style="color: #8E4CED;">{{ custom_data.growsurf_share_url }}</a>
</td>
</tr>
<tr>
<td align="center">
You currently have {{ custom_data.growsurf_total_referral_count' }} referrals. <a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ email }}&grsf_first_name={{ first_name }}&grsf_last_name={{ last_name }}" style="color: #8E4CED;">Check your status here</a>. {{ custom_data.growsurf_next_milestone' }}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>Customize the contents
At line 20, replace all instances of
Evening Stewwith your own brand name.At lines 25, 30, and 35, replace
#8E4CEDwith your own brand color.At line 25 and 35, replace
YOUR_CAMPAIGN_IDwith 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_IDinstead with your Referral Portal URL (e.g,https://refer.yourwebsite.com).
At line 15, replace
https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/rewards-inline.pngwith your own image.At line 35, because
{{ custom_data.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 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 Intercom 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">
{{ custom_data.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 style="text-align: center; margin-bottom: 5px; padding: 0">
<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%">
Your unique link:
</td>
</tr>
<tr>
<td>
<a href="{{ custom_data.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">{{ custom_data.growsurf_share_url' }}</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ email }}&grsf_first_name={{ first_name }}&grsf_last_name={{ 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">View your referral progress</a>
</td>
</tr>
<tr>
<td align="center">
<i>{{ custom_data.growsurf_next_milestone }}</i>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>Customize the contents
At lines 9, 41, and 46, replace
#8E4CEDwith your own brand color.At line 46, replace
YOUR_CAMPAIGN_IDwith 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_IDinstead with your Referral Portal URL (e.g,https://refer.yourwebsite.com).
At line 35, replace
https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/0-won.pngwith your own image based on{{ custom_data.growsurf_total_referral_count }}. In this example, you would display any one of these five images at a given time:*If
{{ custom_data.growsurf_total_referral_count }}<3, then display this image.If
{{ custom_data.growsurf_total_referral_count }}>=3 and <5, then display this image.If
{{ custom_data.growsurf_total_referral_count }}>=5 and <10, then display this image.If
{{ custom_data.growsurf_total_referral_count }}>=10 and <20, then display this image.If
{{ custom_data.growsurf_total_referral_count }}>=20, then display this image.
At line 51, because
{{ custom_data.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 11
Display a GIF image with rotating rewards in your email.
What it looks like
Copy/paste this HTML code into your Intercom 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="{{ custom_data.growsurf_share_url }}" style="color: #8E4CED;">{{ contact.growsurf_share_url }}</a> or <a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email={{ email }}&grsf_first_name={{ first_name }}&grsf_last_name={{ last_name }}" style="color: #8E4CED;">click here</a> to see your progress towards rewards.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>Customize the contents
At lines 10 and 21, replace
Evening Stewwith your own brand name.At line 21, replace all instances of
#8E4CEDwith your own brand color.At line 21, replace
YOUR_CAMPAIGN_IDwith 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_IDinstead with your Referral Portal URL (e.g,https://refer.yourwebsite.com).
At line 15, replace
https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/rewards-inline.pngwith your own GIF image (you can use a tool like https://ezgif.com/maker).
Example 12
Display a static image in your email.
What it looks like
Copy/paste this HTML code into your Intercom 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="{{ custom_data.growsurf_share_url }}" style="color: #F46A54;">{{ custom_data.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 }}&grsf_first_name={{ first_name }}&grsf_last_name={{ last_name }}" 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
At lines 10 and 15, replace
Hustowith your own brand name.At lines 20 and 30, replace
#F46A54with your own brand color.At line 30, replace
YOUR_CAMPAIGN_IDwith 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_IDinstead with your Referral Portal URL (e.g,https://refer.yourwebsite.com).
At line 25, replace
https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/rewards-inline.pngwith your own image.
Example 13
Display a static image with text next to it.
What it looks like
Copy/paste this HTML code into your Intercom 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="{{ custom_data.growsurf_share_url }}" style="color: #F46A54;">{{ custom_data.growsurf_share_url }}</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>Customize the contents
At line 7, replace
https://growsurf-blog.s3-us-west-2.amazonaws.com/husto/reward.pngwith your own image.At line 8, replace the entire
https://husto.com?grsf=abc123instead with your Referral Portal URL (e.g,https://refer.yourwebsite.com).At line 8, replace
#F46A54with your own brand color.
Last updated
Was this helpful?