> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.

# SendGrid

> Connect SendGrid to your Rocket.new app - send transactional emails, run campaigns, and manage subscribers.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

Connect SendGrid and describe the email flow you want in chat. Rocket generates the complete sending logic: templates, API calls, event tracking, and delivery management.

<Note>
  SendGrid excels at high-volume sending and marketing campaigns. For simpler developer-focused transactional email, [Resend](/build/connectors/resend) may be a lighter option.
</Note>

<Divider />

## What you can do

<CardGroup cols={2}>
  <Card title="Transactional emails" icon="envelope">
    Password resets, order confirmations, invoices, and account verification emails triggered by user actions.
  </Card>

  <Card title="Marketing campaigns" icon="bullhorn">
    Promotional emails, product announcements, and seasonal campaigns to segmented audiences.
  </Card>

  <Card title="Dynamic email templates" icon="file-code">
    Reusable templates with personalized fields like names, order numbers, and custom data.
  </Card>

  <Card title="Analytics and delivery tracking" icon="chart-bar">
    Track open rates, click rates, bounces, and delivery status for every email you send.
  </Card>

  <Card title="Newsletter signup and delivery" icon="newspaper">
    Collect subscriber emails and send regular newsletters with rich content.
  </Card>
</CardGroup>

<Divider />

## Before you connect

You need your **API key** from the SendGrid Dashboard.

<Card icon="link" horizontal href="https://www.twilio.com/docs/sendgrid/ui/account-and-settings/api-keys#creating-an-api-key" arrow="true">
  **Create or copy your SendGrid API key**
</Card>

<Warning>
  Never paste your SendGrid API key directly into chat. Always use the secure connection popup. If your key has been exposed, revoke it from SendGrid Settings and create a new one.
</Warning>

<Note>
  SendGrid requires domain authentication or single-sender verification before you can send emails. Complete this in **SendGrid Settings > Sender Authentication** before connecting.
</Note>

<Divider />

## Connect SendGrid

