This web-based reference app built in ReactJS and demonstrates how to leverage Twilio Programmable Voice and Twilio SDKs to create a voice notification system to make calls to your customers to deliver time-sensitive messages. This reference app can be used as a starting point, whether you are building a voice notification solution for Emergency Alerts or Sales & Marketing use cases.
Access to the source code should help you understand how to use the Twilio platform “building blocks” and Programmable Voice APIs to build an application for your own notification use case and accelerate your development.
This fully functional reference app allows you to send voice notifications to hundreds of recipients. All you need to do is specify a notification name for reference, write down the message, and upload a list of the recipients’ phone numbers in a .txt file. That’s it!
Once you broadcast the voice notification, the application will start placing outbound calls to deliver your message and listen for call updates in real-time using Twilio Voice Webhooks. Changes in call status are received asynchronously in the form of status callbacks and results are stored in the database as soon as they occur. The application is polling data from the database every 5 seconds to display progress and call updates in the UI.
For a more detailed exploration of the technology involved, please refer to the Technical Overview.
Please note that using the application will incur in charges for Programmable Voice minutes.
$ git clone email@example.com:twilio/twilio-voice-notification-app.git
$ npm install
This application uses Twilio credentials to create the Call resources. It also requires a PostgreSQL database for storing the notifications and related call data. Add the following parameters to your
.env file (use
.env.example as a reference):
PASSCODE=XXXXXX DATABASE_URL=postgres://username:password@hostname:port/dbname ACCOUNT_SID=ACXXXXXXXXXXXXXXXXXXXXXXX AUTH_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXX
$ npm start
The first time you run the app, it will create the database schemas, tables and relationships. In addition, this command will run the NodeJS server and will expose the ReactJS application via ngrok. An ngrok server is required so that Twilio can locate your server and invoke the webhooks on every call status update.
Alternatively, you can start UI and Server separately for a more granular development experience:
$ npm run start:ui
$ npm run start:server
Run unit tests locally with the following command
$ npm test
Additionally to trying out this application locally, you can deploy it to a host service. Here you have some 1-click deploy alternatives.Service Heroku
Please notice that some free plans might have limitations. We encourage you to research about the hosting services and plans before using them.
DATABASE_URLvariable in Heroku application settings and set your own PostgreSQL database connection.
This reference app requires a passcode to control the access to the application. Please note that this represents very basic protection and you should replace it with an authentication mechanism of your choice (OAuth, JWT, etc).
This project is open source and welcomes contributions. All contributions are subject to our Code of Conduct.