How to Integrate Retool with Twilio

Navigate to the Resources tab in Retool's left navigation sidebar. Click the Add Resource button in the top-right corner. In the resource type picker, scroll to the Messaging section and click Twilio. The Twilio resource configuration form opens. In the 'Resource name' field, enter a name such as 'Twilio SMS' or 'Twilio Production'. For teams with multiple Twilio accounts (e.g., US and EU regional accounts), use descriptive names that identify the account region and purpose. In the 'Account SID' field, paste your Twilio Account SID — it begins with 'AC' followed by a 32-character alphanumeric string (e.g., ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx). You can find this on the Twilio Console homepage under 'Account Info'. In the 'Auth Token' field, paste the corresponding Auth Token. The Auth Token is displayed alongside the Account SID on the Twilio Console homepage — click the eye icon to reveal it. Treat this token as a secret password; it has full access to your Twilio account. Do not enter the Auth Token directly if you prefer additional security. Instead, create a Retool Configuration Variable (Settings → Configuration Variables) named 'TWILIO_AUTH_TOKEN', mark it as secret, paste the token as its value, and then reference it in the resource field as `{{ environment.variables.TWILIO_AUTH_TOKEN }}`. Click Save Changes. Retool will validate the credentials against Twilio's API. A green Connected status confirms a successful connection.

Open your Retool app (or create a new one from the Apps tab). In the Code panel at the bottom, click + New query. From the Resource dropdown, select your Twilio Resource. Retool displays a Twilio-specific query form with an 'Action' dropdown. Select 'Send SMS Message'. The form updates to show the fields required for sending: - 'To': Enter `{{ toNumberInput.value }}` to bind to a text input component where agents type the recipient's number. Phone numbers must be in E.164 format (e.g., +14155552671). - 'From': Enter your Twilio phone number in E.164 format (e.g., +18005551234), or enter `{{ fromNumberSelect.value }}` if you want operators to choose from multiple Twilio numbers via a Select component. - 'Body': Enter `{{ messageBody.value }}` to bind to a text area where agents compose the message. - 'Media URL' (optional): Leave empty for SMS; populate for MMS with image or file URLs. Set 'Run query on page load' to Off — this query should only fire when a Send button is clicked. In the 'On success' event handler, click + Add event handler and select 'Show notification' with message 'SMS sent successfully to {{ toNumberInput.value }}'. Add a second on-success handler to trigger a 'getMessageHistory' query (which you will create in the next step) so the message log table refreshes immediately after sending. Name the query 'sendSMS' and click Save.

Create a second query to display historical messages. Click + New query, select your Twilio Resource, and from the 'Action' dropdown choose 'List Messages'. Set the query parameters: - 'To': Optionally bind to `{{ phoneSearchInput.value }}` to filter messages for a specific recipient when a phone number is entered, or leave empty to return all recent messages. - 'From': Optionally bind to your Twilio number to scope the history to a specific sender. - 'Date sent after': Bind to `{{ dateFilter.startDate }}` for date-range filtering. - 'Date sent before': Bind to `{{ dateFilter.endDate }}`. - 'Page size': Set to 50. Name the query 'getMessageHistory'. Set 'Run query on page load' to On. On the canvas, drag a Table component from the Component panel and rename it 'messageTable'. Set its Data to `{{ getMessageHistory.data }}`. Configure the Table columns to show: direction (inbound/outbound), from, to, body (with word wrap enabled), status, date_sent (formatted as a readable date), error_message (shown only if non-null), and price. Add conditional row coloring: rows where status is 'failed' or 'undelivered' show with a red background tint. Use the Table's 'Row color' setting with condition `{{ row.status === 'failed' || row.status === 'undelivered' }}` → color red. Add a Text Input component 'phoneSearchInput' above the table labeled 'Filter by phone number', and a Date Range Picker 'dateFilter'. Wire them so changing either re-triggers the getMessageHistory query using event handlers on the input's 'Change' event.

1// Transformer: reshape Twilio message list for display
2const messages = data;
3return messages.map(msg => ({
4  direction: msg.direction,
5  from: msg.from,
6  to: msg.to,
7  body: msg.body,
8  status: msg.status,
9  sent: new Date(msg.date_sent).toLocaleString(),
10  error: msg.error_message || '',
11  sid: msg.sid,
12  price: msg.price ? `$${Math.abs(parseFloat(msg.price)).toFixed(4)}` : 'N/A'
13}));

With queries in place, construct a polished send form that agents use day-to-day. From the Component panel, arrange the following on the canvas: 1. A Container with title 'Send SMS' — drag it to the left side of the canvas. 2. Inside the container, add a Text Input component named 'toNumberInput'. Set label to 'To (E.164 format)' and placeholder '+14155552671'. In the Validation section, add a regex validator: `^\+[1-9]\d{7,14}$` with error message 'Use E.164 format'. 3. A Select component named 'fromNumberSelect'. Manually add Options with your Twilio phone number(s) or bind to a 'List Incoming Phone Numbers' query that dynamically fetches your account's active numbers. 4. A Text Area named 'messageBody'. Set label to 'Message' with max character display of 160 (standard SMS length) using Retool's character counter feature. Add a validation requiring the field to be non-empty. 5. A Button named 'sendButton' labeled 'Send SMS'. Wire its Click event handler to the sendSMS query with a 'Show confirmation' dialog displaying 'Send SMS to {{ toNumberInput.value }}?'. 6. A Text component below the button that shows the character count: `{{ messageBody.value?.length || 0 }} / 160 characters`. On the right side of the canvas, place the messageTable Table component and the phoneSearchInput and dateFilter controls above it. The layout creates a split view — compose on the left, history on the right — suitable for a support agent workflow.

Beyond manual sends from the app UI, Retool Workflows let you trigger Twilio SMS automatically on schedules or in response to webhook events — without an operator needing to be logged into the Retool app. Navigate to the Retool Workflows section (accessible from the Retool sidebar or Apps dashboard). Click + Create new Workflow and name it 'SendAlertSMS'. Add a Trigger: for scheduled sends, click Add Trigger → Schedule and set a cron expression (e.g., `0 9 * * 1` for every Monday at 9 AM). For event-driven sends, click Add Trigger → Webhook — Retool generates a unique webhook URL with a secret key header. On the Workflow canvas, add a Resource Query block. Set the Resource to your Twilio Resource and Action to 'Send SMS Message'. Wire the 'To' field to data from a previous block (e.g., a PostgreSQL query block that fetches on-call engineer phone numbers from a database). For a weekly digest pattern: 1. Block 1 (PostgreSQL query): `SELECT phone_number, first_name FROM on_call_engineers WHERE active = true` 2. Block 2 (Loop block): iterate over each row from Block 1 3. Inside loop — Block 3 (Twilio query): Send SMS to `{{ loop.value.phone_number }}` with body `Hi {{ loop.value.first_name }}, here is your weekly ops summary...` Add error handling: add a Global Error Handler block that sends an SMS or Slack notification to the ops lead if any step fails. For complex notification workflows with conditional routing, retry logic, and multi-channel escalation (SMS → Slack → PagerDuty), RapidDev's team can help build the Retool Workflow architecture.

1// JavaScript block: build personalized SMS message bodies
2const engineers = blocks.getOnCallEngineers.data;
3return engineers.map(eng => ({
4  to: eng.phone_number,
5  body: `Hi ${eng.first_name}, this is your weekly ops digest for ${new Date().toLocaleDateString()}. You have ${eng.open_incidents} open incidents. Reply STOP to unsubscribe.`
6}));