How to Integrate Retool with Brevo (formerly Sendinblue)

Navigate to the Resources tab in your Retool instance and click Add Resource. Select REST API from the list of resource types. Name the resource 'Brevo API' — using the current brand name helps avoid confusion as the platform rebranded from Sendinblue to Brevo in 2023. In the Base URL field, enter https://api.brevo.com/v3. This is Brevo's current v3 REST API base URL. All endpoint paths will be appended to this URL. Ensure there is no trailing slash after '/v3'. Brevo authenticates API requests using a custom header named api-key. In the Headers section of the resource configuration, click Add Header. Set the header name to api-key (lowercase, with hyphen) and the value to your Brevo API key. Note the header name is 'api-key', not 'Authorization' — this is a Brevo-specific convention. For better security, store the API key as a configuration variable in Retool. Go to Settings → Configuration Variables, create a variable named BREVO_API_KEY, mark it as Secret, and paste your key. Then in the header value field, use {{ retoolContext.configVars.BREVO_API_KEY }} instead of the raw key. Brevo's API also accepts and returns JSON. Add a default header: Content-Type with value application/json. This ensures POST and PUT requests include the correct content type header. Click Save Changes to save the resource.

Create queries to retrieve and manage Brevo contacts. In your Retool app, open the Code panel and click + to add a query. Create your first query named searchContacts: - Method: GET - Path: /contacts - URL parameters: - email: {{ textInput_email.value }} (for exact email lookup) - limit: 50 - offset: 0 For looking up a specific contact by email (the most common operation for support and CRM teams), create a query named getContactByEmail: - Method: GET - Path: /contacts/{{ encodeURIComponent(textInput_email.value) }} This returns the full contact profile including: email, firstName, lastName, emailBlacklisted (unsubscribed status), smsBlacklisted, listIds (which lists they belong to), and attributes (all custom attributes set for this contact). The attributes object contains any custom fields you've defined in Brevo for your contacts, such as company name, order count, or customer segment. Create a query named getAllLists: - Method: GET - Path: /contacts/lists - URL parameters: limit=50, offset=0 Bind getAllLists to a Dropdown component named dropdown_list so users can select a list for filtering or bulk actions. Set getAllLists to run on page load. Create a query named getContactsInList: - Method: GET - Path: /contacts/lists/{{ dropdown_list.value }}/contacts - URL parameters: limit=100, offset=0 Bind this to a Table component that shows all contacts in the selected list with their engagement status.

1// JavaScript transformer — format contact profile for display
2const contact = data;
3if (!contact || !contact.email) return {};
4
5const attrs = contact.attributes || {};
6
7return {
8  email: contact.email,
9  first_name: attrs.FIRSTNAME || 'N/A',
10  last_name: attrs.LASTNAME || 'N/A',
11  phone: attrs.SMS || 'N/A',
12  email_subscribed: !contact.emailBlacklisted,
13  sms_subscribed: !contact.smsBlacklisted,
14  subscription_status: contact.emailBlacklisted
15    ? 'Unsubscribed'
16    : 'Subscribed',
17  list_count: (contact.listIds || []).length,
18  list_ids: (contact.listIds || []).join(', '),
19  created_at: contact.createdAt
20    ? new Date(contact.createdAt).toLocaleDateString()
21    : 'N/A',
22  modified_at: contact.modifiedAt
23    ? new Date(contact.modifiedAt).toLocaleDateString()
24    : 'N/A',
25  // Include all custom attributes
26  ...Object.fromEntries(
27    Object.entries(attrs)
28      .filter(([k]) => !['FIRSTNAME', 'LASTNAME', 'SMS'].includes(k))
29      .map(([k, v]) => [k.toLowerCase(), v])
30  )
31};

Create queries to retrieve campaign performance data. Create a query named getEmailCampaigns: - Method: GET - Path: /emailCampaigns - URL parameters: - status: sent (to retrieve only sent campaigns, not drafts) - limit: 50 - offset: 0 - sort: desc (newest first) This returns all sent email campaigns with their statistics. Each campaign object includes: name, subject, sendAtBestTime, statistics (with globalStats containing delivered, opened, clicked, unsubscribed, hardBounces, softBounces counts), and sentDate. Bind getEmailCampaigns to a Table component. Add a JavaScript transformer to calculate derived metrics: For individual campaign detail, create a query named getCampaignDetail: - Method: GET - Path: /emailCampaigns/{{ table_campaigns.selectedRow.id }} This returns the full campaign object including the HTML content, the list of recipients (list IDs), and complete statistics. When a campaign is selected in the table, getCampaignDetail runs automatically to populate a detail panel. For SMS campaign data, create getSMSCampaigns: - Method: GET - Path: /smsCampaigns - URL parameters: status=sent, limit=50 Bind both email and SMS campaign tables in separate Tab panels of your dashboard. Add a Chart component showing open rate and click rate trends across your last 20 email campaigns as a line chart — this helps identify whether email engagement is trending up or down.

