メニュー

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Node.jsおよびExpressを使用したウォーム転送

別のサポート担当者に転送されるときに、サポートコールから切断された経験はありますか?

ウォーム転送がこの問題を解消します。 Twilioを活用したウォーム転送を使用すれば、コールセンターの担当者はリアルタイムで他の担当者に電話をかけることができます。

ここでは、高いレベルでどのように機能するのかについて示します。

  1. Web クライアントを通じて接続されると、最初の担当者が対応可能になります。
  2. 2 番目の担当者も、Web クライアントを通じて接続されると、対応可能になります。
  3. クライアントがサポートラインに電話をかけます。
  4. クライアントは、最初の担当者が電話に応対するまでしばらく待ちます。
  5. 最初の担当者は、電話でクライアントに対応しているときに、2 番目の担当者にダイヤルして通話をつなぐことができます。
  6. 次の担当者が通話中になれば、最初の担当者は電話を切ることができます。 このようにすると、顧客と次の担当者は通話がつながったままになります。

さぁ、はじめましょう! GitHubからサンプルアプリケーションをクローンし、下のボタンをクリックして始めてください。

We're Warming Up

Node.jsおよびExpressを使用したウォーム転送

まず、顧客がサポートエージェントと連絡を取りたいときに電話をかけてくるTwilio番号に対する音声通話Webhookを構成しましょう。

ウォーム転送用のTwilio Console

これは外部からアクセスできるエンドポイントまたは本番環境のアプリケーションである必要があります。

One option to expose a development URL from your local machine is to use ngrok. Your URL would then be something like:

