Hello Tech

AutoReserve 等を開発する株式会社ハローのテックブログです。スタートアップの最前線から本質的な価値を届けるための技術を紹介します。

Twilio Flex による多言語コールセンターシステム構築

uiu です。

株式会社ハローでは AutoReserve を運営していますが、サービスの裏側で飲食店やユーザーのサポートのためコールセンターを運用しています。直近では日本語だけでなく英語等多言語でのカスタマーサポートを提供しています。

昨年、カスタマーサポートが利用するコールシステムを、外部のIP電話サービス(MiiTel) から Twilio Flex を使った内製のコールセンターシステムに切り替えました。

Twilio Flex 製システムを運営し始めてから半年以上経つなかで、カスタマイズの知見などが見えてきたので、今回紹介しようと思います。

背景

カスタマーサポートではIP電話サービスを利用していましたが、当時以下のような課題がありました。

  • サポートの品質向上のため、ダッシュボードでの可視化や分析をしたいができることが限られていた
  • 社内CRMとの連携や自動化をしたいがカスタマイズ性や拡張性が限られていた
  • 将来的に、受電時等に日本語だけでなく英語など多言語に対応できるようにしたいが、そのための機能が不足していた

外部IP電話サービスの契約更新タイミングがあったため、そのタイミングでTwilio Flex を使って社内コールセンターシステムを構築することに踏み切りました。

Twilio Flex を選んだのは以下のような理由でした:

  • ダッシュボードでの分析・可視化など、サポート品質改善のために必要な機能がビルトインで揃っている
  • React でプログラマブルに拡張ができ、API連携することにより細かい部分までカスタマイズできる
  • サービス側ですでに Twilio を活用しており、サービスの挙動との連携が比較的簡単だった

Twilio Flex とは

Twilio Flex はコンタクトセンターシステムです。社内では音声での電話通話でのみ利用しています。

Webブラウザ上で使える架電や受電をするIP電話の機能に加えて、リアルタイムにメンバーの稼働状況を可視化するためのダッシュボード機能などが統合されています。

エンジニア目線での最大の特徴は、React を使ってダッシュボードを拡張できて、大部分の要素がプログラマブルにカスタマイズできる、という点です。

Twilio Flex は Programmable Voice, TaskRouter, Twilio Studio といった Twilio が提供している技術要素、API群から構成されており、ほぼすべてがAPI経由でアクセス可能になっています。

ほぼすべてがAPIの形で提供されていて、やろうと思えばどの要素もカスタマイズ可能なので、コールシステム界のAWSといって過言ではないと思います。

カスタマイズに使う React 環境はモダンな開発環境で、Webフロントエンドの現場で React を書いているエンジニアにとっては馴染みやすい開発環境だと思います。

たとえば、Flex Plugin は以下のようなディレクトリ構造の npm package になっており、Plugin 開発時に使う @twilio/flex-ui 等のライブラリも npm package として提供されています。

カスタマイズ

デフォルト設定だけでも Twilio Flex は十分使えるサービスですが、社内でカスタマイズをすることで使い勝手を大幅に改善することができます。

開発してカスタマイズしている内容について紹介します。

プラグインによるCRM連携

社内CRMを連携して Twilio Flex 内に表示するためにプラグインを開発しました。

以下のような機能を実装しています

  • 架電・受電時に、CRMビューに社内CRMを自動的に表示する
  • 通話時に dual channel で録音する
  • 着信時に呼び出し音を再生する
  • 通話時にサービスDBに通話ログを作成する

いくつかピックアップして詳しく説明します。

CRMを自動的に表示する

架電・受電時に作業内容の対応するCRMの画面を自動的に表示する機能を実装しています。

以前は、問い合わせや電話番号に応じてCRMを手で検索する作業が必要でしたが、自動的に表示されることでその手間を削減できるようになりました。

別ドメインで立てている管理画面を iframe で Flex 内に埋め込む仕組みですが、違和感少なく使えています。

左側が Flex のデフォルト画面で、右側がプラグインで表示している社内管理画面です。

着信時に呼び出し音を再生する

デフォルトでは着信時に呼び出し音が鳴らず、ブラウザの別タブで作業していると着信に気づかない可能性があります。

そのため、着信時にピロピロした音を再生するようにしています。以下記事で書かれている方法と同じですが、Flex plugin 内にJSで着信時に発生するイベントにイベントハンドラーを立てることで実装しています。

