Skip to content

Commit

Permalink
fixed spacing in README
Browse files Browse the repository at this point in the history
  • Loading branch information
Matthias Damm committed Dec 3, 2020
1 parent 5a9d8d3 commit 9d9ab13
Showing 1 changed file with 61 additions and 48 deletions.
109 changes: 61 additions & 48 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Twilio Contact Center Demo

Essence of a modern contact center is to serve customers on multiple channels (voice, web chat, video, email, social media, etc.), allow them to move seamlessly across channels and most importantly maintain context of the conversations.

The Twilio Contact Center demo is reference architecture for building a modern contact center. The focus of the demo is to show how to build a Twilio platform based contact center and the various backend and frontend components needed.
Expand All @@ -10,46 +11,53 @@ The Twilio Contact Center demo is reference architecture for building a modern c
This application is provided as-is. Twilio does not officially support it.

# Features
* Twilio Phone Numbers
* Twilio Programmable Voice (PSTN, Twilio WebRTC Client)
* Twilio Programmable Chat
* Twilio Programmable SMS and Facebook Messenger
* Twilio Programmable Video
* Twilio TaskRouter
* Twilio REST APIs

- Twilio Phone Numbers
- Twilio Programmable Voice (PSTN, Twilio WebRTC Client)
- Twilio Programmable Chat
- Twilio Programmable SMS and Facebook Messenger
- Twilio Programmable Video
- Twilio TaskRouter
- Twilio REST APIs

# Customer Journey Flows:

## Callback Voice Calling (PSTN):

Customer fills out online call request -> Form submitted to server -> Task on TaskRouter created -> Find available and matching agent -> Agent accepts reservation and dials customer out (PSTN) -> Connect customer to agent (WebRTC)

![Customer Journey Call Back over PSTN](contact_center_flow_call_back.png)

## Inbound Voice Calling (PSTN):

Customer calls Twilio phone number -> Twilio requests webhook -> Server generates TwiML for IVR -> Caller selects IVR option -> Task on TaskRouter created -> Find available and matching agent -> Agent accepts reservation -> Connect customer to agent (WebRTC)

![Customer Journey Inbound Call](contact_center_flow_inbound.png)

## Web Chat:

Customer fills out online web chat request form -> Form submitted to server -> Task on TaskRouter created -> Find available and matching agent -> Agent accepts reservation -> Start chat between customer and agent

![Customer Journey Chat](contact_center_flow_chat.png)

## Video Call:

Customer fills out video call request form -> Form submitted to server -> Task on TaskRouter and video room created -> Find available and matching agent -> Agent accepts reservation -> Agent joins video room

![Customer Journey Video](contact_center_flow_video.png)

## Real-time TaskRouter Events Dashboard:
Real-time display of operational contact center metrics (for example: average call handle time, agent productivity, call metrics, TaskRouter stats, and more etc.). Please check out the following repo: https://github.com/ameerbadri/twilio-taskrouter-realtime-dashboard

Real-time display of operational contact center metrics (for example: average call handle time, agent productivity, call metrics, TaskRouter stats, and more etc.). Please check out the following repo: https://github.com/ameerbadri/twilio-taskrouter-realtime-dashboard

