How to integrate Twilio for SMS notifications in Bubble.io: Step-by-Step Guide

Go to twilio.com and sign up for a free account (or log in if you already have one). From the Twilio Console dashboard, locate your Account SID and Auth Token — these are displayed prominently on the main page. Copy both values and save them securely. Then navigate to Phone Numbers in the left sidebar and note your Twilio phone number (the one Twilio assigned to you). If you do not have a number yet, click Buy a Number and select one with SMS capability. On the free trial, you can only send SMS to verified phone numbers.

In your Bubble editor, go to the Plugins tab and open the API Connector plugin (install it if you have not already). Click Add another API and name it 'Twilio'. Set the authentication to HTTP Basic Auth. In the Username field, enter your Account SID. In the Password field, enter your Auth Token. Mark both as Private so they are never sent to the browser. Now add a new API call named 'Send SMS'. Set the method to POST and enter the URL: https://api.twilio.com/2010-04-01/Accounts/YOUR_ACCOUNT_SID/Messages.json (replace YOUR_ACCOUNT_SID with your actual SID). Set Use as to Action.

1{
2  "URL": "https://api.twilio.com/2010-04-01/Accounts/[account_sid]/Messages.json",
3  "Method": "POST",
4  "Headers": {
5    "Content-Type": "application/x-www-form-urlencoded"
6  },
7  "Body": "To=[to_phone]&From=[from_phone]&Body=[message_body]"
8}

In the Send SMS API call, add three body parameters: To (the recipient phone number in E.164 format like +15551234567), From (your Twilio phone number), and Body (the message text). Mark From as Private since it will not change per request. Set To and Body as dynamic (not private, not client-safe) so they can be set from workflows. Click Initialize call and enter test values: a verified phone number for To, your Twilio number for From, and 'Test from Bubble' for Body. Click Initialize — Twilio should return a JSON response with the message SID and status.

Go to the Workflow tab and create a new workflow for the event that should trigger the SMS (for example, When Button Send Notification is clicked, or a backend workflow triggered by a database change). Add an action — under Plugins, select Twilio - Send SMS. Set the To field to the recipient's phone number (from an Input element or a database field). Set the Body field to your message text (can include dynamic data like the user's name or order details). The From field should be pre-set to your Twilio number if you marked it as private.

Twilio requires phone numbers in E.164 format: +[country code][number] with no spaces or dashes (example: +15551234567). To handle user input, add a phone number Input field on your page. When saving the number, use Bubble's text operators to clean it: remove spaces, dashes, and parentheses using the :find & replace operator. If users do not enter a country code, prepend +1 (for US) using a conditional expression. Store the cleaned E.164 number in your database so every SMS send uses the correct format.

To track whether SMS messages are delivered, create a backend workflow in Bubble that accepts Twilio's status callback. Go to the Workflow tab, click the Pages dropdown, and select Backend workflows. Create a new backend workflow called 'twilio-status-callback'. Add parameters for MessageSid (text) and MessageStatus (text). In the API Connector, update your Send SMS call URL to include a StatusCallback parameter pointing to your backend workflow URL: https://yourapp.bubbleapps.io/api/1.1/wf/twilio-status-callback. Create an SMS_Log Data Type with fields: message_sid, status, to_number, sent_at. Update the log when the callback fires.