https://<your-ngrok-id>.ngrok.io/conference/connect/client

        
        
        
        
        routes/conference.js

        Awesome, now you've got a webhook in place. Next up, we'll look at some of the code.

        エージェントを接続する

        エージェントを接続する

        ここでは、Twilio の音声通話 Web クライアントを使用して、担当者に接続するために必要なすべてのフロントエンドコードを確認できます。

        ライブの Web クライアントを実現するには、基本的に以下の 3 つのものが必要です。

        • ケイパビリティ・トークン(Expressアプリケーションから提供されます)
        • 担当者ごとの一意の識別子(文字列)
        • Twilio によってトリガーされる各種イベントを処理するためのイベントリスナー
              
              
              
              
              public/javascripts/main.js

              次のステップでは、ケイパビリティートークンの生成についてもう少し詳しく見てみましょう。

              ケイパビリティートークンを生成する

              ケイパビリティートークンを生成する

              Twilio 音声通話 Web クライアントに接続するために、ケイパビリティートークンが必要です。

              Web クライアントを通じた着信接続を許可するには、トークンの生成時に識別子を指定する必要があります。このチュートリアルでは、 agent1agent2 などの固定の識別子の文字列を使用しましたが、コールセンタークライアントには、生成された任意の文字列を使用できます。これらの識別子は、Twilio REST API を使用して指定した担当者に通話を発信するのに使用されます。

                    
                    
                    
                    
                    lib/twilio-capability-generator.js

                    ケイパビリティートークンを生成する

                    lib/twilio-capability-generator.js

                    続いて、着信通話の処理方法について見ていきましょう。

                    着信通話のハンドリング

                    着信通話のハンドリング

                    クライアントが Twilio 番号に発信すると、アプリケーションは命令を求める POST リクエストを受信します。TwiML を使用して、クライアントにカンファレンスルームに参加するように、また、Twilio REST API クライアントには最初の担当者との通話を開始するように指示し、その担当者が同じカンファレンスに参加できるようにします。

                    クライアントに指示を与える際には、waitUrlも提供します。 このURLはアプリケーションの別のエンドポイントです。 このURLはアプリケーションの別のエンドポイントで、ユーザーにあいさつを述べて (Say)、保留中に音楽を再生する (Play)さらなるTwiMLを返します。 こちらのコードをご覧ください。

                    クライアントのCallSidを電話会議の識別子として使用します。 電話会議に加わるすべての参加者にはこの識別子が必要なため、次の人に電話をかけるときに取得できるよう、これをデータベースに保存しておく必要があります。

                          
                          
                          
                          
                          routes/conference.js

                          ここで、ClientへのTwiML命令の渡し方を確認しましょう。

                          Client用にTwiML命令を用意する

                          Client用にTwiML命令を用意する

                          ここでは、特定のカンファレンスルームに参加するようにクライアントに指示する Dial 動詞と Conference 名詞を含む TwiMLResponse を作成します。

                                
                                
                                
                                
                                lib/twiml-generator.js

                                Next up, we will look at how to dial our first agent into the call.

                                最初のエージェントを呼び出す

                                最初の担当者にダイヤルして通話を接続する

                                今回のアプリケーションでは、twilio-caller モジュールを作成して担当者への電話の発信を処理します。 このモジュールはTwilio REST APIを使用して新規通話を作成します。 call 関数は、下記のキーを伴ったハッシュを受け取ります。

                                1. from:Twilio 電話番号
                                2. to :担当者の Web クライアント識別子(agent1 または agent2
                                3. url :通話が接続したときに TwiML 命令を求める URL

                                担当者が Web クライアントで通話に応答すると、コールバック URL に対するリクエストが作成され、クライアントがすでに待機しているカンファレンスルームに参加するようにと担当者の通話に指示が出されます。

                                      
                                      
                                      
                                      
                                      lib/twilio-caller.js

                                      With that in mind, let's see how to add the second agent to the call.

                                      2 番目の担当者にダイヤルして通話を接続する

                                      2 番目の担当者にダイヤルして通話を接続する

                                      顧客と最初の担当者が通話中のとき、次の担当者へのウォーム転送を行う準備はすでに完了しています。 最初の担当者は次の担当者に電話をつなぐために必要な conferenceId を検索できるようにする identifier を渡してリクエストを発行します。 twilio-caller モジュールがすでに手元にあるので、 call 関数を使用しさえすれば次の担当者に接続できます。

                                            
                                            
                                            
                                            
                                            routes/conference.js

                                            続いて、最初のエージェントが通話を終了するための処理方法を見てみましょう。

                                            最初の担当者が通話から抜ける

                                            最初の担当者が通話から抜ける

                                            3人の参加者が同じ通話に参加したら、最初の担当者の役割はおしまいです。 最初の担当者は電話を切ることができるので、楽しい会話は次の担当者と顧客におまかせしましょう。

                                            各参加者が通話に参加したときに受け取る TwiML の違いに注意することが重要です。担当者 1 と 2 の双方が、startConferenceOnEntertrue に設定しました。つまり、彼らのいずれかが通話に参加すると、カンファレンスが始まります。発信元のクライアントと担当者 2 については、endConferenceOnExit が true に設定されています。これにより、これら 2 人の参加者のいずれかが通話から抜けると、その通話は終了します。

                                                  
                                                  
                                                  
                                                  
                                                  lib/twiml-generator.js

                                                  一丁あがり! Node.js / Expressを使用して、ウォーム転送を実装できました。 これで、クライアントが別のサポート担当者に転送されるときに、サポートコールから切断されることがなくなります。

                                                  関連トピック

                                                  関連トピック

                                                  一丁あがり! Node.js / Expressを使用して、ウォーム転送を実装できました。 これで、クライアントが別のサポート担当者に転送されるときに、サポートコールから切断されることがなくなります。

                                                  Twilio を使う Node.js 開発者であれば、他のチュートリアルもお楽しみください。

                                                  ブラウザー通話

                                                  Twilio クライアントを使って、ブラウザーから電話へ、およびブラウザーからブラウザーへの通話を簡単に行う方法を学びます。

                                                  ETA 通知

                                                  Node.js / ExpressとTwilioを使用して、到着予定通知の実装方法を学びます。

                                                  これは役に立ちましたか?

                                                  Thanks for checking this tutorial out! Let us know on Twitter what you've built... or what you're building.

                                                  Agustin Camino Jose Oliveros Kat King David Prothero Samuel Mendes
                                                  Rate this page:

                                                  ヘルプが必要ですか?

                                                  We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.