Send Emails with Retool and Mailtrap

Step-by-step guide on how to integrate Mailtrap with your Retool application.

Mailtrap is an email-sending solution for developer and product teams. Focused on fast delivery and high inboxing rates for transactional and promo emails. Provides highly customizable API and 24/7 tech support.

You will need a:

Retool account and a project.
Mailtrap account for sending emails.

Step 1. Create a REST API resource

Open Retool and go to the Resources tab. Once there, click on Create new → Resource.

On the next page, select REST API.

Then, enter the following details on the configuration page:

Project name
Mailtrap URL https://send.api.mailtrap.io/api/send
Api-Token header with Bearer + yourMailtrap API key as value.

Once you insert the required details, make sure to click Save changes and go back to your project.

Step 2. Configure the Event handler

Next, click on your button you want to designate for submission and sending emails. On the inspector menu on the right, add a new Event handler and add a new Query under Query options.

Then, in the window that shows up on your left, add the details as in the screenshot below:

Quick breakdown;

Select the API you created as Resource, in this case, it's Mailtrap Email API
Add two headers:
- Authorization Authorization – Bearer + Your Mailtrap API token
- Content-Type – application/json
Select Raw for Body type
Add the following code snippet in your Body (this is just an example body for sending emails from a simple form. Feel free to adjust it according to your needs):

{
  "from": {
    "email": "hello@demoatmailtrap.com"
  },
  "to": [
    {
      "email": {{ form1.data.email }}
    }
  ],
  "subject": {{ form1.data.subject }},
  "text": {{ form1.data.message }}
}

Important: Make sure your components’ Form data keys have matching values. E.g., The Email component should have email as the Form data key, Message field should have message, etc. This will allow the form to read the value the user inputs and then use it accordingly.

Step 3. Send a test email

Finally, to test your configuration, click on the Run button in the upper right corner and fill out the form. If you followed everything thus far, you should receive the email in your inbox in a few seconds. Here it is in a Gmail inbox:

And here it is in the Email Logs tab in the Mailtrap dashboard.

Before you go: If you plan on collecting email addresses for a list, you can connect your Retool project with Mailtrap Contacts and store your addresses in the Mailtrap dashboard automatically. For reference, check out the official Mailtrap Contacts API documentation.