## Pre-requisites:
* Basic knowledge of Twilio platform - [TwilioQuest](https://www.twilio.com/quest/), an interactive, self-paced game where you learn how to Twilio.
* [Twilio TaskRouter](https://www.twilio.com/docs/quickstart/ruby/taskrouter)
* [Twilio Client](https://www.twilio.com/docs/quickstart/ruby/client)
* [Twilio Programmable Chat](https://www.twilio.com/docs/api/chat)
* [Twilio Programmable Video](https://www.twilio.com/docs/api/video/getting-started)
* Working knowledge of Angular.js, Bootstrap and Node.js

- Basic knowledge of Twilio platform - [TwilioQuest](https://www.twilio.com/quest/), an interactive, self-paced game where you learn how to Twilio.
- [Twilio TaskRouter](https://www.twilio.com/docs/quickstart/ruby/taskrouter)
- [Twilio Client](https://www.twilio.com/docs/quickstart/ruby/client)
- [Twilio Programmable Chat](https://www.twilio.com/docs/api/chat)
- [Twilio Programmable Video](https://www.twilio.com/docs/api/video/getting-started)
- Working knowledge of Angular.js, Bootstrap and Node.js

# Installation

Expand All @@ -61,13 +69,13 @@ We recommend you create a separate project within Twilio and install this app us

## Configuration Variables

Before you start the install, you’ll need to collect the following variables from the Twilio Account Portal.
Before you start the install, you’ll need to collect the following variables from the Twilio Account Portal.

- `TWILIO_ACCOUNT_SID`
- `TWILIO_AUTH_TOKEN`
- `TWILIO_WORKSPACE_SID`

* For Account SID and Auth Token please click here: https://www.twilio.com/console
* For Account SID and Auth Token please click here: https://www.twilio.com/console
* Buy a phone number or use an existing one (the application will configure the number for you later)
* Create a new Twilio [TaskRouter Workspace](https://www.twilio.com/user/account/taskrouter/workspaces) and select the custom template.

Expand All @@ -84,35 +92,35 @@ For web chat you need to set Twilio Programmable Chat environment variables:

The agent UI does not support handling of multiple tasks simultaneously, hence all tasks are routed on the same task channel with capacity of one simultaneous task. For more details please check [TaskRouter Multitasking](https://www.twilio.com/docs/taskrouter/multitasking)

* For outbound calls enable AGENT CONFERENCE setting, click here: https://www.twilio.com/console/voice/conferences/settings
- For outbound calls enable AGENT CONFERENCE setting, click here: https://www.twilio.com/console/voice/conferences/settings

## Terraform Install - Heroku

You can deploy this project with all depencendies on Heroku with Terraform, an open-source infrastructure as code software tool.

Create the API key for Heroku, check the [Heroku Platform API Guide](https://devcenter.heroku.com/articles/platform-api-quickstart) for help.
Create the API key for Heroku, check the [Heroku Platform API Guide](https://devcenter.heroku.com/articles/platform-api-quickstart) for help.

Add the Heroku API key and your email address to `terraform.tfvars`.

Initialize the Terraform configuration files and run

`terraform init`
`terraform init`

If you have not installed Terraform, follow the [Terraform Getting Started](https://learn.hashicorp.com/terraform/getting-started/install.html).

Add the Twilio variables listed in section [Configuration Variables](#configuration-variables) to the `terraform.tfvars` variables file.

Set your Heroku application name in the infrastructure description file `terraform_heroku.tf`
Set your Heroku application name in the infrastructure description file `terraform_heroku.tf`

Create an execution plan

`terraform plan`
`terraform plan`

Install the project on Heroku by executing
Install the project on Heroku by executing

`terraform apply`
`terraform apply`

After the installation has completed please open `https://<your-application-name>.herokuapp.com/setup` and configure the application. The demo overview will be accessible at `https://<your-application-name>.herokuapp.com`.
After the installation has completed please open `https://<your-application-name>.herokuapp.com/setup` and configure the application. The demo overview will be accessible at `https://<your-application-name>.herokuapp.com`.

## One Click Install - Heroku

Expand Down Expand Up @@ -173,31 +181,34 @@ If you are running the demo locally please remember that Twilio needs a publical
**ngrok Setup**

- System Wide Install
- [Download and install from ngrok](https://ngrok.com/download)
- Install with NPM `npm install ngrok -g`
- Run ngrok (if PORT is defined in your .env update accordingly)

`./ngrok http 5000`


- [Download and install from ngrok](https://ngrok.com/download)
- Install with NPM `npm install ngrok -g`
- Run ngrok (if PORT is defined in your .env update accordingly)

`./ngrok http 5000`

- Project Only Install

- Install ngrok package

`npm install ngrok --dev`

- Add the following to the top of app.js

````
const ngrok = require('ngrok')
const ngrokUrl = async function () {
const url = await ngrok.connect((process.env.PORT || 5000))
console.log('ngrok url ->', url)
}
- In app.js call ngrokUrl in app.listen to log the ngrok url on server spin up
`ngrokUrl()`
- Install ngrok package

`npm install ngrok --dev`

- Add the following to the top of app.js

```
const ngrok = require('ngrok')
const ngrokUrl = async function () {
const url = await ngrok.connect((process.env.PORT || 5000))
console.log('ngrok url ->', url)
}
```
- In app.js call ngrokUrl in app.listen to log the ngrok url on server spin up
`ngrokUrl()`
**Note:** On Google Chrome a secure HTTPS connection is required to do phone calls via WebRTC. Use a tunnel that supports HTTPS such as ngrok, which can forward the traffic to your webserver.
Expand All @@ -224,8 +235,10 @@ git rebase -i HEAD^^^^^^
git push origin [YOUR BRANCH] -f
```
# Have a question?
You can follow me on Twitter - [@mdamm_de](https://twitter.com/mdamm_de)
# License
MIT

0 comments on commit 9d9ab13

Please sign in to comment.