Twilio Voice JavaScript Reference Components leverages Web Components to showcase integrated backend and frontend implementations for common Twilio Voice use cases. Please visit the official developer documentation for more details.
The reference components demonstrate several common Twilio Voice use cases. These use cases include:
- Dialer
- Place outgoing calls
- Receive incoming calls
- Basic Call Control (uses Conference)
- Perform cold or warm transfers
- Add or remove participants from a call
- Hold and Resume a call
- Mute and Unmute a call
- Monitoring (uses Conference)
- Observe call progress
- Track conference call status
- View quality metrics
- Receive warnings
- View errors
- Voice AI Assistant
- Place an outbound call and connect to an agent
- Provide a Websocket server to interface with Conversation Relay
- Basic OpenAI integration
- Clone the Twilio Voice JavaScript Reference Components GitHub repository.
git clone https://github.com/twilio/twilio-voice-js-reference-components.git- Install the dependencies.
npm install- Copy
example.envto.env, then supply the required values. For details about each variable, see the quickstart.
cp example.env .env- In the Twilio Console, open your TwiML App settings and set Voice Request URL to the endpoint for the component you want to test:
https://yourdomain/twilio-voice-dialer/twiml
https://yourdomain/twilio-voice-basic-call-control/twiml
https://yourdomain/twilio-voice-monitoring/twiml
https://yourdomain/twilio-voice-ai-assistant/twiml
- Start the local server under the
twilio-voice-js-reference-componentsfolder.
npm start- Open a browser and navigate to a component URL.
- Dialer: http://localhost:3030/twilio-voice-dialer?identity=bob.
- Basic Call Control: http://localhost:3030/twilio-voice-basic-call-control?identity=bob.
- Monitoring: http://localhost:3030/twilio-voice-monitoring?identity=bob.
- Voice AI Assistant: http://localhost:3030/twilio-voice-ai-assistant?identity=bob.