<Tabs>
  <Tab title="Web Browser">
    You can connect from two places - both open the same popup.

    **Option 1: From chat**

    Type a prompt that mentions SendGrid - for example, `Connect SendGrid and send an order confirmation email when a user completes checkout`. Rocket detects the intent and shows a **Connect** button inline. Click it and the popup opens.

    <Frame caption="SendGrid connection prompt in chat">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/QfIb8xISg8b4eaJx/images/build-docs/connectors/sendgrid/web-browser/sendgrid-chat-light.webp?fit=max&auto=format&n=QfIb8xISg8b4eaJx&q=85&s=72b8e4440c66e888b4935a99ec9e6754" alt="SendGrid connection prompt in the Rocket chat panel." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/connectors/sendgrid/web-browser/sendgrid-chat-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/QfIb8xISg8b4eaJx/images/build-docs/connectors/sendgrid/web-browser/sendgrid-chat-dark.webp?fit=max&auto=format&n=QfIb8xISg8b4eaJx&q=85&s=86e1aa95f5670a60da4156a0b47e9276" alt="SendGrid connection prompt in the Rocket chat panel." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/connectors/sendgrid/web-browser/sendgrid-chat-dark.webp" />
    </Frame>

    **Option 2: From the Connectors tab**

    Click the **`...`** button in the preview toolbar, then select **Connectors**.

    <Frame caption="Open Connectors from the toolbar">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/2lqYWidv_xVHKfL6/images/build-docs/connectors/shared/connectors-tab-open-light.webp?fit=max&auto=format&n=2lqYWidv_xVHKfL6&q=85&s=7bd785a0e878564054e08328b2aa3d6b" alt="Toolbar dropdown with Connectors option highlighted." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/connectors/shared/connectors-tab-open-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/2lqYWidv_xVHKfL6/images/build-docs/connectors/shared/connectors-tab-open-dark.webp?fit=max&auto=format&n=2lqYWidv_xVHKfL6&q=85&s=d047040372d776cb47e4e483de8eeb8d" alt="Toolbar dropdown with Connectors option highlighted." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/connectors/shared/connectors-tab-open-dark.webp" />
    </Frame>

    Click the **SendGrid** card, then click **Connect**.

    <Frame caption="SendGrid card in the Connectors panel">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/QfIb8xISg8b4eaJx/images/build-docs/connectors/sendgrid/web-browser/sendgrid-connectors-tab-light.webp?fit=max&auto=format&n=QfIb8xISg8b4eaJx&q=85&s=aef7a5c396226c353850b6abefe825fb" alt="Connectors panel showing the SendGrid card with a Connect button." className="theme-image light-image" width="1814" height="528" data-path="images/build-docs/connectors/sendgrid/web-browser/sendgrid-connectors-tab-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/QfIb8xISg8b4eaJx/images/build-docs/connectors/sendgrid/web-browser/sendgrid-connectors-tab-dark.webp?fit=max&auto=format&n=QfIb8xISg8b4eaJx&q=85&s=7905f33fc85ccb5766394595c3c67f9e" alt="Connectors panel showing the SendGrid card with a Connect button." className="theme-image dark-image" width="1820" height="526" data-path="images/build-docs/connectors/sendgrid/web-browser/sendgrid-connectors-tab-dark.webp" />
    </Frame>

    **After clicking Connect**

    A popup opens. Paste your **API key**, then click **Save**. A green dot appears next to SendGrid when the connection is active.

    <Frame caption="Paste your SendGrid API key in the popup">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/QfIb8xISg8b4eaJx/images/build-docs/connectors/sendgrid/web-browser/sendgrid-popup-light.webp?fit=max&auto=format&n=QfIb8xISg8b4eaJx&q=85&s=48c7763ce2648f0b867e350ef6304f12" alt="SendGrid API key input popup." className="theme-image light-image" width="840" height="510" data-path="images/build-docs/connectors/sendgrid/web-browser/sendgrid-popup-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/QfIb8xISg8b4eaJx/images/build-docs/connectors/sendgrid/web-browser/sendgrid-popup-dark.webp?fit=max&auto=format&n=QfIb8xISg8b4eaJx&q=85&s=7a67723272118b09faad5fef578af35b" alt="SendGrid API key input popup." className="theme-image dark-image" width="840" height="510" data-path="images/build-docs/connectors/sendgrid/web-browser/sendgrid-popup-dark.webp" />
    </Frame>

    **Update or disconnect**

    Go to [**Connectors > SendGrid**](#connect-sendgrid). Update your key or click **Disconnect** to remove the integration.

    <Frame caption="Disconnect SendGrid">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/QfIb8xISg8b4eaJx/images/build-docs/connectors/sendgrid/web-browser/sendgrid-disconnect-light.webp?fit=max&auto=format&n=QfIb8xISg8b4eaJx&q=85&s=17cb0caadfbf2c8f613599cf540a1024" alt="SendGrid integration showing connected state with a Disconnect button." className="theme-image light-image" width="1814" height="532" data-path="images/build-docs/connectors/sendgrid/web-browser/sendgrid-disconnect-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/QfIb8xISg8b4eaJx/images/build-docs/connectors/sendgrid/web-browser/sendgrid-disconnect-dark.webp?fit=max&auto=format&n=QfIb8xISg8b4eaJx&q=85&s=61ba3c055716bc8f7aa9894ee7d7656a" alt="SendGrid integration showing connected state with a Disconnect button." className="theme-image dark-image" width="1814" height="532" data-path="images/build-docs/connectors/sendgrid/web-browser/sendgrid-disconnect-dark.webp" />
    </Frame>
  </Tab>

  <Tab title="Mobile App">
    You can connect from two places - both open the same popup.

    **Option 1: From chat**

    Type a prompt that mentions SendGrid. Rocket detects the intent, shows a **Connect** button, and the popup opens when you tap it.

    **Option 2: From the Connectors tab**

    1. Tap the **More** button in the header.
    2. Tap **Integrations**.
    3. Tap the **SendGrid** card, then tap **Connect**.

    **After tapping Connect**

    A popup opens. Paste your **API key**, then tap **Done**. A green dot appears next to SendGrid when the connection is active.

    **Update or disconnect**

    Go to **Integrations > SendGrid**. Update your key or tap **Disconnect** to remove the integration.
  </Tab>
</Tabs>

<Divider />

## Example prompts

| Use case              | Prompt                                                                                                             |
| --------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Order confirmation    | `Send an order confirmation email through SendGrid when a user completes checkout. Include order total and items.` |
| Password reset        | `Add a forgot-password flow that sends a reset link via SendGrid with a 15-minute expiration.`                     |
| Welcome email         | `Send a welcome email through SendGrid when a new user signs up, with a getting-started guide.`                    |
| Marketing campaign    | `Build an admin page where I can compose and send a marketing email to a SendGrid contact list.`                   |
| Weekly digest         | `Send a weekly digest email every Monday with the user's activity summary from the past week.`                     |
| Abandoned cart        | `Send an abandoned cart reminder email 2 hours after a user leaves items in their cart.`                           |
| Invoice email         | `Generate a PDF invoice and email it through SendGrid after each successful Stripe payment.`                       |
| Re-engagement         | `Send a re-engagement email to users who have not logged in for 30 days.`                                          |
| Event invitation      | `Send an event invitation email with RSVP buttons that update the user's response in Supabase.`                    |
| Shipping notification | `Send a shipping notification email with tracking number and estimated delivery date.`                             |

<Divider />

## Tips

* **Verify your sender identity first.** SendGrid requires domain authentication or single-sender verification before you can send emails. Complete this in SendGrid Settings before connecting.
* **No permanent free tier.** SendGrid's free plan allows 100 emails per day. Upgrade for higher volume. Check [SendGrid pricing](https://sendgrid.com/en-us/pricing) for current plans.
* **Manage contacts in SendGrid.** You can add subscribers through Rocket, but deleting contacts and managing suppression lists must be done in the SendGrid dashboard.
* **One SendGrid account per project.** Each Rocket project connects to one SendGrid API key. Use different projects for different SendGrid accounts.

<Divider />

## What's next?

<CardGroup cols={2}>
  <Card title="Supabase" icon="database" href="./supabase">
    Store user data and trigger emails based on database events and user actions.
  </Card>

  <Card title="Stripe" icon="credit-card" href="./stripe">
    Send payment confirmations and invoice emails after Stripe transactions.
  </Card>

  <Card title="Resend" icon="envelope" href="./resend">
    Compare with Resend for simpler transactional email needs.
  </Card>

  <Card title="Google Analytics" icon="chart-line" href="./google-analytics">
    Track email campaign performance alongside your website analytics.
  </Card>
</CardGroup>
