Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Twilioを使ってコンタクトセンター（コールセンター）を作ってみよう！【PR】TwilioAdvent Calendar 2021

Day 7
@mobilebiz(高橋 克己)

Twilio Flexの始め方（GoogleSpreadsheet連携編）

Last updated at Posted at 2021-12-10

2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。

はじめに

みなさん、こんにちは。
KDDIウェブコミュニケーションズの Twilioエバンジェリストの高橋です。

Twilio Flex Advent Calendar 2021 7日目の記事となります。
前回の記事では、Twilio Studioを使ったIVRの実装についてご紹介しました。その中で、ユーザーの要件を発話させ、音声認識した結果をエージェントの本来顧客名を出すところに表示する方法を紹介しましたが、今回の記事では、発信者の電話番号からGoogleSpreadsheet上に登録されている顧客名を検索し、それを顧客名として表示させてみたいと思います。

完成すると、このような形で顧客の名前が表示されるようになります。
スクリーンショット 2021-12-10 9.19.53.png

準備

本記事を実行するための準備について説明します。
すでにFlexのセットアップが完了しているものとします。

Google Spreadsheet

Google Spreadsheetに以下のような簡単な顧客リストを作成してください。
スクリーンショット 2021-12-09 12.07.27.png

一行目が項目名になります。A列を「顧客名」、B列を「電話番号」という名前にしておきます。
電話番号は、0から始まるため、そのまま登録してしまうと数値として先頭の0がカットされてしまいます。なので、0の前にシングルコーテーションをつけて、文字列として登録しておきましょう。
また、シート名（画面下側にあります）を、「sheet1」（すべて小文字+数字の１）に変更しておいてください。

シートが作成できたら、シートのURLをメモ帳に控えておきます。

Stein

今回は、GAS（Google Apps Script）ではなく、Steinというサービスを使ってデータにアクセスします。Steinは、Google Spreadsheetを簡単にAPI化してくれるサービスで、読み込みだけでなく、書き込みにも対応しています。

Steinのアカウントを、事前にこちらから作成しておいてください。
アカウントの作成が終わると、利用方法のウィザードが始まり、途中で先程控えておいた Google SpreadSheetのURLを聞かれます。

ウィザードが終了すると、以下のようにAPIが完成しています。

スクリーンショット 2021-12-09 15.10.31.png

右側の矢印を押すと、このAPIの詳細画面が表示されます。
スクリーンショット 2021-12-09 15.11.50.png

後ほど使うので、API URLをメモ帳などに控えておいてください。

顧客名を検索するプログラムを作る

では実際にSpreadsheetを検索するプログラムを作りましょう。
今回は、Twilio Functions内にコードを作成していきます。

  • Twilio管理コンソールにログインします。

  • 左側のスライドメニューからFunctionsを選択します。
    スクリーンショット 2021-12-09 15.18.32.png

  • Serviceメニューを選択し、Create Serviceボタンを押します。
    スクリーンショット 2021-12-09 15.19.57.png

  • Service Name欄に「Flex」と入力して、Nextボタンを押します。
    スクリーンショット 2021-12-09 15.21.36.png

  • Addボタンを押すと、リストメニューが開くのでAdd Functionを選択します。
    スクリーンショット 2021-12-09 15.22.46.png

  • FunctionのPathには、「get-customer」と指定をしておきます。

  • 以下のようなテンプレートプログラムが表示されます。
    スクリーンショット 2021-12-09 15.26.49.png

Dependenciesの設定

次に、SteinのJavaScriptライブラリを利用できるようにしていきます。

  • SettingsのDependenciesを選択します。
    スクリーンショット 2021-12-09 15.29.21.png

  • MODULEとVERSIONに以下の内容を指定します。

MODULE VERSION
stein-js-client 0.0.2
  • Addボタンを押します。

Environment Variablesの設定

