Twilio

Log into console.twilio.com. On the dashboard home page you will see three values you need: 1. **Account SID** — starts with `AC`, looks like `ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`. This is your Basic Auth username. 2. **Auth Token** — a 32-character string shown masked by default. Click the eye icon to reveal it. This is your Basic Auth password. Treat it like a root password — if compromised, rotate it immediately from the console. 3. **Twilio Phone Number** — go to 'Phone Numbers' → 'Manage' → 'Active Numbers' and copy your SMS-enabled number in E.164 format (e.g., +15551234567). This is your `From` number. If you do not have a Twilio phone number yet, click 'Phone Numbers' → 'Buy a Number.' Filter by SMS capability and select a local number in your region. Numbers typically cost about $1.15/month for a US long-code. Also note whether you are on a trial account or a paid account. Trial accounts can only send SMS to verified phone numbers (numbers you manually verify in the Twilio Console under 'Verified Caller IDs'). For production, upgrade to a paid account.

1// Twilio credentials location in console.twilio.com:
2// Account SID: Console home page → Account SID (starts with AC)
3// Auth Token: Console home page → Auth Token (click eye icon to reveal)
4// Phone Number: Phone Numbers → Manage → Active Numbers
5
6// E.164 format examples:
7// US: +15551234567
8// UK: +447911123456
9// India: +919876543210

In your Bubble editor, click 'Plugins' → 'API Connector.' Click 'Add another API' and name it 'Twilio.' Click 'Add another call' and name it 'Send SMS.' Set the method to POST. For the URL, use this format: `https://api.twilio.com/2010-04-01/Accounts/{{AccountSID}}/Messages.json` Replace `{{AccountSID}}` with your actual Account SID — for example: `https://api.twilio.com/2010-04-01/Accounts/ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/Messages.json` Now set up authentication. Click the authentication dropdown (default 'None') and select 'Basic auth.' In the Username field, enter your Account SID (ACxxxxxxxx). In the Password field, enter your Auth Token. Check 'Private' on both fields — this keeps your credentials from appearing in any browser-side network request. CRITICAL: Set the body type to 'Form data' (not 'JSON body'). Twilio's Messages endpoint requires `application/x-www-form-urlencoded` encoding. If you use JSON body, Twilio returns a 400 error. In the form-data body fields, add three parameters: - `To` — the recipient phone number (dynamic, E.164 format) - `From` — your Twilio phone number (can be static — your Twilio number) - `Body` — the message text (dynamic) Click 'Initialize call.' Enter a real phone number you can verify receiving an SMS on (use a number verified in your Twilio console if on trial), your Twilio number as From, and 'Hello from Bubble test' as Body. Click 'Initialize.' If successful, you receive an SMS and see a JSON response with a `sid` field.

1// API Connector: Twilio → Send SMS
2// Method: POST
3// URL: https://api.twilio.com/2010-04-01/Accounts/ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/Messages.json
4//
5// Authentication: Basic Auth
6//   Username: ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  // Account SID — mark Private
7//   Password: [your Auth Token]                   // mark Private
8//
9// Body type: Form data (NOT JSON)
10// Form fields:
11//   To:   <dynamic_recipient_phone_E164>
12//   From: +15551234567   (your Twilio number, can be static)
13//   Body: <dynamic_message_text>

Twilio requires all phone numbers in E.164 format: a plus sign followed by the country code and subscriber number, with no spaces, dashes, or parentheses. Examples: +15551234567 (US), +447911123456 (UK), +919876543210 (India). Users typing phone numbers into Bubble forms rarely enter E.164 format. They type numbers like '(555) 123-4567' or '555-123-4567' or just '5551234567' without the country code. You must normalize these before passing to Twilio. In Bubble, add a Phone data type field to your User data type (type: text). When users enter their number in a form, add a workflow step that reformats it. Bubble's built-in text operators can help: - Use 'Find and replace' to strip non-numeric characters - Use 'Truncated from' and 'Extract with Regex' for more complex transformations - Prepend the country code (+1 for US) if your app is US-only For international apps, use a Bubble plugin like 'intl-tel-input' or add a country code dropdown alongside the phone number field so users select their country and the app prepends the correct international prefix. Store the E.164-formatted number in your User record's phone field and always use this stored value when calling Twilio — never re-format at the point of sending.