1// JavaScript transformer — calculate campaign performance metrics
2const campaigns = (data.campaigns || []);
3
4return campaigns.map(campaign => {
5  const stats = campaign.statistics?.globalStats || {};
6  const delivered = parseInt(stats.delivered || 0);
7  const opened = parseInt(stats.uniqueViews || 0);
8  const clicked = parseInt(stats.clickers || 0);
9  const unsubscribed = parseInt(stats.unsubscriptions || 0);
10
11  const openRate = delivered > 0
12    ? ((opened / delivered) * 100).toFixed(1)
13    : '0';
14  const clickRate = delivered > 0
15    ? ((clicked / delivered) * 100).toFixed(1)
16    : '0';
17  const unsubRate = delivered > 0
18    ? ((unsubscribed / delivered) * 100).toFixed(2)
19    : '0';
20
21  return {
22    id: campaign.id,
23    name: campaign.name || 'Unnamed Campaign',
24    subject: campaign.subject || 'N/A',
25    sent_date: campaign.sentDate
26      ? new Date(campaign.sentDate).toLocaleDateString('en-US', {
27          year: 'numeric', month: 'short', day: 'numeric'
28        })
29      : 'N/A',
30    delivered,
31    opened,
32    clicked,
33    open_rate: `${openRate}%`,
34    click_rate: `${clickRate}%`,
35    unsub_rate: `${unsubRate}%`,
36    performance: parseFloat(openRate) >= 25 ? 'High'
37      : parseFloat(openRate) >= 15 ? 'Medium' : 'Low'
38  };
39});

Add action capabilities to your Retool panel so marketing and support teams can trigger transactional communications directly from workflow tools without using Brevo's interface. Create a query named sendTransactionalEmail: - Method: POST - Path: /smtp/email - Body (JSON): Add a Form section to your Retool app with: - A Select component for email template (populated from getEmailTemplates query) - A Text Input for recipient email address - A JSON editor or Text Input for template parameter overrides (e.g., customer name, order details) - A 'Send Email' button that triggers sendTransactionalEmail For email template lookup, create getEmailTemplates: - Method: GET - Path: /smtp/templates - URL parameters: templateStatus=true, limit=50 For SMS, create sendSMS: - Method: POST - Path: /transactionalSMS/sms - Body: { sender, recipient (phone number), content } Add event handlers to both send queries: on success, show a Retool notification ('Email sent successfully') and log the send to your internal database. On failure, show the error message from the API response to help teams debug delivery issues. For complex transactional workflows that trigger communications based on database events — order confirmations, payment failures, support escalations — use Retool Workflows with a Resource Query block for the Brevo API call alongside your database resource, triggered by webhooks from your application.

1// POST body for sendTransactionalEmail query
2// Method: POST, Path: /smtp/email
3{
4  "sender": {
5    "name": "{{ textInput_senderName.value || 'Support Team' }}",
6    "email": "{{ textInput_senderEmail.value || 'support@yourcompany.com' }}"
7  },
8  "to": [
9    {
10      "email": "{{ textInput_recipientEmail.value }}",
11      "name": "{{ textInput_recipientName.value || '' }}"
12    }
13  ],
14  "templateId": {{ select_template.value }},
15  "params": {
16    "FIRSTNAME": "{{ textInput_contactFirstName.value }}",
17    "ORDER_ID": "{{ textInput_orderId.value }}",
18    "CUSTOM_MESSAGE": "{{ textInput_customMessage.value }}"
19  }
20}

Add contact management capabilities to your Retool app — updating attributes, managing list memberships, and handling unsubscribes. Create a query named updateContact: - Method: PUT - Path: /contacts/{{ textInput_email.value }} - Body: { "attributes": { "FIRSTNAME": "{{ textInput_firstName.value }}", "LASTNAME": "{{ textInput_lastName.value }}" }, "listIds": [{{ multiSelect_lists.value }}] } Create a query named addContactToList: - Method: POST - Path: /contacts/lists/{{ dropdown_targetList.value }}/contacts/add - Body: { "emails": ["{{ textInput_email.value }}"] } Create a query named removeContactFromList: - Method: POST - Path: /contacts/lists/{{ dropdown_targetList.value }}/contacts/remove - Body: { "emails": ["{{ textInput_email.value }}"] } For unsubscribe management, create getBlacklist: - Method: GET - Path: /contacts - URL parameters: emailBlacklisted=true, limit=100 This returns all globally unsubscribed contacts. Add a Retool Table showing unsubscribed contacts with their unsubscribe date and reason. Include an option to resubscribe contacts (POST to /contacts with emailBlacklisted: false) for cases where contacts request to be re-added — always ensure this complies with your legal requirements and the contact's explicit re-opt-in. For bulk contact import, create addContactsBulk: - Method: POST - Path: /contacts/import - Body: structured JSON with contacts array For complex contact management workflows involving multiple systems — syncing Brevo contacts with your CRM, managing GDPR deletion requests, or automating list transitions based on customer lifecycle stages — RapidDev's team can help build a comprehensive contact operations center in Retool.

1// POST body for addContactsBulk — import multiple contacts at once
2// Method: POST, Path: /contacts/import
3{
4  "fileBody": "EMAIL;FIRSTNAME;LASTNAME;SMS\n{{ bulkContactData.value }}",
5  "listIds": [{{ dropdown_importList.value }}],
6  "emailBlacklist": false,
7  "smsBlacklist": false,
8  "updateExistingContacts": true,
9  "emptyContactsAttributes": false
10}