Twilio Flexを初めて触るところから電話受電までやってみた
こんにちは、昴です。
今回は「Twilio Flexを触ったことがない人が、検証環境で初めて電話を受けるまで」を実際にやってみました！
はじめに
Twilio Flexとは、自分たちに合わせてカスタマイズができるクラウド型のコンタクトセンター基盤です。電話だけでなく、チャットやSMSなど色んな窓口を一つの画面でまとめられるのが特徴です。
「Flexって何から始めればいいの？」という状態から、まずは最初の一歩として「自分のスマホからかけた電話を、PC上のFlex画面で受ける」というゴールを目指して動かしてみたので、その手順をまとめます。
今回は難しいコードは一切書かず、画面操作だけで完結させています。
前提・検証環境
今回試した環境や必要な準備は以下の通りです。
- TwilioアカウントでFlexが有効化されていること
- FlexのAdmin（管理者）またはAgent（エージェント）権限を持っていること
今回はすでにFlexが有効化されているアカウントに招待してもらい、そこにエージェントとして参加するところからのスタートとなります。
※Flexが有効化されていないアカウントでも、Twilioコンソールのサイドバーに「Flex」という項目自体は表示されます。ただし中に入ろうとすると下記のような画面が表示され、有効化を促される画面が出てきます。
招待済みで有効化された環境であれば下記のような画面が表示され、そのままFlexコンソールに入れます。
全体フロー図
下記が今回の全体のフロー図になります。
Flexに電話を繋ぐためには、「電話番号 → Studio Flow → TaskRouter → Flex UI」という複数の部品を経由する必要があります。今回はこの流れを1つずつ確認していくことで、Flexの全体像も掴めるようにしています。
実践
それでは、実際に設定を確認していきます。
Flexの便利なところは、有効化したタイミングで「最低限これで動くセット」が裏で自動的に作られているという点です。そのため今回のゴールである「電話を受ける」ところまでは、新しく何かを作るというよりも、すでに用意されているものを確認していく作業がメインになります。
自動で作成されているリソースを確認する
Flexを有効化すると、以下のリソースが自動で生成されます。今回の音声着信に関わるものをまとめてみました。
- Studio Flow：「Voice IVR」（音声着信の入口）
- TaskRouter Workspace：「Flex Task Assignment」（タスク振り分けの箱）
- Workflow：「Assign To Anyone」（どのQueueに流すかのルール）
- TaskQueue：「Everyone」（タスクが並ぶ待ち行列）
- Activities：Available／Unavailable／Offline／Break（エージェントのステータス）
Studio
Studio > Flowsへ移動し、Studio Flows一覧を開くと「Voice IVR」が存在していることが確認できます。構成はとてもシンプルで、Trigger（Incoming Call）から「SendCallToAgent」というSend to Flexウィジェットに繋がっているだけの2段構成です。
SendCallToAgentウィジェットをクリックして設定を見てみると、Workflowが「Assign To Anyone」に設定されていることが分かります。
※Workflowの指定はSIDを直接入力するのではなく、プルダウンから名前で選択する形式になっています。自動生成された「Assign To Anyone」がそのまま候補に並んでいるため、SIDをコピーしてくる必要はありません。
TaskRouter
続いて、TaskRouter Workspace「Flex Task Assignment」の中身も確認しておきます。
これらはすべてFlex有効化時に自動で用意されたものです。このあとの章で、これらが繋がって電話がエージェントに届く様子を見ていきます。
電話番号とVoice IVRの紐付きを確認する
続いて、電話番号がVoice IVRに紐付いていることを確認します。Phone Numbers > Manage > Active numbers へ移動し、対象の電話番号を選択します。
Voice Configuration の「A call comes in」がStudio Flowの「Voice IVR」になっていれば正しい状態です。
※プルダウンの中に「Flex」という項目は存在しません。Flexへは必ずStudio Flowを経由してタスクを渡す設計になっているため、ここは「Studio Flow」を選ぶのが正解です。私も最初ここで「Flex が選択肢にないぞ…？」と戸惑ったので、同じ場所でつまずいた方がいれば安心してください。
これで「電話番号 → Voice IVR → Send to Flex → TaskRouter（Assign To Anyone） → Everyone Queue → 空いているエージェント」という流れが出来上がっていることが確認できました。
Flex UI（エージェント画面）を開く
続いて、実際にエージェントとして電話を受ける画面「Flex UI」を開きます。コンソールのサイドバーから Flexへ移動し、「Log on with console」からFlexのコンソール画面へログインします。
ステータスをAvailableにする
次に受電の準備です。Flex UI右上のステータス表示をクリックし、プルダウンから「Available」を選択します。ステータスが緑色の「Available」に変わり、「You are ready to start receiving tasks.」と表示されれば準備完了です。この状態でTaskRouterが「この人はタスクを受け取れる状態である」と認識するようになります。
確認
それでは実際にスマホから電話をかけて、Flex UI上で受電できるかを確認していきます。
自分のスマホから、対象のTwilio電話番号に発信します。しばらくするとFlex UI上に着信タスクカードが出現し、着信音が鳴ります。
着信タスクカードには、発信者の電話番号やチャネル種別（Voice）、経過時間などが表示されます。
タスクカードの緑色のチェックボタンをクリックすると受話できます。通話中の画面では、マイクミュート・保留・転送といったボタンが下部に並んでいます。
※通話品質が悪い場合は画面上部に「Your connection is poor」という警告バナーが表示されます。Flexが通話品質をリアルタイムに監視してくれているので、オペレーターはこの警告を見て対処することができます。
通話が終わって切断すると、「LIVE」となっていた通話のステータスが「Wrap up」（後処理）に自動で切り替わります。
今回はそのまま「Complete」ボタンを押してタスクを完了します。完了すると「You are ready to start receiving tasks」と表示され、次の着信を受け付けられる状態になります。
ここまでの流れが確認できれば、Flexでのエージェントとしての基本的な受電動作は成功です。
まとめ
今回はTwilio Flexの検証環境で、自分のスマホからの電話をエージェントとして受け取るまでの一連の流れをご紹介しました。
Flexを有効化すると、Studio FlowやTaskRouter、Workflow、TaskQueueといった必要なリソースが自動で用意されるため、最初の一歩として電話を受けるだけであれば、新しく何かを作る必要はほぼありません。「電話番号 → Voice IVR → Send to Flex → TaskRouter → 自分」という流れさえ押さえておけば、裏で何が起きているかを理解しながら操作することができます。
一方で、プルダウンに「Flex」という直接の選択肢がなかったり、オーディオ設定を見落とすと電話に出られなかったりと、初めて触る人がつまずきやすいポイントもいくつかありました。本ブログがこれから触ってみる方の参考になれば嬉しいです。
告知
Twilio/SendGridセミナーを毎月開催しています
クラスメソッドでは毎月Twilio/SendGridのセミナーを実施しています。
クラスメソッドではTwilio/SendGridのセミナーを毎月開催しております。いずれもTwilio及びSendGridを良く知らない方向けに基本的な部分から解説する内容となっておりますので、今後Twilio/SendGridの導入を検討している方や、既に導入済で改めて基本的な部分を勉強したいと考える方は、是非お気軽にご参加いただければと思います。
