Integration Guide

How to Design Referral Email Templates in SendGrid for GrowSurf

Name: GrowSurf
Rating: 4.74 (47 reviews)
Author: GrowSurf

Create professional, reusable SendGrid email templates for every stage of your GrowSurf referral program.

Great referral emails drive sharing, build excitement, and deliver clear calls-to-action. SendGrid's dynamic template system lets you design beautiful, reusable email templates that automatically populate with GrowSurf referral data — participant names, referral links, reward details, and leaderboard stats. Well-designed templates save development time and ensure brand consistency.

This guide covers designing SendGrid dynamic templates for each referral email type, implementing Handlebars personalization, creating responsive designs that work on all devices, and organizing templates for easy maintenance as your referral program evolves.

Integration Steps

Step 1: Plan Your Referral Email Template Library

Define the templates you need and the data each one requires.

Template library for a complete referral program:
- "Welcome to the Program" — triggered on participant creation
- "Your Friend Just Signed Up" — triggered on referral event
- "Congratulations, You Earned a Reward" — triggered on reward achievement
- "Your Referral Converted" — triggered on conversion
- "Monthly Referral Summary" — scheduled monthly digest
For each template, list required dynamic variables and their sources

Step 2: Create a Base Template Design

Build a base template in SendGrid's Design Editor that establishes brand consistency.

Go to Email API > Dynamic Templates > Create a Dynamic Template
Start with the Design Editor for visual drag-and-drop building
Establish your base layout: header with logo, content area, footer with links
Use your brand colors, fonts, and imagery consistently
Keep the design clean and mobile-responsive (60%+ of emails are read on mobile)

Step 3: Implement Handlebars Personalization

Use SendGrid's Handlebars syntax to insert dynamic referral data into your templates.

