twilio-client.js allows you to add real-time voice and PSTN calling to your web apps.

• API Docs
• More Docs
• Quickstart
• Changelog

If you need technical support, contact [email protected].

We recommend using npm to add the Client SDK as a dependency.

npm install twilio-client --save

Using this method, you can import twilio-client.js using ES Module or TypeScript syntax:

import { Device } from 'twilio-client';

Or using CommonJS:

const Device = require('twilio-client').Device;

Though not recommended, releases of twilio-client.js are also hosted on a CDN and you can include these directly in your web app using a <script> tag.

<script src="https://sdk.twilio.com/js/client/v1.14/twilio.js"></script>

Using this method, twilio-client.js will set a browser global:

const Device = Twilio.Device;

Running unit tests requires no setup aside from installation (above). You can run unit tests via:

npm run test:unit

Integration tests require some set up:

1. If the account you want to use doesn't already have a TwiML app set up, create one using the TwiML code below.
2. Copy config.example.yaml to config.yaml, replacing the placeholder information with valid credentials.

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Dial>
    <Client>
      <Identity>{{To}}</Identity>
      <Parameter name="duplicate" value="12345" />
      <Parameter name="duplicate" value="123456" />
      <Parameter name="custom + param" value="我不吃蛋" />
      <Parameter name="foobar" value="some + value" />
      <Parameter name="custom1" value="{{Custom1}}" />
      <Parameter name="custom2" value="{{Custom2}}" />
      <Parameter name="custom3" value="{{Custom3}}" />
    </Client>
  </Dial>
</Response>

Integration tests can be run via:

npm run test:integration

These tests will run via karma, one at a time, in your system's default Chrome and then Firefox.

Use the following policy directives to enable CSP that is compatible with twilio-client.js.

script-src https://media.twiliocdn.com https://sdk.twilio.com
media-src mediastream https://media.twiliocdn.com https://sdk.twilio.com
connect-src https://eventgw.twilio.com wss://chunderw-vpc-gll.twilio.com https://media.twiliocdn.com https://sdk.twilio.com

If you are providing a non-default value for Device.Options.edge or Device.Options.region parameter, you need to add the Signaling URI wss://chunderw-vpc-gll-{regionId}.twilio.com in your connect-src directive where regionId is the Region ID as defined in this page. See examples below.

If Device.Options.region is us1

connect-src https://eventgw.twilio.com https://media.twiliocdn.com https://sdk.twilio.com wss://chunderw-vpc-gll-us1.twilio.com

If Device.Options.edge is ashburn

connect-src https://eventgw.twilio.com https://media.twiliocdn.com https://sdk.twilio.com wss://chunderw-vpc-gll-us1.twilio.com

If Device.Options.edge is ['ashburn', 'sydney', 'roaming']

connect-src https://eventgw.twilio.com https://media.twiliocdn.com https://sdk.twilio.com wss://chunderw-vpc-gll-us1.twilio.com wss://chunderw-vpc-gll-au1.twilio.com wss://chunderw-vpc-gll.twilio.com

See LICENSE.md