Salesforce×Twilioでコールセンターを構築する

はじめに

こんにちは。鍬田です。

今回はTwilioとSalesforceを組み合わせてコールセンターを構築してみたいと思います。皆様の会社ではコールセンターを設置していますか？

コールセンターの役割は営業、受注、アフターサポートなど多岐に渡りますが、いずれも直接顧客とコンタクトする重要なチャネルとなっている事でしょう。

また、顧客データベースと共に、過去の営業活動や応対履歴を記録しておく事で、応対品質の向上が期待できます。
しかし、このようなシステムの構築はPBX設置や回線工事などを伴い気軽に試すにはハードルが高いものでした。
TwilioはPBXや回線をサービスとして提供しているので、一般的なWeb関連のスキルがあれば連携を行う事が出来ます。

今回は顧客管理システムと音声基盤の連携を受電機能に絞って紹介します。手順は以下の通りです。

Twilioアカウント取得
Heroku上にソフトフォン＆Webfookを作成
Salesforceにコールセンターの定義を設定

通話機器はブラウザフォンを使用します。

Twilioとは？

開発者向けのプラットフォームでTwilioのAPIを使用する事で、コミュニケーション手段を拡張できます。

電話/SMS/ビデオ/チャットなど対応可能なインターフェイスは多岐に渡ります。電話機能としてIVR、通話録音用のAPIもあります。

個人的には、各種言語用ドキュメントや簡潔なAPIも整備され、さらにはSalesforce向けのSDKまである部分がとてもよい印象です。

１．Twilioアカウント取得

Twillioログインページからトライアルアカウントを取得します。

※無料サインアップ > 自身の情報を入力

Twilioアカウント取得後に以下の手順で進みます。

ホーム > ダッシュボードから「ACCOUNT SID」「AUTH TOKEN」を取得します。その後に、画面下部の「# 電話番号」を押します。

最初のTwilio電話番号を取得ボタンを押下して、Twilioから電話番号を取得します。

番号を取得したら電話が着信した時の設定を行います。「+81 50～」から始まる電話番号をクリックします。

SIDを取得し、「A CALL COMES IN」にこれからHerokuで構築するエンドポイントを設定します。

※「MY_APP」にはHerokuのアプリ名が入ります。

２．Heroku上にソフトフォン＆Webfookを作成

Twilioからの着信イベントを受け取るために、Twilioからアクセス可能なエンドポイントの設置が必要となります。

今回はHeroku上にエンドポイントを作成します。使用したソースコードはこちらをご覧ください。

Node.jsでexpressのテンプレートを使用してサクっとサーバを立ち上げます。

主な実行環境やバージョンは以下の通りです。

node.js：4.2.3
npm：2.14.0
express：4.13.1
twilio：2.9.1
salesforce-ux/design-system：2.0.2
Chrome：59.0

★注意

今回は着信確認のプログラムである為、実用にはセキュリティ面や複数人で使用する場合のケアが必要です。

Herokuへのアプリのデプロイ方法は割愛しますが、10分で分かる！使える！Force.com Canvasが参考になります。

ポイントとなるコードを解説します。

IVRの設定

No1.で設定したWebfookを作成します。今回はTwilioで電話の着信イベントが発生時に call/recieve にPOSTリクエストの送信設定をしました。

まずは、IVR（自動音声応答）の定義する為のTwiMLの作成を行います。

TwiMLとは？

ユーザーの Twilio 番号に音声通話や SMS が着信すると、Twilio はこの Twilio 番号に関連付けられた URL を検索し、この URL 宛にリクエストを送信します。 Twilio はこの URL で TwiML の命令を読み込み、通話を録音する、メッセージを再生する、キーパッドで数字をダイヤルするようアナウンスを流すなど、次の動作を判断します。

たとえば、次のサンプルでは短いアナウンスを流した後、発信者の声を録音します。
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say voice="woman">Please leave a message after the tone.</Say>
<Record maxLength="20" />
</Response>
TwiML は HTML とよく似ています。一度に1つの TwiML 文書だけが実行されますが、TwiML 文書を複数リンクさせれば、複雑な音声処理アプリケーションを作ることができます。

Twilio 番号からその他の番号への発信通話も、着信通話と同じように、TwiML を用いて制御します。発信通話の最初の URL は、Twilio REST API リクエストのパラメーターとして渡されます。

call.js -> call/recieve

/** IVRに誘導 **/
router.post('/recieve',twilio.webhook({validate: false}), function(req, res, next) {
var twiml = new twilio.TwimlResponse();
var actionUrl = process.env.APP_BASE_URL + '/call/recieve/select_menu';
//チャネル名
var clientDialer = function(dial) {
dial.client("support_agent");
};
var opt = {
voice: 'woman',
language: 'ja-jp' //日本語
};
//自動音声ガイダンスの設定
twiml.say('こちらは、テラスコです。', opt)
.gather({
action: actionUrl,
method: 'GET',
timeout:20
},function () {
this.say('請求に関するお問い合わせは1番を',opt)
.say('オペレータと通話を希望されるかたは2番を',opt)
.say('その他のお問い合わせは3番を',opt)
.say('入力後シャープを押してください',opt)
});
//TwiMLをtwilioに送信する
res.send(twiml.toString());
});

