/ctc-poc

Primary LanguageJavaScriptMIT LicenseMIT

Twilio

Click-To-Call

This repository demonstrates some of the possible capabilities of Twilio while building a Click-To-Call feature.

Getting Started

see package.json for current version of node/npm.

  • Copy .example.env to .env and change values
  • npm install
  • node app.js

Resources

Logging

Use console.log(message) throughout the application

heroku logs -a ctc-poc -t

Configuration

Setting Your Environment Variables

Are you using a bash shell? Use echo $SHELL to find out. For a bash shell, using the Gmail example, edit the ~/.bashrc or ~/.bashprofile file and add:

export TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxx
export TWILIO_AUTH_TOKEN=yyyyyyyyyyyyyyyyy
export TWILIO_NUMBER=+15556667777

Are you using Windows or Linux? You can learn more about how to set variables here.

Development

Getting your local environment setup to work with this app is easy. After you configure your app with the steps above use this guide to get it going locally.

  1. Install the dependencies.
npm install
  1. Launch local development webserver.
node app.js

  1. Open browser to http://localhost:3000.

  2. Tweak away on routes/index.js.

Softphone

Given some phone number connected to some TwiML Bin like:

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Say voice="woman" language="fr">Chapeau!</Say>
	<Dial timeout="10">
      <Client>directdial</Client>
	</Dial>
   <Say voice="woman" language="fr">Chapeau! 2</Say>
</Response>

Calling the number will dial an agent named directdial.

main files:

  • routes/token.js: acquire twilio client token for softphone
  • public/agent.js: client side agent experience functionality
  • views/agent.jade: client side agent experience view

Meta

This application is a modification of an application example implementing Click To Call using Twilio created by Twilio Developer Education. No warranty expressed or implied. Software is as is.

This software is licensed under the MIT License.

For further information on the original source, please see the following resources:

REACT

following Adding React to an Existing Application

new tooling

  • react & react-dom – react itself
  • babel – copmiles all js for common compatibility
  • webpack – assembles all js & css into bundles
  • bootstrap – to look as good as the old stuff, but be bundled; build config docs

Heroku

deploy: git push -f heroku ${my_branch}:master view logs: heroku logs -a ctc-poc -t

Manual Test Procedure

preliminary checks:

  1. assert customer phone
  2. assert no incomplete tasks exist in Twilio Task Router

Test customer experience

  1. open two tabs with developer consoles:
    1. customer experience
    2. agent experience
  2. in the agent experience tab: become ready to handle callbacks
    1. login as agent
    2. ensure work activity is Idle
  3. in the customer experience tab: request callback
    1. fill out form describing issue & customer DID
    2. submit form
    3. observe confirmation of call request
  4. in the agent experience tab: handle callback
    1. observe incoming call with data from customer form
    2. observe outgoing softphone call to customer; ring … ring …
  5. observe ringing on customer phone from twilio number
    1. answer customer phone [ ] observe call recording warning
    2. make noise in customer phone [ ] observe noise from agent soft-phone
  6. in the agent experience tab
    1. observe call recording warning
    2. observe noise from customer phone
    3. make noise in agent soft-phone
  7. end call: two scenarios: customer or agent termination
    1. in agent experience: observe clear softphone

post checks

  1. observe no errors or warning from Twilio Debugger
  2. observe no errors in developer console in any open tabls