How to Integrate SendGrid with Bubble (Complete Guide)

Beginner Plugins How to’s

26th of September, 2025

Integrating SendGrid with your Bubble application enables you to send automated emails dynamically without complex coding. This integration is essential for apps requiring email notifications, user communication, or audience engagement features.

In this comprehensive guide, you’ll learn how to set up SendGrid, authenticate your domain, configure API keys, and create Bubble workflows to send professional emails directly from your application with reliable deliverability.

 

Throughout this guide you’ll learn how to:

1 – Initial Account Setup

2 – Verify Your Sender Identity

3 – Authenticate Your Domain

4 – Create an API Key for Bubble Integration

5 – Install the SendGrid Plugin in Bubble

6 – Create a Dynamic Email Template in SendGrid

7 – Create the Bubble Workflow

8 – Test Your Integration

Conclusion

1 – Initial Account Setup

Before building email templates or workflows, you need to complete three essential setup steps in SendGrid: verify your sender identity, authenticate your domain through DNS settings, and create an API key to connect SendGrid with Bubble.

Prerequisites

You’ll need the following items set up before starting this integration:

  • A custom domain (purchased through any domain provider like GoDaddy, VentraIP, or similar services)
  • An email address using your custom domain(we’ll use Gmail for this example)
  • A Twilio SendGrid account (which is free to create at their official website)

2 – Verify Your Sender Identity

SendGrid requires sender verification to comply with anti-spam laws and ensure email deliverability.

Create Your Sender Identity

Navigate to the Settings section in your SendGrid dashboard and locate the sender authentication area. You can also access this through the welcome section on your dashboard.

  1. Click Create Sender Identity to open the sender authentication screen
  2. Fill in your sender information:
    • From name: Your app or business name (e.g., “Headphone Zone”)
    • From Email address: The email address you want to send from (e.g., hello@headphonezone.com)
    • Reply to email: Typically the same as your From Email Address
    • Complete the required address details for anti-spam compliance
  3. Click Create to generate your sender identity

Verify Your Email Address

After creating your sender identity, SendGrid will send a verification email to your specified address.

  1. Check your email inbox for the SendGrid verification message
  2. Click Verify in the email
  3. Return to SendGrid to confirm the verification was successful

You should see “Verified: Yes” status in your sender authentication section.

3 – Authenticate Your Domain

Domain authentication prevents emails from appearing as sent “on behalf of” SendGrid or Twilio, ensuring they appear to come directly from your verified domain.

Configure DNS Settings

Without domain authentication, recipients would see emails from your address but with a note indicating they’re sent through SendGrid’s domain. Domain authentication eliminates this issue.

  1. In the Sender Authentication section, click Get Started for domain authentication
  2. Select your domain provider (or choose “Other” if not listed)
  3. Choose Yes to brand links with your domain, then click Next
  4. Enter your domain name (e.g., headphonezone.com) in the From Domain field
  5. Click Next to generate DNS records

Add DNS Records to Your Domain Provider

SendGrid will provide specific DNS records that you must add to your domain’s DNS settings:

  1. Copy each CNAME record’s host and value
  2. Navigate to your domain provider’s DNS management section
  3. Add all provided CNAME records exactly as specified
  4. Add the TXT record with its corresponding value
  5. Save all DNS changes

Note: DNS changes can take several minutes to propagate.

Return to SendGrid and click Verify to confirm your DNS records are properly configured. You should receive a success message indicating your domain has been authenticated.

4 – Create an API Key for Bubble Integration

API keys provide secure authentication between SendGrid and your Bubble application, ensuring only authorized requests can send emails through your account.

Generate Your API Key

  1. Navigate to the API Keys section in SendGrid
  2. Click Create API Key
  3. Select Full Access permissions
  4. Name your API key (e.g., “Headphone Zone Email”)
  5. Click Create and View

Important: Copy the API key immediately as it will only be displayed once. Store it securely as you’ll need it for the Bubble integration.

5 – Install the SendGrid Plugin in Bubble

Add the Plugin

  1. Open your Bubble application editor
  2. Navigate to the Plugins tab
  3. Click Add plugins and search for “SendGrid”
  4. Install the SendGrid plugin by CoPilot (a trusted provider with pre-built functionality)

Configure API Authentication

  1. Scroll to the API Key section in the plugin settings
  2. Paste your SendGrid API key in both the Development and Live fields
  3. The Development field allows testing in your development environment
  4. Save the plugin configuration

The plugin automatically provides workflow actions, including the essential Send Grid – Send email action for your workflows.

Subscribe to Building with Bubble Newsletter

6 – Create a Dynamic Email Template in SendGrid

Dynamic templates allow you to send personalized emails using data from your Bubble application through substitution tags.

Build Your Template

  1. Navigate to Email API > Dynamic Templates in SendGrid
  2. Click Create a Dynamic Template and name it (e.g., “Headphone Zone Email”)
  3. Click Add Version to create your first template version
  4. Choose Blank Template and select the Design Editor

