Overview of integrating with Twilio

Twilio is a CTI supplier that provides programmable communication tools for making and receiving phone calls, sending and receiving text messages, and other communication functions through its web service APIs.

In this section we'll walk through the integration with Twilio with the application we built.

Note that this integration isn't a ready-to-use integration. The steps which follow will show a sample implementation based on few concepts described in Configure the Media Toolbar. This implementation isn't scaled for production use cases and can't be considered as a production ready implementation.

Before moving into the implementation, you need to have a Twilio account. If you don't have a Twilio account, you can create a trial account from Twilio's website.

We'll be using the Twilio's JavaScript SDK to handle calls from your browser. Read the information on Twilio's JavaScript SDK on their website.

Note: As a prerequisite, you'll need to set up a Twilio account.

Getting a Twilio phone number

After you've created your Twilio account, you set up a phone number using the Twilio console. This phone number can be used by your customers to call your service center.

Setup Twilio Voice SDK quickstart application

See details on the Twilio SDK, see Voice JavaScript SDK.

You'll then do the following:
  • Download and deploy the quickstart application. Follow these steps.
  • Then, you'll create a a TwiML application from your Twilio console.

Add the Twilio dependency and load the script file in the Jet application

Here's how you add a Twilio dependency to your JET application.

Install npm to Voice SDK as a dependency

Run the following command to do the install:

@twilio/voice-sdk

npm install @twilio/voice-sdk --save

Load the voice-sdk js file in index.html

  1. Add the following line of code to this file: src/js/path_mapping.json.
    "@twilio/voice-sdk": {
          "cdn": "3rdparty",
          "cwd": "node_modules/@twilio/voice-sdk/dist/",
          "debug": {
            "src": "twilio.min.js",
            "path": "libs/twilio/voice-sdk/twilio.min.js",
            "cdnPath": "twilio/voice-sdk/twilio.min.js"
          },
          "release": {
            "src": "twilio.min.js",
            "path": "libs/twilio/voice-sdk/twilio.min.js",
            "cdnPath": "twilio/voice-sdk/twilio.min.js"
          }
        }
  2. Add the script tag to load the twilio.min.js file to index.html:
    <script type="text/javascript" src="js/libs/twilio/voice-sdk/twilio.min.js"></script>