A Low-Code SendGrid App: Send Emails, Receive, & HTML Email Example (2023)

Email marketing is critical for businesses of all sizes to communicate with their customers and prospects. But creating and managing email campaigns can be a difficult task, especially at scale. In this article, we will explore how to use the SendGrid API from Rowy to send and receive emails in a low-code way without racking a huge bill. Whether you're tired of paying for expensive email marketing tools, looking for a way to automate your email marketing tasks, or just sending transactional emails to notify your app users, read on!

1. SendGrid API setup

SendGrid is an email delivery service via API. You just need 2 minutes to get started: create an account, and then add an API key!

The API key will be included in your HTTP request "Authorization" header to tell SendGrid it's you. Once you obtain your API key, add it to your list of secrets in Rowy:

const headers = {
    "Authorization": `Bearer ${rowy.secrets.SENDGRID_API_KEY}`
}

2. Sending emails

You can easily send emails in a single click using the SendGrid API in a Rowy Action column:

const action: Action = async ({ row }) => {
    await fetch("https://api.sendgrid.com/v3/mail/send", {
        method: "POST",
        headers: {
            "Authorization": `Bearer ${rowy.secrets.SENDGRID_API_KEY}`
        },
        body: JSON.stringify({
            to: [
                {
                    email: row.receiver_email
                }
            ],
            from: {
                email: row.sender_email,
                name: row.sender_name
            },
            subject: 'Welcome to Rowy!',
            content: [
                {
                    type: 'text/plain',
                    value: `Hello, ${row.receiver_name}`
                }
            ]
        })
    })
}

The email API is very flexible. You can send emails to multiple recipients, add attachments, and even use HTML formatting. We can use Rowy to conveniently make the best of all these features. For example, you can store attachments in an Image column, specify recipients in an email property, and even write emails in Markdown and have it turned into HTML automatically with a Derivative column:

Alternatively, you can use the SendGrid extension to send emails whenever a new row is created, updated, or deleted in a table.

3. Receiving emails

You can also receive emails sent to your email address using SendGrid's Inbound Parse webhook by following the official tutorial and setting up a Rowy webhook to obtain the email data. The setup consists in setting up an MX record to point to SendGrid's servers, and then specify the email addresses you want to parse and the destination URL where to send the content of these emails:

You can then create a Rowy webhook to receive the email data and store it in a table, and use its URL as a destination URL for SendGrid:

You are free to do whatever you want with the email data. For example, you could create a program to draft an answer using GPT-3 based on the incoming email.

4. HTML formatting

Emails are notoriously hard to format. Rowy proposes a Markdown column you can then derive into HTML using a Derivative column, but you'll also need a way to add custom CSS styles to make your emails look good. One way to do this is to use a tool like the MJML framework to create custom email templates, and then let the MJML API translate the email template into HTML.

MJML is a simple markup language designed to reduce the pain of coding responsive emails:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>Hello World!</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

With Rowy, it's trivial to have an MJML template column you can then parse and fill with custom data before generating HTML via a Derivative column.

Join Rowy

Low-code development tools like Rowy combined with SendGrid's email API are powerful tools to build custom email apps to automate email marketing tasks. From sending to receiving emails, and everything in-between, your imagination is the only limit!

We hope you find this article useful, and don't hesitate to ask away on our Discord channel if you have any question.