How to Integrate Retool with Plivo

Log in to the Plivo console at console.plivo.com. On the Overview page (or Account → API Credentials), find your Auth ID and Auth Token. The Auth ID is a public identifier (begins with a letter-number combination like MA...) while the Auth Token is the secret credential that authenticates API requests. Copy both values. Before creating the Retool resource, store your credentials securely. Navigate to your Retool instance's Settings → Configuration Variables and create two variables: PLIVO_AUTH_ID (not Secret — it's used in URL paths and is less sensitive) and PLIVO_AUTH_TOKEN (mark as Secret — this is the authentication credential). Navigate to the Resources tab in Retool and click Add Resource. Select REST API. Name the resource 'Plivo API'. In the Base URL field, enter https://api.plivo.com. Plivo uses HTTP Basic Authentication where the Auth ID is the username and Auth Token is the password. In the Authentication section, select Basic Auth. Set Username to {{ retoolContext.configVars.PLIVO_AUTH_ID }} and Password to {{ retoolContext.configVars.PLIVO_AUTH_TOKEN }}. Add default headers: Key = Content-Type, Value = application/json. Also add: Key = Accept, Value = application/json. Click Save Changes. Test the resource by creating a quick GET query to /v1/Account/{{ retoolContext.configVars.PLIVO_AUTH_ID }}/ to retrieve your account details — if you receive account information, the authentication is working correctly.

Create the primary SMS sending query. In your Retool app, open the Code panel and click + to add a query. Name it sendSMS, select the Plivo API resource, set Method to POST, and set the path to /v1/Account/{{ retoolContext.configVars.PLIVO_AUTH_ID }}/Message/. Set the request body type to JSON and enter the message parameters: Add the following UI components to build the message composition form: a TextInput named textInput_fromNumber (select from your Plivo phone numbers), a TextInput named textInput_toNumber for the recipient's E.164-formatted number, a TextArea named textArea_messageText for the SMS body (add a character counter to warn when approaching the 160-character single SMS limit), and a Button named btnSendSMS that triggers sendSMS. For sender number selection, create a query named getPhoneNumbers with Method GET and path /v1/Account/{{ retoolContext.configVars.PLIVO_AUTH_ID }}/Number/. Bind a Dropdown component to this query's results to let users select which Plivo number to send from. Add a confirmation Modal that appears before sending: show the from number, to number, and message preview in the modal body, with Confirm Send and Cancel buttons. Only trigger sendSMS after the user confirms. On sendSMS success, show a notification with the returned message_uuid for tracking, and log the send to an internal database if needed.

1// JSON body for Plivo SMS send request
2// Used in sendSMS query body
3{
4  "src": "{{ textInput_fromNumber.value }}",
5  "dst": "{{ textInput_toNumber.value.replace(/\\s/g, '') }}",
6  "text": "{{ textArea_messageText.value }}",
7  "type": "sms",
8  "url": "",
9  "method": "POST"
10}

Create queries to retrieve message history and delivery status. Create getMessageLogs with Method GET and path /v1/Account/{{ retoolContext.configVars.PLIVO_AUTH_ID }}/Message/. Add URL parameters for filtering: Key = offset, Value = {{ (pagination.pageNumber - 1) * 20 || 0 }}, Key = limit, Value = 20, Key = message_direction, Value = {{ select_direction.value || 'outbound' }}, Key = message_state, Value = {{ select_status.value || '' }}. For date filtering, add: Key = message_time__gte, Value = {{ new Date(dateRange.start).toISOString().split('T')[0] }} and Key = message_time__lte, Value = {{ new Date(dateRange.end).toISOString().split('T')[0] }}. Create a JavaScript transformer to format the message log response. Key fields in each Plivo message object include: message_uuid, from_number, to_number, message_time, message_state (delivered, failed, sent, queued), message_direction, total_amount (cost), units, error_code. Bind a Retool Table to the transformer output. Add a status filter dropdown with options: All, delivered, failed, sent, queued — bound to select_status. Add a date range picker for time filtering. For message detail view, create getMessageDetail with Method GET and path /v1/Account/{{ retoolContext.configVars.PLIVO_AUTH_ID }}/Message/{{ table_messages.selectedRow.message_uuid }}/. Trigger this when a table row is selected to show the complete message details in a side panel.