1// Bubble workflow: Format phone number to E.164 (US example)
2// Trigger: Input_Phone loses focus or form is submitted
3// Action: Make changes to User → phone_e164
4//   Value: "+1" + Input_Phone's value:find and replace("(", ""):find and replace(")", ""):find and replace("-", ""):find and replace(" ", "")
5//
6// For international: collect country_code from a dropdown (text: "+44", "+91", etc.)
7// Then: country_code_dropdown's value + Input_Phone's value (digits only)
8
9// E.164 validation check:
10// Valid: starts with +, length between 8-15 characters, all digits after +
11// Use Bubble's 'matches regex' condition: ^\+[1-9]\d{7,14}$

Now wire the Twilio API Connector call to a real Bubble workflow event. The pattern is straightforward: any Bubble event (button click, form submission, new record creation, scheduled time) triggers an action that calls the Twilio API Connector. For secure server-side execution, wrap the Twilio action in a Backend Workflow (Bubble paid plan required). This keeps the Account SID and Auth Token completely server-side — they never appear in browser network requests even with the Private checkbox. Call the Backend Workflow from a client-side trigger using 'Schedule API Workflow' at 'Current date/time.' For a simple notification pattern (e.g., order shipped): 1. Trigger: When an Order record's status changes to 'Shipped' 2. Backend Workflow action: Plugins → Twilio → Send SMS - To: Order's customer's phone_e164 field - From: your Twilio number (static) - Body: 'Your order #' + Order's order_number + ' has shipped! Track it here: ' + Order's tracking_url For OTP / verification codes: 1. User clicks 'Send OTP' button 2. Workflow: Generate a random 6-digit number → Store as User's otp_code, set otp_expires_at = Current date/time + 10 minutes 3. Backend Workflow: Send SMS with Body = 'Your verification code is: ' + User's otp_code 4. Next page: user enters code → validate against User's otp_code and otp_expires_at > Current date/time For WhatsApp: use the same workflow and call but prefix both `To` and `From` numbers with `whatsapp:` — e.g., `whatsapp:+15551234567`. You must use a Twilio number that is WhatsApp-enabled (available via Twilio's WhatsApp sandbox or a WhatsApp Business sender).

1// Backend Workflow: Send Order Shipped SMS
2// Trigger: When Order's status = 'Shipped' (from workflow editor)
3// Action: Plugins → Twilio → Send SMS
4//   To:   Order's Customer's phone_e164
5//   From: +15551234567  (your Twilio number)
6//   Body: "Your order #" + Order's order_number + " has shipped! Expected delivery: " + Order's estimated_delivery formatted as "MMM D"
7
8// OTP Workflow:
9// Step 1: Set User's otp_code = Random number between 100000 and 999999
10// Step 2: Set User's otp_expires_at = Current date/time + 600 seconds
11// Step 3: Backend Workflow → Send SMS
12//   To:   Current User's phone_e164
13//   From: +15551234567
14//   Body: "Your code is: " + Current User's otp_code + ". Expires in 10 minutes."
15
16// WhatsApp variant:
17//   To:   "whatsapp:" + Customer's phone_e164
18//   From: "whatsapp:+15551234567"  (WhatsApp-enabled Twilio number)