次にSteinのAPI URLを環境変数として指定していきましょう。

  • SettingsのEnvironment Variablesを選択します。
    スクリーンショット 2021-12-09 15.32.26.png

  • KEYとVALUEを以下のように指定します。

KEY VALUE
STEIN_API Steinで払い出されたAPIのURL（https://api.steinhq.com/v1/storages/xxxxxxxxxxxxxxx）
  • Addボタンを押します。

コードを作成する

では最後に、Spreadsheetを検索するコードを作成します。

  • Functionsの中から、先程作成した「/get-customer」を選択します。
    スクリーンショット 2021-12-09 15.34.46.png

  • 右側のコード欄に書かれている既存のコードをすべて削除し、以下のコードに置き換えます。

const SteinStore = require('stein-js-client');

exports.handler = async function(context, event, callback) {
  try {
    const number = event.From.replace(/\+81/, '0'); // E.164->0ABJ
    const store = new SteinStore(context.STEIN_API);
    const data = await store.read("sheet1", { search: { '電話番号': number }});
    console.log(`data: ${data}`);
    return callback(null, data.length > 0 ? data[0]['顧客名'] : number);
  } catch(err) {
    console.error(`ERROR: ${err}`);
    return callback(err);
  }
};
  • Saveボタンを押します。
  • 続いてDeploy Allボタンを押します。デプロイにはしばらく時間がかかります。
  • 以下のように、Functionsの「/get-customer」に緑色のアイコンが表示されれば完成です。
    スクリーンショット 2021-12-09 15.43.10.png

コードの解説

  • 1行目は、SteinのJavaScriptの読み込みを行っています。先程のDependenciesで設定しておく必要があります。
  • 5行目は、電話番号の変換をしています。Twilio内では、電話番号はすべてE.164形式（日本なら+81から始まる番号）で扱われるため、シート内に設定した0ABJ（0から始まる電話番号）と一致させるために必要です。
  • 6〜7行目が、実際にSpreadsheetを検索するコードです。ここでは、シート名（sheet1）と項目名（電話番号）を指定しています。Spreadsheet側の名前が違うとうまく検索できませんので気をつけてください。
  • 9行目で検索結果を返却する準備をしています。該当するデータが存在する場合は顧客名を返し、該当するデータがない場合は0ABJの電話番号を返却するようにしています。

なお、今回はFunctionsをProtectedとして作成したため、認証情報がないと外部からこのFunctionを呼び出すことはできません。一方で、Studio内部からは認証情報がなくても呼び出しが可能です。

IVR側でFunctionsを呼び出す

では次に、IVR側から今作成したFunctionsを呼び出すようにStudioフローを作成していきましょう。

  • 管理コンソールの左側のスライドメニューから、Studioを選択します。
    スクリーンショット 2021-12-09 15.48.02.png

  • すでに作成してあるVoice IVRのDuplicate Flowをクリックして複製します。
    スクリーンショット 2021-12-09 15.50.50.png

  • Triggerウィジェットを選択し、設定パネルのFLOW NAMEを「Voice IVR Customer」に変更します。

  • Saveボタンを押します。

前回の記事通りに作業をしている方は、GetQuestionウィジェットが表示されていると思いますが、今回はこちらのウィジェットは不要なので、削除します。

  • GetQuestionウィジェットを選択します。
    スクリーンショット 2021-12-09 15.54.19.png

  • 右下のゴミ箱アイコンをクリックします。

  • 削除の確認ダイアログが表示されるので、Yesボタンを押して削除してください。

スクリーンショット 2021-12-09 15.56.15.png

  • 右側のWIDGET LIBRARYから、Run Functionウィジェットをキャンパス上にドラッグして配置します。

  • 配置したウィジェットを選択すると、設定パネルが表示されます。
    スクリーンショット 2021-12-09 17.22.03.png

  • WIDGET NAME欄に「getCustomer」と入力します。

  • SERVICEのプルダウンリストから「Flex」を選択します。

  • ENVIRONMENTのプルダウンリストから「ui」を選択します。

  • FUNCTIONのプルダウンリストから「/get-customer」を選択します。

  • FUNCTION URLは自動的に入力されます。

  • Function Parameterの右側の＋ボタンを押します。
    スクリーンショット 2021-12-09 17.37.02.png

  • 以下のように値を設定します。