Basic variables: {{firstName}}, {{referralLink}}, {{referralCode}}
Conditionals: {{#if referralCount}}You've referred {{referralCount}} friends!{{else}}Start sharing to earn rewards!{{/if}}
Helpers: {{#greaterThan referralCount 5}}You're a power referrer!{{/greaterThan}}
Test personalization in SendGrid's template preview with sample data

Step 4: Design the Welcome Email Template

Create the most important template — the one that makes first impressions on new participants.

Subject: "Welcome, {{firstName}}! Your referral link is ready"
Hero section: clear value proposition ("Give $10, Get $10")
Body: how it works in 3 simple steps (with icons or illustrations)
CTA button: "Start Sharing" linked to {{referralLink}}
Secondary: display the referral code for easy copying: {{referralCode}}
Footer: FAQ links and support contact

Step 5: Design Notification and Celebration Templates

Create templates for ongoing referral events that keep participants engaged.

Referral notification: celebratory design, show friend's name, display updated count and progress bar
Reward earned: prominent reward details, redemption instructions, CTA to keep sharing
Milestone templates: use special visual treatment (badges, confetti imagery) for 5th, 10th referral
Include the referral link in every template — every email is a sharing opportunity

Step 6: Test and Optimize Templates

Ensure templates render correctly across email clients and are optimized for engagement.

Use SendGrid's built-in preview to test with different data sets
Test on major email clients: Gmail, Outlook, Apple Mail, Yahoo
Check mobile rendering on iOS Mail and Gmail mobile
Optimize: keep emails under 100KB, use web-safe fonts, include alt text for images
Create a test version of your webhook handler that sends to your team for review

Code Snippets

<!-- SendGrid Dynamic Template: Referral Welcome Email -->
<!-- Template ID: d-welcome123 -->

<!-- Subject: Welcome, {{firstName}}! Your referral link is ready -->

<div style="max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif;">

  <!-- Header -->
  <div style="background: #4A90D9; padding: 30px; text-align: center;">
    <h1 style="color: white; margin: 0;">Welcome to Our Referral Program!</h1>
  </div>

  <!-- Body -->
  <div style="padding: 30px;">
    <p>Hey {{firstName}},</p>
    <p>Thanks for joining! Share your unique referral link with friends and you'll both earn <strong>{{rewardDescription}}</strong>.</p>

    <!-- How it works -->
    <h2 style="color: #333;">How It Works</h2>
    <ol>
      <li><strong>Share</strong> your unique link with friends</li>
      <li><strong>Friends sign up</strong> using your link</li>
      <li><strong>You both earn</strong> {{rewardDescription}}</li>
    </ol>

    <!-- CTA Button -->
    <div style="text-align: center; margin: 30px 0;">
      <a href="{{referralLink}}"
         style="background: #4A90D9; color: white; padding: 15px 40px;
                text-decoration: none; border-radius: 5px; font-size: 18px;">
        Start Sharing Now
      </a>
    </div>

    <!-- Copyable referral link -->
    <div style="background: #f5f5f5; padding: 15px; border-radius: 5px; text-align: center;">
      <p style="margin: 0 0 5px;">Your referral link:</p>
      <code style="font-size: 14px; word-break: break-all;">{{referralLink}}</code>
    </div>

    {{#if referralCount}}
    <!-- Show stats for returning participants -->
    <div style="margin-top: 20px; text-align: center;">
      <p>Referrals so far: <strong>{{referralCount}}</strong></p>
    </div>
    {{/if}}
  </div>

  <!-- Footer -->
  <div style="background: #f9f9f9; padding: 20px; text-align: center; font-size: 12px; color: #666;">
    <p>Questions? <a href="https://yourcompany.com/support">Contact Support</a></p>
  </div>
</div>

Tips

Keep the Referral Link Above the Fold

The referral link CTA button should be visible without scrolling on both desktop and mobile. If a participant opens the email and can immediately see and click the share button, your click-through rates will be significantly higher than if they need to scroll to find it.

Design for Dark Mode Compatibility

Many email clients now support dark mode, which can invert your carefully designed colors. Test your templates in dark mode on Gmail, Apple Mail, and Outlook. Use transparent images, avoid white backgrounds for logos, and test color contrast in both light and dark modes.

Include a Text Version of the Referral Link

Some email clients block images and styled elements. Always include a plain-text version of the referral link below the styled button so participants can still access it even if the email renders poorly. Use a monospace font and a light background to make it stand out.

FAQ

Can I use SendGrid's Design Editor or do I need to code HTML templates?

You can use either. The Design Editor is great for quick, drag-and-drop template creation. For advanced personalization and precise design control, use the Code Editor. Many teams design the base layout in the Design Editor and switch to Code Editor for adding Handlebars logic and fine-tuning responsive behavior.

How do I version control my SendGrid templates?

SendGrid supports multiple versions per template. Create a new version when making changes (Version 2, Version 3, etc.) and set the active version. This gives you rollback capability. For source control, store template HTML in your Git repository and deploy updates via SendGrid's Templates API.

What's the maximum number of dynamic variables I can use in a template?

SendGrid doesn't enforce a strict limit on dynamic variables, but the total dynamic_template_data payload should stay under 30KB. For referral emails, you'll typically use 5-15 variables — well within limits. If you need to include large datasets (like a leaderboard table), pass only the top 10 entries.

GrowSurf for Startups Program

Startups get a 50% discount

GrowSurf Deals

Get $234k+ In Software Savings

LoyaltySurf

Reward Your Customers For Their Loyalty

Startup Growth Tactics Quiz

How to Design Referral Email Templates in SendGrid for GrowSurf

Integration Steps

Step 1: Plan Your Referral Email Template Library

Step 2: Create a Base Template Design

Step 3: Implement Handlebars Personalization

Step 4: Design the Welcome Email Template

Step 5: Design Notification and Celebration Templates

Step 6: Test and Optimize Templates

Code Snippets

Tips

Keep the Referral Link Above the Fold

Design for Dark Mode Compatibility

Include a Text Version of the Referral Link

FAQ

Can I use SendGrid's Design Editor or do I need to code HTML templates?

How do I version control my SendGrid templates?

What's the maximum number of dynamic variables I can use in a template?

Unlock the power of word-of-mouth marketing anddeepen your bond with customers

Set up your refer a friend program with customer referral and affiliate program software that lowers your acquisition costs, increases customer loyalty, and saves you gobs of time.

Built for startups,scaled for unicorns

View GrowSurfCustomer Examples

Unlock the power of word-of-mouth marketing and
deepen your bond with customers

Built for startups,
scaled for unicorns

View GrowSurf
Customer Examples