This template is part of Twilio CodeExchange. If you encounter any issues with this code, please open an issue at github.com/twilio-labs/code-exchange/issues.
Twilio Client allows your users to make and receive phone calls in their browsers. This application will show you the front-end and backend code necessary to make browser-to-phone and browser-to-browser calls with Twilio Client and Ruby on Rails.
Implementations in other languages:
.NET | Java | Python | PHP | Node |
---|---|---|---|---|
Done | Done | Done | Done | Done |
This application should give you a ready-made starting point for writing your own application. Before we begin, we need to collect all the config values we need to run the application:
Config Value | Description |
---|---|
TWILIO_ACCOUNT_SID | Your primary Twilio account identifier - find this in the Console. |
TWILIO_PHONE_NUMBER | A Twilio phone number in E.164 format - you can get one here |
TWIML_APPLICATION_SID | The TwiML application with a voice URL configured to access your server running this app - create one in the console here and use its Sid . Also, you will need to configure the Voice "REQUEST URL" on the TwiML app once you've got your server up and running. |
TWILIO_API_KEY / TWILIO_API_SECRET | Your REST API Key information needed to create an Access Token - create one here. |
This project is configured to use a TwiML App, which allows us to easily set the voice URLs for all Twilio phone numbers we purchase in this app.
Create a new TwiML app at https://www.twilio.com/console/voice/twiml/apps and use its Sid
as the TWIML_APPLICATION_SID
environment variable wherever you run this app.
See the end of the "Local development" section for details on the exact URL to use in your TwiML app.
-
First clone this repository and
cd
into it.git clone [email protected]:TwilioDevEd/browser-calls-rails.git cd browser-calls-rails
-
Install the dependencies.
make install
-
Copy the sample configuration file and edit it to match your configuration.
cp .env.example .env
See Twilio Account Settings to locate the necessary environment variables.
-
Create database and run migrations.
make setup-serve
-
Run the server, will run on port 3000.
make serve
-
Expose your application to the wider internet using ngrok. This step is important because the application won't work as expected if you run it through localhost.
ngrok http 3000
-
Once you have started ngrok, update your TwiML app's Voice URL setting to use your ngrok hostname, so it will look something like this:
http://<your-ngrok-subdomain>.ngrok.io/call/connect
You can read this blog post for more details on how to use ngrok.
-
Everything is setup, now you can open two tabs in the browser to test the application.
-
To create a support ticket go to the
home
page. On this page you could fill some fields and create a ticket or you can call to support: http://localhost:3000 -
To respond to support tickets go to the
dashboard
page (you should open two windows or tabs). On this page you could call customers and answers phone calls: http://localhost:3000/dashboard
-
That's it!
If you have Docker already installed on your machine, you can use our docker-compose.yml
to setup your project.
- Make sure you have the project cloned.
- Setup the
.env
file as outlined in the Local Development steps. - Run
docker-compose up
. - Follow the steps in Local Development on how to expose your port to Twilio using a tool like ngrok and configure the remaining parts of your application.
You can run the tests locally by typing:
bundle exec rspec
- The CodeExchange repository can be found here.
This template is open source and welcomes contributions. All contributions are subject to our Code of Conduct.
No warranty expressed or implied. Software is as is.