Voice JavaScript SDK: Reference Components

While the quickstarts enable you to quickly set up a functional application for making and receiving phone calls via a web browser in just a few minutes, the reference components offer flexible building blocks for your Twilio Voice applications. Designed around common Twilio Voice use cases, these components leverage Web Components to showcase integrated backend and frontend implementations. You can easily incorporate these components into your application or use them as a foundation for your development needs.

Before proceeding, take a moment to explore how the JavaScript SDK works and review the getting started page to familiarize yourself with key concepts.

• Use cases
• Installation
• Running locally

The reference components demonstrate several common Twilio Voice use cases. For detailed implementation guidance, visit the Twilio Voice JavaScript Reference Components repository. These use cases include:

• Dialer Component
  • Make outgoing calls
  • Receive incoming calls
• Basic Call Control Component (leveraging Conference)
  • Perform cold and warm transfers
  • Add or remove participants from a call
  • Hold and Resume a call
  • Mute and Unmute a call
• Monitoring calls (leveraging Conference)
  • Callee call progress
  • Conference call status
  • Quality metrics
  • Warnings
  • Errors

1. Clone the Twilio Voice JavaScript Reference Components GitHub repository.

git clone https://github.com/twilio/twilio-voice-js-reference-components.git

2. Create a .env file and initialize the following environment variables under the twilio-voice-js-reference-components folder. Go through the quickstarts for more information about these variables.

1
# Port number to run the server on
2
PORT=3030
3

4
# Twilio account sid
5
ACCOUNT_SID=ACxxxxxxxxxxxxxx
6

7
# Twilio API key
8
API_KEY_SID=SKxxxxxxxxxxxxxx
9

10
# Twilio API secret
11
API_KEY_SECRET=xxxxxxxxxxxxxx
12

13
# Twilio TwiML App sid where the Voice Request URL is set to
14
# https://yourdomain/twilio-voice-dialer/twiml
15
APP_SID=APxxxxxxxxxxxxxx
16

17
# Twilio auth token
18
AUTH_TOKEN=xxxxxxxxxxxxxx
19

20
# Caller ID
21
CALLER_ID=+11234567890
22

23
# Callback base URL
24
CALLBACK_BASE_URL=https://foo.ngrok.dev
25

26
# Default identity to use
27
DEFAULT_IDENTITY=alice

3. Install the dependencies.

npm install

1. Start the local server under the twilio-voice-js-reference-components folder.

npm start

2. Access the following components under the following urls.

• Dialer related components, access http://localhost:3030/twilio-voice-dialer?identity=bob.
• Call control related components, access http://localhost:3030/twilio-voice-basic-call-control?identity=bob.
• Monitoring related components, access http://localhost:3030/twilio-voice-monitoring?identity=bob.