SendGrid Integration

You can use SendGrid's API in Retool to send transactional emails to your users, pull data on past performance, and update sender permissions (among other things).

1. Get your SendGrid API Key

You can see a list of your SendGrid API keys via the "API Keys" section of your SendGrid account's "Settings" page. If you'd like to use an existing API key, you'll have to get this from whoever set up the key — SendGrid doesn't let you display API keys after they're created. If you want to create a new API key to use with Retool, you can press the "Create API Key" button to create a new key and view it. Store it somewhere safe because SendGrid won't show it to you again!

SendGrid > Settings > API Keys

When you select the API Key Permissions, the methods available will change depending on the access you give this key. If you'd like to send mail through this resource, you'll need to select Full Access here:

2. Connecting SendGrid to Retool

Create a new resource in Retool, and select "SendGrid" as the type. Enter your API key in the "Access Token" field. Press "Save" when you're done.

Resources > Create New > SendGrid

3. Writing API requests

You can now select your newly-created SendGrid resource from the Resource dropdown when creating queries in your Retool apps. Retool ingests SendGrid's OpenAPI v3 spec, so you can select from a list of actions and check out descriptions for each.

For more in depth details on each operation and their required payloads, check out the SendGrid docs here.

4. Sending a basic POST request to the /mail/send endpoint

If you've already worked with the SendGrid /mail/send API before, then you know that working with the complex body params – especially the personalizations one – can be...confusing at the least. SendGrid's docs walk through a few examples here, but we thought it might be useful to one of our own for how we send emails from Retool apps.

{
  "body": {
    "content": [
      {
        "type": "text/html",
        "value": "<p>Hi there!</p>"
      }
    ],
    "subject": "Welcome to Retool!",
    "from": {
      "email": "[email protected]",
      "name": "The Retool Team"
    },
    "personalizations": [
      {
        "to": [
          {
            "email": "[email protected]"
          }
        ]
      }
    ]
  }
}

When you're sending a request from a Retool app, you might replace the content value with something like {{ richTextEditor.value }}, or the email field in the personalizations array with something like {{ emailInput.value }}.

For a more in depth tutorial for using Retool and SendGrid, check out our blog post here. We also have an out-of-the-box template you can use in Retool for sending transactional email.