別サイトで2014/4/21に投稿した記事です。別サイト閉鎖につき、移転しました。情報が古い可能性があるので、ご注意ください。
やること
今回は、顧客の用件に応じて、番号を入力してもらって、担当するエージェントにコールを振り分けてみます。
普段、再配達や修理依頼などで、こういったシーンを経験する機会があると思います。
電話のシナリオ
- ２名のエージェントがブラウザでログインする
- 顧客がTwilio番号に電話する
- 顧客に「お問い合わせの場合は１、注文の場合は２を押してください」という番号入力アナウンスを流す
- 顧客が番号を入力する
- 顧客が「１」を押すと、エージェントの「Agent1」へ、それ以外は、「Agent2」へ電話をつなげる
- 顧客が電話を切る
Ruby on Railsで実装してみよう
前回のプロジェクトに追加していく
前回使ったプロジェクトに機能追加していきましょう。
今回から始めたい方は、 https://github.com/fuji3zpg/twilio-agent-browser のリポジトリをダウンロードしてください。
git clone git@github.com:fuji3zpg/twilio-agent-browser.git
cd twilio-agent-browser/
rails server
http://localhost:3000/call/clientで前回までの状態になるはずです。
＊ただし、まだTwilioアカウントを取得していなかったり、環境変数が設定されていないと動きません。
その場合は、第3回の手順に沿って、やってみてください。
複数人のエージェントが対応できるようにする
前回はエージェントの「Agent1」だけで対応しましたが、今回は顧客が「１」を押した場合と「２」を押した場合があるので、「Agent1」と「Agent2」のエージェントを扱うように変更します。
def client
# パラメータ"client"でクライアント名を設定する。未設定の場合は、デフォルトのエージェント名を使用する
@client_name = params[:client]
if @client_name.nil?
@client_name = default_client
end
- あるブラウザでhttp://localhost:3000/call/client?client=Agent1にブラウザでアクセスし、
- 別のブラウザでhttp://localhost:3000/call/client?client=Agent2にアクセスします。
- すると、「クライアント 'Agent1' が待機中です。」「クライアント 'Agent2' が待機中です。」とそれぞれ表示されます。
TwilMLを設定して、顧客が入力した番号を取得する
顧客が入力した番号を取得するため、call_controller.rbにcollect_digitメソッドを追加します（番号取得用のTwiML）。
Gatherメソッドで番号を取得します。
base_url = request.protocol + request.host_with_port
response = Twilio::TwiML::Response.new do |r|
# 1桁の数字を取得し（numDigits）、actionのTwiMLに渡す。タイムアウトは10秒。
r.Gather(action: base_url + '/call/receive', numDigits: 1, timeout: 10) do
r.Say('お問い合わせの場合は１、注文の場合は２を押してください', voice: 'woman', language: 'ja-JP')
end
# タイムアウト時の処理
r.Say('何も入力されませんでした', voice: 'woman', language: 'ja-JP')
r.Redirect base_url + "/call/receive"
end
render xml: response.text
end
次に、番号取得後の処理を記述するTwiML（receiveメソッド）を追加します。
def receive
response = Twilio::TwiML::Response.new do |r|
r.Dial callerId: ENV['TWILIO_CALL_FROM'] do |d|
if params[:Digits] == "1"
d.Client 'Agent1'
else
d.Client 'Agent2'
end
end
end
render xml: response.text
end
ルーティングの設定
config/routes.rb に collect_digitとreceiveメソッドへのルーティング設定をします。
post 'call/collect_digit'
post 'call/receive'
CSRFエラー対策
call_controller.rb に下記を設定します。
# collect_digitとreceiveメソッドへのCSRFチェックをオフにする。POSTメソッドを送る時に、オフにしておかないとエラーが発生する。
protect_from_forgery except: [:voice, :collect_digit, :receive]
TwiMLを試す
番号取得TwiML
curl -X POST http://localhost:3000/call/collect_digit -d ""
を実行すると、↓のような結果が返ってきます。
<Response>
<Gather action="http://localhost:3000/call/receive" numDigits="1" timeout="10">
<Say voice="woman" language="ja-JP">お問い合わせの場合は１、注文の場合は２を押してください</Say>
</Gather>
<Say voice="woman" language="ja-JP">何も入力されませんでした</Say>
<Redirect>http://localhost:3000/call/receive</Redirect>
</Response>
コール振り分け用TwiML
curl -X POST http://localhost:3000/call/receive -d ""
を実行すると、↓のような結果が返ってきます。
<Response>
<Dial callerId="+8150xxx">
<Client>Agent2</Client>
</Dial>
</Response>
電話して試す
Railsプロジェクトをインターネットのサーバ上にアップ
Twilioからアクセするできるように、Railsプロジェクトをインターネットのサーバ上にアップします。
前回の補足情報2でproxylocalを設定した方は、次のコマンドを実行すると、インターネットからアクセスできるURLが得られます。
proxylocal 3000 --host xxx
エージェント用ブラウザのURLを更新する
のように、インターネット上のURLに更新します。
Twilio番号に発信する
顧客の電話（トライアルではご自分の携帯電話）からTwilioの電話番号に電話して、エージェントのブラウザに着信させてみましょう。
手順は以下の通りです
- Twilio管理画面の「TWILIO電話番号」で、ご自分の電話番号を選んだ後、
- 「音声通話」の"Request URL"として、「 http://example.com/call/collect_digit 」と「HPPT POST」を設定
- 携帯から取得したTwilio番号に発信する
まとめ
思ったように動いたでしょうか？
今回の実装で、顧客が入力した番号を取得して、複数人のエージェントにコールを振り分けることができることができるようになりました。
一見、これでミニマムコールセンターができたように見えますが、実は重要な機能が一つ足りません。
その機能は何でしょうか。
次回はその機能を実装していきましょう。
お楽しみに！
サンプルコードのダウンロード
上記のサンプルコードは、Githubよりダウンロードできます。
https://github.com/fuji3zpg/twilio-collect-digit
参考資料
TwilioのAPIドキュメントにTwiML Gatherの技術情報があります。