Tutorials

We'll walk you through adding personalized referral program messaging to your Mailjet emails.
When you connect your GrowSurf campaign to Mailjet, you can easily embed a referral program into your Mailjet 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 Mailjet 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="[[data:grsf_share_url]]" style="color: #8E4CED;">[[data:grsf_share_url]]</a>
                </td>
              </tr>
              <tr>
                <td align="center">
                  You currently have [[data:grsf_total_referral_count]] referrals. <a href="https://grow.surf/YOUR_CAMPAIGN_ID?grsf_email=[[email]]" style="color: #8E4CED;">Check your status here</a>. [[data:grsf_next_milestone]]
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
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 landing page, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your landing page URL (e.g, https://refer.yourwebsite.com).
At line 15, replace https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/rewards-inline.png with your own image.
At line 35, because [[data: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 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 Mailjet 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">
                  [[data:grsf_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="[[data:grsf_share_url]]" style="display: block; background: #FAFAFA; color: #8E4CED; text-decoration: none; text-align: center; padding: 20px; font-size: 1.25em; font-weight: bold">[[data:grsf_share_url]]</a>
                </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>[[data:grsf_next_milestone]]</i>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
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 landing page, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your landing page URL (e.g, https://refer.yourwebsite.com).
At line 35, replace https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/0-won.png with your own image based on[[data:grsf_total_referral_count]]. In this example, you would display any one of these five images at a given time:
If [[data:grsf_total_referral_count]] <3, then display this image.
If [[data:grsf_total_referral_count]] >=3 and <5, then display this image.
If [[data:grsf_total_referral_count]] >=5 and <10, then display this image.
If [[data:grsf_total_referral_count]] >=10 and <20, then display this image.
If [[data:grsf_total_referral_count]] >=20, then display this image.
At line 51, because [[data: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 3
Display a GIF image with rotating rewards in your email.
What it looks like
Copy/paste this HTML code into your Mailjet 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="[[data:grsf_share_url]]" style="color: #8E4CED;">[[data:grsf_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
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 landing page, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your landing page URL (e.g, https://refer.yourwebsite.com).
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 Mailjet 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="[[data:grsf_share_url]]" style="color: #F46A54;">[[data:grsf_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
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 GrowSurf landing page, replace the entire https://grow.surf/YOUR_CAMPAIGN_ID instead with your landing page URL (e.g, https://refer.yourwebsite.com).
At line 25, replace https://growsurf-blog.s3-us-west-2.amazonaws.com/eveningstew/rewards-inline.png with your own image.
Example 5
Display a static image with text next to it.
What it looks like
Copy/paste this HTML code into your Mailjet 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="[[data:grsf_share_url]]" style="color: #F46A54;">[[data:grsf_share_url]]</a></p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Customize the contents
At line 7, replacehttps://growsurf-blog.s3-us-west-2.amazonaws.com/husto/reward.pngwith your own image.
At line 8, replace the entire https://husto.com?grsf=abc123 instead with your landing page URL (e.g, https://refer.yourwebsite.com).
At line 8, replace #F46A54 with your own brand color.
⚙️ Additional Integrations - Previous
Mailjet
Next - ⚙️ Additional Integrations
SendGrid
Last updated 2 months ago