To receive SMS replies from users, configure Twilio to forward incoming messages to your Bubble app as a webhook. This requires a Bubble paid plan for Backend Workflows. In Bubble, go to Settings → API → check 'This app exposes a Workflow API.' Copy your app's Workflow API base URL. In the Backend Workflows section, create a new workflow named `twilio_inbound`. Click 'Detect data' and Bubble will listen for the next incoming request to auto-detect the schema. In Twilio Console, go to Phone Numbers → Manage → Active Numbers → click your number. Under 'Messaging,' find 'A Message Comes In' and change the dropdown from 'TwiML Bin' to 'Webhook.' Paste your Bubble workflow URL: `https://appname.bubbleapps.io/api/1.1/wf/twilio_inbound` Twilio sends a test request or you can send an SMS to your Twilio number from your phone. Bubble detects the schema — you will see fields including: `Body` (message text), `From` (sender's E.164 number), `To` (your Twilio number), `MessageSid`, `AccountSid`, `NumSegments`. In the Backend Workflow, add actions to process the inbound message: 1. Search for a Contact record where phone_e164 = Step 1's From field 2. Create a new SMS_Inbound record with: message_text = Step 1's Body, sender_phone = Step 1's From, linked_contact = result of step 1 (if found) 3. Add a 'Return data from API' action returning `{"status": "received"}` — this sends a 200 response to Twilio IMPORTANT: You must return HTTP 200 to Twilio within a few seconds or Twilio retries the webhook up to 3 times. Adding a 'Return data from API' action in the workflow ensures the 200 is sent. If you want Twilio to auto-reply with a TwiML response, return XML instead: `<?xml version="1.0"?><Response><Message>Thanks, we got your message!</Message></Response>`. RapidDev has implemented inbound Twilio flows across numerous Bubble apps — if your use case involves complex routing logic, book a free scoping call at rapidevelopers.com/contact.

1// Bubble Backend Workflow URL for Twilio inbound:
2https://appname.bubbleapps.io/api/1.1/wf/twilio_inbound
3
4// Twilio sends this POST body (form-encoded, NOT JSON):
5// Body=Hello+there&From=%2B15559876543&To=%2B15551234567&MessageSid=SMxxxxxx&
6// AccountSid=ACxxxxxx&NumSegments=1&NumMedia=0&SmsStatus=received
7
8// Detected fields in Bubble Backend Workflow:
9// Body        → text (the message content)
10// From        → text (sender E.164 number, e.g. +15559876543)
11// To          → text (your Twilio number)
12// MessageSid  → text (unique message ID for deduplication)
13// NumSegments → number
14
15// Return 200 with empty TwiML to acknowledge without replying:
16// Return data: {"xml": "<?xml version='1.0'?><Response/>"}
17// OR return data to auto-reply:
18// {"xml": "<?xml version='1.0'?><Response><Message>Got it!</Message></Response>"}

Before launching your Twilio integration to real users, apply privacy rules and set up monitoring. Privacy rules: Go to Bubble's Data tab → Privacy. Add rules for any data type that stores phone numbers or SMS content. At minimum: - User data type: only the Current User can see their own phone_e164 and otp_code fields — other users should not be able to read each other's phone numbers - SMS_Inbound data type (if you created one): only admin users or server-side workflows should read inbound messages — regular users should not access other users' SMS content Set the rule to 'When Everyone else → no access to these fields' for sensitive fields, and enable 'Ignore privacy rules when using workflows' for your Backend Workflows that need to read the data. WU monitoring: Each Twilio SMS send is one API Connector call action — one WU. Inbound webhooks that trigger Backend Workflows consume additional WUs for each workflow step. For apps sending hundreds of SMS per day, this is light WU usage. Monitor in Bubble's Logs tab → WU usage chart to establish a baseline. Cost monitoring: Set up Twilio usage alerts in Twilio Console → Monitor → Alerts. Configure an email alert when daily SMS spend exceeds a threshold you set. This protects against bugs that trigger mass SMS sends (e.g., a recursive workflow that fires thousands of times).

1// Bubble Privacy Rules — User data type:
2// Rule: "When This User is not the Current User"
3//   → uncheck: phone_e164, otp_code, otp_expires_at
4//
5// SMS_Inbound data type:
6// Rule: "When Current User is not an Admin"
7//   → no access to any field
8//
9// Enable: "Ignore privacy rules when using workflows"
10// (in Privacy tab settings — allows Backend Workflows to read restricted fields)
11
12// Twilio spend alert setup:
13// console.twilio.com → Monitor → Alerts → Create Alert
14// Alert type: Usage (Daily)
15// Threshold: $[your limit]
16// Notification: email