1// JavaScript transformer — format Plivo message logs
2const objects = data?.objects || [];
3
4return objects.map(msg => {
5  const cost = parseFloat(msg.total_amount || 0);
6  const msgTime = msg.message_time ? new Date(msg.message_time) : null;
7
8  return {
9    uuid: msg.message_uuid,
10    from_number: msg.from_number || msg.src,
11    to_number: msg.to_number || msg.dst,
12    direction: msg.message_direction,
13    status: msg.message_state,
14    status_badge: msg.message_state === 'delivered' ? '✓ Delivered'
15      : msg.message_state === 'failed' ? '✗ Failed'
16      : msg.message_state === 'sent' ? '→ Sent'
17      : '⏳ ' + (msg.message_state || 'Unknown'),
18    message_preview: msg.message_length > 20
19      ? msg.message_length + ' chars'
20      : 'Short message',
21    units: msg.units || 1,
22    cost: cost > 0 ? `$${cost.toFixed(5)}` : '$0',
23    error_code: msg.error_code || '',
24    sent_time: msgTime
25      ? msgTime.toLocaleString('en-US', {
26          month: 'short', day: 'numeric',
27          hour: 'numeric', minute: '2-digit'
28        })
29      : 'N/A'
30  };
31});

Create queries to manage your Plivo phone number inventory. Create getPhoneNumbers with Method GET and path /v1/Account/{{ retoolContext.configVars.PLIVO_AUTH_ID }}/Number/. Add URL parameters: Key = limit, Value = 100, Key = offset, Value = {{ (pagination.pageNumber - 1) * 100 || 0 }}. The numbers endpoint returns objects with number, number_type (local, tollfree, mobile, national), country, monthly_rental_rate, and application (the app/trunk assigned to the number). Create a JavaScript transformer to format the numbers list, calculating monthly cost totals and grouping numbers by country for summary stats. Add Stat components showing: total numbers owned, total monthly cost, and breakdown by country or type. For searching available numbers to provision, create searchAvailableNumbers with Method GET and path /v1/Account/{{ retoolContext.configVars.PLIVO_AUTH_ID }}/PhoneNumber/. Add URL parameters: Key = country_iso, Value = {{ select_country.value }}, Key = type, Value = {{ select_numberType.value || 'local' }}, Key = pattern, Value = {{ textInput_numberPattern.value || '' }}. Add a provisioning action: create buyNumber with Method POST and path /v1/Account/{{ retoolContext.configVars.PLIVO_AUTH_ID }}/PhoneNumber/{{ table_availableNumbers.selectedRow.number }}/. This provisions the selected available number to your Plivo account. For RapidDev-style comprehensive communications infrastructure tools that combine Plivo's multi-number management with CRM routing logic and message routing rules, Retool's multi-resource architecture allows connecting Plivo API with your customer database in the same app.