KEY VALUE
From {{trigger.call.From}}
  • Saveボタンを押します。

では、それぞれのウィジェットを接続しましょう。

スクリーンショット 2021-12-09 17.26.15.png

  • TriggerウィジェットのIncoming Callと書かれた線を、getCustomerウィジェットの左上の黒丸につなげます。
  • getCustomerウィジェットのSuccessと書かれた線を、SendCallToAgentウィジェットの左上の黒丸につなげます。

では最後にTaskRouterへ受け渡す属性に、Functionsの結果を入れましょう。

  • SendCallToAgentウィジェットを選択して、設定パネルを開きます。
    スクリーンショット 2021-12-10 8.39.56.png

  • ATTRIBUTES欄を以下の内容に書き換えます。

{ "type": "inbound", "name": "{{widgets.getCustomer.body}}" }
  • Saveボタンを押します。
  • 最後に画面上部のPublishボタンを押します。
    スクリーンショット 2021-12-09 17.32.20.png

確認ダイアログが表示されるので、Publishボタンを押します。

電話番号にフローを割り当てる

では最後に、今作成したStudioフローを着信番号に割り当てましょう。

  • 管理コンソールの左側のスライドメニューから、Phone Numbersを選択します。

  • 番号の管理の中のアクティブな電話番号を選択します。

  • すでに購入済みの電話番号がリストされているはずなので、その番号を選択します。
    スクリーンショット 2021-12-10 9.09.21.png

  • Voice & Faxの設定の中にあるA CALL COMES INのプルダウンから、先程作成した「Voice IVR Customer」を選びます。

  • Saveボタンを押して、設定を保存します。

以上で設定はすべて完了です。

テスト

では早速テストをしてみましょう。
事前にGoogleSpreadsheetsに、発信する電話番号と自分の名前を入れておくことを忘れないようにしてください。
準備ができたら、Flexを起動して、エージェントを待ち受け状態にしておきます。

登録した電話機から先程のフローを割り当てた番号に電話をかけると、着信画面上に正しく名前が表示されれば成功です。
スクリーンショット 2021-12-10 8.38.31.png

もし着信しない場合は、Studio内でFunctionsの呼び出しが失敗している可能性があります。
管理コンソールからDebuggerを選択するとエラーの内容が確認できます。

まとめ

本日の記事では発信者の電話番号から顧客の名前を表示させる方法をご紹介しました。今回はGoogleSpreadsheetを利用しましたが、もしAPIが利用できるサービスであれば同様の方法で顧客を検索することが可能です。担当するオペレーターが決まっているような場合であれば、その情報をTaskRouterに引き渡すことで、直接担当者につなぐことも可能です。

次回からはいよいよTwilio Flexの中心機能であるTaskRouterについて説明していきたいと思います。

★次の記事
Twilio Flexの始め方（TaskRouter基礎編）

Twilio（トゥイリオ）とは

https://cloudapi.kddi-web.com
Twilio は音声通話、メッセージング（SMS /チャット）、ビデオなどの 様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウド API サービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。

自己紹介 　
高橋克己（Katsumi Takahashi） 自称「赤い芸人」
グローバル・インターネット・ジャパン株式会社　代表取締役
株式会社KDDIウェブコミュニケーションズ　Twilio事業部エバンジェリスト

2001年より大手通信事業者の法人サービスの教育に携わり、企業における電話のしくみや重要性を研究。2016年よりTwilio事業部にジョインし、Twilioを使ったスマートコミュニケーションの普及活動を精力的に行っている。
2015 Hall of Doers
2019 Twilio Champions
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?