Twilio Integration

Collections

For this example we added a CountryCodes collection that contains country names, country calling codes, and ISO3166_1_Alpha_3  3-letter country codes. The collection populates the Country Code dropdown for selecting a country when setting your Twilio details on the site.

 

Page Elements

We added a form with 3 sections:

• Twilio settings: A dropdown for selecting the country and text inputs for setting Twilio account details.

• Make a call: 2 text inputs for the caller and recipient’s phone numbers.

• Send SMS: 2 text inputs for the recipient’s phone number and the message text.

 

Code

 

Note: For the sake of simplicity, this example's auth token and SID are entered on the client-side. To prevent exposure of private information, always store site secrets in the Secrets Manager. Then use the Secrets API to securely retrieve secrets for use in your code.

Our site code does the following:

1. Populate the Twilio settings dropdown with the countries from the collection.

2. When a site visitor clicks the Set button, validate the inputs, store the account details, and enable the Call and Send buttons.

3. When a site visitor clicks the Call button, get the Twilio account data that was set, validate the inputs, call the ‘makeCall()’ backend function, and handle success or error messages.

4. In the backend, use the ‘phone’ npm to validate the phone numbers and convert them to ISO3166 format, and use the ‘twilio’ npm to make the call.
   
   Note: The Twilio service first calls the “To” (calling) number. After answering, the server calls the “From” (recipient) number and then connects the 2 with each other.
    

5. When a site visitor clicks the Send button, get the Twilio account data that was set, validate the inputs, call the ‘sendSms()’ backend function, and handle success or error messages.

6. In the backend, use the ‘phone’ npm to validate the phone number and convert it to ISO3166 format, and use the ‘twilio’ npm to send the SMS.

 

npm packages

• phone: For validating the phone number and formatting it in the E.164 standard

• twilio: Twilio helper library