Twilio is a customer engagement platform businesses use to build personalized customer experiences. Twilio provides APIs for voice, text, chat, video, and email integrations. By using these APIs, businesses build integrations that can provide updates to their customers in real-time.
{% hint style="warning" %} To integrate Twilio with Appsmith, you should understand the basics of connecting to databases on Appsmith. {% endhint %}
Appsmith integration with Twilio provides an easy way to manage your customer-focused messaging. With these integrations, you can design a custom UI on Appsmith to support easy integrations for users.
To add a Twilio datasource, navigate to Explorer>> Click plus sign(+) next to Datasources >> Select Twilio under APIs.
Configure the Twilio datasource as illustrated below:
As part of the authentication type, you can choose from the available options:
- Basic Auth - Select Basic Auth for using Basic Authentication to create a Twilio datasource.
You’ll have to log into your Twilio Account to get account information to be added to the datasource configuration:
- Account SID - Navigate to your Twilio account >> Select Develop tab >> Scroll down to Account Info >> Copy Account SID.
- Auth Token - Navigate to your Twilio account >> Select Develop tab >> Scroll down to Account Info >> Copy Auth Token.
You can get your Twilio Phone Number (My Twilio phone number) from the account info section to add it to the From field in commands.
Navigate to the account info section and click the copy icon to copy your Twilio Phone Number.
Click the Save button to save the configuration and complete the setup of the Twilio datasource. On successful configuration, you’ll be navigated to the datasources screen.
{% hint style="info" %} You’ll have to ensure that your Twilio account has a Messaging Service setup. {% endhint %}
If you are using a Twilio trial account, you can only add the Verified Caller IDs in the destination phone number (To) field.
{% hint style="warning" %} Read more on how to work with your Free Twilio Account. {% endhint %}
You can add a verified caller to your Twilio account. Navigate to Twilio Account >> Click on Develop tab >> Click #Phone Numbers section >> Click Verified Caller IDs >> Click Add a new Caller ID button to add a new Verified Caller ID.
You can add queries to the Twilio datasource by selecting the New API + button next to the datasource. You can also navigate to Explorer >> Click plus (+) sign next to Queries/JS >> Select the datasource name (TwilioAppsmithIntegration).
{% hint style="info" %} You’ll have to add your Twilio Account SID to every command, so keep it handy. {% endhint %}
You can use the Query tab to define the type of commands you want to execute.
With the help of Commands, you can choose the type of action you want to perform with Twilio integration. Following is the list of available commands:
| Command | Description |
|---|---|
| Create Message | Send a new message with Create Message command. |
| Schedule Message | Schedule a message delivery with the Schedule Message command at a specified date and time. |
| List Message | Read messages sent by the given number with the List Message command. |
| Fetch Message | Read a message with the Fetch Message command. |
| Delete Message | Delete the given message using the Delete Message command. |
| Update Message | Update or cancel the scheduled message using the Update Message command. |
You can use the create message command when you want to send a message.
To create a message, you can set the below parameter values:
- Twilio Account SID - Add your Twilio Account SID to this field.
- To - Add the phone number to which you want to send the message.
{% hint style="info" %} The destination phone number (To) and your Twilio Phone number (From) should follow the E.164 format. {% endhint %}
- From - Add your Twilio phone number to this field.
{% hint style="info" %} You can get your Twilio phone number from the account info section. Copy My Twilio phone number to add to the Twilio Phone Number field. {% endhint %}
- Body - Add the message text you want to send to this field.
You can also read the widget values selected by the users for the above fields in the Create Message Command. For example, if you want to bind a text widget value that captures the message content, you can read the value as
<WIDGET_NAME.TEXT>and add it to Create Message >> Body.
{% hint style="warning" %} You can change the Query settings by clicking the settings tab. {% endhint %}
You can use the Schedule Message command to configure a message delivery in the future.
To schedule a message, you can set the below parameter values:
- Twilio Account SID - Add your Twilio Account SID to this field.
- Messaging Service SID - Add your Twilio registered message service SID to this field.
{% hint style="info" %} You can get the Message Service SID from the Twilio Develop Console. {% endhint %}
To get the Message Service SID, navigate to your Twilio account >> Select the Develop Tab >> Expand the Messaging head >> Click on Services. You can copy the existing service SID, or If you don’t have a messaging service configured, you can click the Create Messaging Service button to create one.
- To - Add the phone number to which you want to send the message.
{% hint style="info" %} The destination phone number (To) should follow the E.164 format. {% endhint %}
- Body - Add the message text that you want to send to this field
- Send At - Add the date and timestamp you want to schedule the message delivery. The data and timestamp should follow the format ISO 8601 format.
{% hint style="warning" %}
Please supply the date and timestamp for the Send At in the UTC.
{% endhint %}
You can also read the widget values selected by the users for the above fields in the Create Message Command. For example, if you want to bind a text widget value that captures the message content, you can read the value as
<WIDGET_NAME.TEXT>and add it to Create Message >> Body.
{% hint style="warning" %} The schedule data and timestamp should follow the Time range limitations for scheduled messages as defined on Twilio Site. {% endhint %}
By default, the Twilio Schedule Message uses the UTC. You can change the timezone from your Twilio account’s User Settings.
{% hint style="info" %} Call an update message command with the status selected as “Canceled” to Cancel a scheduled message delivery. {% endhint %}
You can use the List Message command to view all the messages sent by using a specified Twilio Phone Number.
For listing messages, you can set parameter values as below:
- To - Add the phone number to which you want to send the message.
{% hint style="info" %} The destination phone number (To) and your Twilio Phone number (From) should follow the E.164 format. {% endhint %}
- From - Add your Twilio phone number to this field.
{% hint style="info" %} You can get your Twilio phone number from the account info section. Copy My Twilio phone number to add to the Twilio Phone Number field. {% endhint %}
- DateSent - Supply the date for which you want to view sent messages. The date should follow a YYYY-MM-DD format.
- PageSize - Give the maximum number of records you wish to pull per page.
- Twilio Account SID - Add your Twilio Account SID to this field.
{% hint style="info" %}
You can read the response of the List message command by using <QUERY_NAME.data.messages>
{% endhint %}
You can use the Fetch Message command to read a sent message. **** To read a sent message, you can set the below parameter values:
- Twilio Account SID - Add your Twilio Account SID to this field.
- Message SID - Add the Message SID for the message you want to read.
{% hint style="info" %} You can get the Message SID from List Message Command or when you create a message using Create Message command. {% endhint %}
You can read the Message SID in the create message response (sid) as shown below:
{
"sid": "SM2a93468381134d92aa07342322bf3a82",
"date_created": "Fri, 29 Jul 2022 07:12:42 +0000",
"date_updated": "Fri, 29 Jul 2022 07:12:42 +0000",
.
.
.
"body": "Sent from your Twilio trial account - A Create message triggered",
"status": "queued",
.
.
}
}
You can use the Delete Message command to delete the delivered message. To delete a delivered message, you can set up the parameter values below:
- Twilio Account SID - Add your Twilio Account SID to this field.
- Message SID - Add the Message SID for the message you want to read.
{% hint style="info" %} You can get the Message SID from List Message Command or when you create a message using Create Message command. {% endhint %}
You can use the Update Message command to update/cancel a scheduled message. For updating or canceling a scheduled message, supply the parameter values as below:
- Twilio Account SID - Add your Twilio Account SID to this field.
- Message SID - Add the Message SID for the message you want to read.
{% hint style="info" %} You can get the Message SID from List Message Command or when you create a message using Create Message command. {% endhint %}
- Body - Add the updated message text to this field
- Status - Only select canceled status if you wish to cancel the delivery of a scheduled message
{% hint style="warning" %} You can change the Query settings for all the queries by clicking the settings tab. {% endhint %}
You can use the above commands to send a text or a WhatsApp message. For a WhatsApp integration, add the keyword whatsapp: in the To and From fields in the commands. You can read more about using Twilio phone numbers with WhatsApp.
With Twilio Appsmith integration, you can build an easy and intuitive interface to enhance your customer engagement.