FlexプラグインTips(着信時に音を鳴らす) - Qiita

Studio Flow によるノーコード拡張

受電時の挙動をノーコードでも拡張できるのは大きなメリットです。

Studio Flow で様々な条件に応じた分岐をノーコードでポチポチするだけで実装できます。

営業時間外でのメッセージ読み上げ、受電時のSlack通知、言語別のルーティングなどを実装しています。

ドキュメントなどではコードを書いて実現されていることも、工夫すれば Studio Flow で簡単に実装できることもありました。

たとえば、営業時間外の判定では現在時刻の時間部分を取り出し、時差を計算した上で営業時刻の範囲と match するかどうか判定することで分岐を実装できます。

Slack の通知も HTTP Request ウィジェットを使い、incoming webhook URLを設定すればコードを書くことなく実装できます。

TaskRouter による多言語コールセンター化

TaskRouter を組み合わせると、電話をスキルに応じてメンバーに振り分け・ルーティングすることができます。

メンバーに言語スキル(例: 日本語 → ja, 英語 → en )を振り、呼び出し元の電話番号等の情報から対応言語を判断することで、自動的に多言語での対応が可能なコールセンターを実現しています。

TaskRouter の全体像はやや理解に時間がかかる面もありますが、以下の記事を参照すればわかるようにはなると思います:

Twilio Flexの始め方(TaskRouter基礎編) - Qiita

設定操作はAWSやGCPのコンソールをポチポチするような感覚に近いです。

開発 tips

ドキュメント

1点、最初困った点を挙げるなら、公式ドキュメントがわかりやすくはないという点です。

TaskRouter など Flex の構成要素を1つ1つ理解しないと全体像が掴めなかったり、Flex plugin を作る際の API の使い方が十分にドキュメント化されてなかったりして、最初の開発作業では戸惑うことが多かったです。

一般的な開発の際には推奨しませんが、Flex での開発の際には Twilioエバンジェリストの方などが書いている Qiita の記事を読むことをおすすめします。時間を大幅に節約できます。

qiita.com

その他

Twilio Flex はバージョンのアップデートを自分たちで管理できるようになっていますが、早く改善を取り込みたいため自動アップデートをONにしています。

開発時には Dev Phone が便利でした。ローカル開発環境のブラウザから電話をかけることができるので、検証・デバッグ時に便利です。電話料金も自前の携帯電話からかけるのと比べて安いです。

導入効果

当初サポートメンバーがスムーズに利用できるかどうか不安でしたが、大きな問題なく日々利用してもらえています。

ダッシュボードでの可視化・リアルタイムでの稼働状況可視化は特にメリットが大きかったです。これまでできなかった細やかな品質向上に取り組むことができていると感じています。サポートメンバーがリモートで働いている環境では特に大きく活用できると思います。

分析画面は以下のように見れます (公式ドキュメントから引用したスクリーンショット)

見ている指標

サポート品質担保・改善のため、見ている指標・メトリクスは多数ありますが、社内で活用している代表的な指標をピックアップすると以下になります:

  • Wrap up Time - 電話対応後のCRMでの処理時間の Agent(メンバー)ごとの平均時間
  • 架電数 - Agent ごとの架電数

たとえば、Wrap up Time が小さすぎる場合は作業が早いですがちゃんと登録作業を行えてない可能性があります。あくまで数字なので、実際の対応内容も合わせてチェックすることで適切なフィードバックができるようにしています。

その他のコールセンター指標やKPIに関しては以下の記事にも書いてあります:

21+ Call Center Metrics to Track | Twilio

まとめ

今回は Twilio Flex を活用して社内でコールセンターシステムを開発運用している話を紹介しました。

フルリモートでコールセンターを運用しているため、対応品質をチェックしたり、しっかり稼働しているかの確認をする上でレポートは必要不可欠な機能です。良い人が正しく評価されるためにも Flex を活用し、細かいデータが出せることは大変ありがたいと感じています。

Web サービスの表側から見えにくい部分だからこそ、サポートは重要だと考えています。今後も品質向上を技術で支援するために、カスタマイズや連携等の開発を進めていきたいと思っています。

また、導入や運用にあたっては Twilio や KDDI Web Communications の皆さんにサポートして頂きました。ありがとうございました。

ハローではサービスを良くするためにあらゆる技術を尽くすエンジニアを募集しています。

hello.ai