1// JavaScript transformer — format phone number inventory
2const objects = data?.objects || [];
3
4// Calculate totals
5const totalMonthlyCost = objects.reduce((sum, num) => {
6  return sum + parseFloat(num.monthly_rental_rate || 0);
7}, 0);
8
9// Group by country
10const byCountry = {};
11objects.forEach(num => {
12  const country = num.country || 'Unknown';
13  if (!byCountry[country]) byCountry[country] = { count: 0, cost: 0 };
14  byCountry[country].count++;
15  byCountry[country].cost += parseFloat(num.monthly_rental_rate || 0);
16});
17
18const numberList = objects.map(num => ({
19  number: num.number,
20  type: num.number_type || 'local',
21  country: num.country || 'N/A',
22  monthly_cost: `$${parseFloat(num.monthly_rental_rate || 0).toFixed(2)}/mo`,
23  monthly_cost_num: parseFloat(num.monthly_rental_rate || 0),
24  sms_enabled: num.sms_enabled ? '✓' : '✗',
25  voice_enabled: num.voice_enabled ? '✓' : '✗',
26  mms_enabled: num.mms_enabled ? '✓' : '✗',
27  application: num.application || 'Unassigned',
28  added_on: num.added_on
29    ? new Date(num.added_on).toLocaleDateString()
30    : 'N/A'
31}));
32
33return {
34  numbers: numberList,
35  total_count: objects.length,
36  total_monthly_cost: `$${totalMonthlyCost.toFixed(2)}/mo`,
37  by_country: byCountry
38};

Create queries for voice call monitoring and analysis. Create getCallLogs with Method GET and path /v1/Account/{{ retoolContext.configVars.PLIVO_AUTH_ID }}/Call/. Add URL parameters: Key = offset, Value = 0, Key = limit, Value = 50, Key = call_direction, Value = {{ select_callDirection.value || '' }}, Key = call_time__gte, Value = {{ dateRange.start.toISOString().split('T')[0] }}. Plivo's call records include call_uuid, from_number, to_number, call_duration, call_direction (inbound/outbound), end_call_source, bill_duration (billed seconds), total_amount, and hangup_cause_code. Create a transformer to format call logs with calculated cost per minute, duration in human-readable format (MM:SS), and hangup cause descriptions. Add a summary analytics section: create a JavaScript query that aggregates the call log data to calculate total call minutes, total call cost, average call duration, and call completion rate (successful vs. no-answer/busy). Bind Stat components to the aggregate data. Add a Chart component showing call volume by hour-of-day as a bar chart to identify peak calling periods — useful for capacity planning and staffing optimization. For outbound call campaigns, add a dialing dashboard section with a form to initiate outbound calls through Plivo's API: create initiateCall with Method POST, path /v1/Account/{{ retoolContext.configVars.PLIVO_AUTH_ID }}/Call/, body including from, to, and answer_url parameters pointing to your call flow XML.

1// JavaScript transformer — format Plivo call logs
2const objects = data?.objects || [];
3
4return objects.map(call => {
5  const durationSec = parseInt(call.call_duration || call.duration || 0);
6  const billSec = parseInt(call.bill_duration || 0);
7  const cost = parseFloat(call.total_amount || 0);
8
9  const formatDuration = (seconds) => {
10    const m = Math.floor(seconds / 60);
11    const s = seconds % 60;
12    return `${m}:${s.toString().padStart(2, '0')}`;
13  };
14
15  const hangupCodes = {
16    '16': 'Normal Clearing',
17    '17': 'User Busy',
18    '18': 'No Answer',
19    '19': 'No Answer (timeout)',
20    '21': 'Call Rejected',
21    '486': 'Busy Here'
22  };
23
24  return {
25    uuid: call.call_uuid,
26    direction: call.call_direction || 'outbound',
27    from_number: call.from_number,
28    to_number: call.to_number,
29    duration: formatDuration(durationSec),
30    billed_duration: formatDuration(billSec),
31    cost: cost > 0 ? `$${cost.toFixed(5)}` : 'Free',
32    cost_per_min: billSec > 0
33      ? `$${((cost / billSec) * 60).toFixed(4)}/min`
34      : 'N/A',
35    status: call.hangup_cause_code === '16' ? 'Completed' : 'Incomplete',
36    hangup_cause: hangupCodes[call.hangup_cause_code] || call.hangup_cause || 'Unknown',
37    call_time: call.call_time
38      ? new Date(call.call_time).toLocaleString()
39      : 'N/A'
40  };
41});