Design Your Email Layout

SendGrid’s drag-and-drop editor makes template creation straightforward:

  1. Add branding: In the Build panel, drag an Image element to the top of your template and upload your logo or header image
  2. Create content structure: Add a Text element for your email body
  3. Write a sample base message (e.g., “You’ve received a new submission. Check it out below.”)

Implement Substitution Tags

Substitution tags allow dynamic content insertion from your Bubble workflows. Create tags using curly brackets with unique identifiers:

  1. Name tag: Add {name} where you want the sender’s name to appear
  2. Email tag: Add {email} for the reply-to email address
  3. Message tag: Add {message} for the email body content
  4. Subject tag: Add {subject-line} in both the subject line and preheader fields

Technical note: Use two curly brackets {{tag}} for plain text substitution, or three curly brackets {{{tag}}} for HTML/rich text content that preserves formatting.

Configure Subject Line and Preheader

  • Subject line: Use {subject-line} to make it dynamic
  • Preheader: Use {message} or another relevant substitution tag

The preheader appears as gray preview text in email inboxes.

Set Up Unsubscribe Compliance

To comply with anti-spam regulations:

  1. Navigate to Suppressions > Global Unsubscribes
  2. Create an unsubscribe group (e.g., “Unsubscription”)
  3. Note the Group ID number for use in your Bubble workflow
  4. This ensures proper unsubscribe handling for email compliance

Save your completed template and copy the Template ID for use in Bubble.

7 – Create the Bubble Workflow

Set Up the Workflow Trigger

  1. Navigate to your contact form or email trigger element in Bubble
  2. Add a new workflow triggered by your Send Email button click
  3. Add the Send Grid – Send email action from your installed plugin

Configure Email Parameters

Fill in the workflow action fields with both static and dynamic data:

Basic Settings:

  • Template ID: Paste your SendGrid template ID
  • Subject: Use dynamic data like “Current page’s Product’s name” followed by “Inquiry”
  • From name: Your business name (e.g., “Headphone Zone”)
  • From email: Your verified sender email (e.g., hello@headphonezone.com)

Recipient Settings:

  • To email: Dynamic data pointing to the recipient (e.g., “Current page’s Product’s sold by email”)
  • Reply to email: Dynamic data from your form’s email input field
  • Blind copy: Optionally add your own email to receive copies

Configure Substitution Tags

Map your form data to SendGrid substitution tags using key-value pairs:

  1. name: Map to your form’s name input field value
  2. email: Map to your form’s email input field value
  3. message: Map to your form’s message/textarea input field value
  4. subject-line: Map to your dynamic subject line content

Important: Ensure substitution tag names exactly match those used in your SendGrid template.

Add Unsubscribe Group (Optional)

If you created an unsubscribe group in SendGrid, add the Group ID to the Unsubscribe Group field in your workflow action.

8 – Test Your Integration

Create Test Data

  1. Set up a test user with an email address you control
  2. Create a test product or listing to generate email content
  3. Use your contact form to send a test email

Verify Email Delivery

  1. Complete your contact form with test information
  2. Submit the form to trigger the workflow
  3. Check the recipient email inbox for the properly formatted message
  4. Verify that all substitution tags populated correctly with your test data

Validate Email Formatting

Confirm your test email includes:

  • Proper branding header
  • Dynamic content in all substitution tag locations
  • Correct sender information
  • Working reply-to functionality
  • Professional appearance matching your template design

Conclusion

You now have a fully functional SendGrid and Bubble integration that enables dynamic email sending from your application. This setup provides reliable email deliverability without requiring complex coding, using only API configurations and workflow actions.

If you want to learn more about using third-party APIs with Bubble, don’t miss out on our guide on how to integrate Stripe payments with your Bubble application.

Get the Bubble Crash Course for FREE

Related blog posts

How To Build A Referral Program In Bubble.io (2025 Complete Guide)

In this guide, you'll learn how to add a feature in your Bubble app to generate unique referral links for users. This feature ensures that when new users sign up using those links, the referral is correctly attributed to the referring user.

How to Use Backend Workflows in Bubble.io (Complete Guide)

In this guide, learn the basics of backend workflow, how they can help handle non-critical tasks as a result of specific user actions. We'll show you how to create a backend workflow using a user signup process as an example.

How to Create a Pinterest-Style Repeating Group in Bubble.io

Learn how to create a masonry grid repeating group in Bubble that will display images in a Pinterest-style Layout where items overlap and intertwine naturally based on their content height.

How To Reveal A Password Inside An Input Field (Complete Bubble.io Guide)

This guide will walk you through implementing a show/hide password toggle feature in Bubble, including the necessary design elements, plugin setup, and workflows.

This website uses cookies. Click to read more below. Read more.