なんと、日本語も解釈して読み上げてくれます！

call/recieve/select_menu でIVR（自動音声応答）の選択結果に応じたTwiMLを返します。

call.js -> call/recieve/select_menu

/**IVR 選択判定結果処理**/
router.get('/recieve/select_menu',function(req, res, next) {
var pushNumber = req.query.Digits;
var twiml = new twilio.TwimlResponse();
var opt = {
voice: 'woman',
language: 'ja-jp'
};
var clientDialer = function(dial) {
dial.client("support_agent");
}
if(pushNumber === "1"){
twiml.say('おてすうですが、請求書に関しては03,00,00,00,00へお掛け直しください', opt);
}
if(pushNumber === "2"){
twiml.dial({
callerId : convertJpPhoneFormat(req.query.From),
record: true
}, clientDialer);
}
if(pushNumber === "3"){
twiml.say('その他のお問合せに関しては現在使われておりません。もう一度お掛け直しください。', opt);
}
res.send(twiml.toString());
});

call.js -> call/create_token ではチャネル名や認証情報を設定しています。

var appSid = process.env.TERRA_CALL_CENTER_SID;
var accountSid = process.env.TWILIO_ACCOUNT_SID;
var authToken = process.env.TWILIO_AUTH_TOKEN;
var twillioPhoneNum = process.env.TWILIO_PHONE_NUMBER;
var capability = new twilio.Capability(accountSid, authToken);

capability.allowClientOutgoing(appSid);
capability.allowClientIncoming("support_agent");

var token = capability.generate(600);
router.post('/', function(req, res, next) {
res.writeHead(200, {'content-type': 'text/json' });
res.end(JSON.stringify({ token : token}) );
});

Herokuで環境変数の設定を行います。

Personal App > 今回作成したアプリ名 > Settings > Reveal Config Var

TWILIO_ACCOUNT_SID：＜TwilioのACCOUNT_SID＞
TWILIO_AUTH_TOKEN：＜TwilioのAUTH_TOKEN＞
TERRA_CALL_CENTER_SID：＜Twilioの電話番号設定画面から取得したSID＞
TWILIO_PHONE_NUMBER：＜※Twilioで取得した050～の電話番号＞
APP_BASE_URL：＜今回作成したWebfookのルートURL＞

※電話番号が「050-1234-5678」の場合は、「+815012345678 」を設定

ソフトフォンの作成

HTML、CSS、Javascriptだけで作れます。デザインの部分はLighting-Design-Systemを使用しています。

試しにソフトフォンを用意してみました。

phone.ejs

３．Salesforceにコールセンターの定義を設定

コールセンターの定義

コールセンターの定義用にXMLを作成します。

ポイントは「item sortOrder="02"」のノードにソフトフォンのURLを設定している部分です。

<callCenter>
<section sortOrder="0" name="reqGeneralInfo" label="General Information">
<item sortOrder="0" name="reqInternalName" label="InternalName">DemoOpenCTI</item>
<item sortOrder="1" name="reqDisplayName" label="Display Name">　テラコールセンターデモ</item>
<item sortOrder="2" name="reqAdapterUrl" label="CTI Adapter URL">https://<MY_APP>.herokuapp.com/phone</item>
<item sortOrder="3" name="reqUseApi" label="Use CTI API">true</item>
<item sortOrder="4" name="reqSoftphoneHeight" label="Softphone Height">300</item>
<item sortOrder="5" name="reqSoftphoneWidth" label="Softphone Width">500</item>
</section>
</callCenter>

コールセンターのSalesforceの設定については、"おしえて！OpenCTIアダプタ設定"にも記載があるので参考にしてください。

Salesforceの画面を確認

ソフトフォンがサイドバーに表示されているか確認します。

受電テスト

電話機からTwilioで取得した電話番号にcallしてみます。

ピッポッパッ.........トゥルルル.....掛かりました！!

音声ガイダンスに従い、電話機の「２」をプッシュします。

着信成功です！受信ボタンを押下してみます。

interaction.jsのsforce.interaction.searchAndScreenPop() を使用して

受信ボタン押下時に、電話番号で検索し詳細画面に飛ばしています。

発信機能もまた機会があれば紹介したいと思います。

おわりに

TwilioとSalesforceというクラウドサービスを掛け合わせる事で、時間と労力を抑え顧客管理システムと連携した受電機能をスピーディに構築できました。

クラウドの化学反応の一端をお見せできたかと思います。