メニュー

Expand
ページを評価:

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

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

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

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

  1. The first agent becomes available when they connect through the web client.
  2. The second agent also becomes available when they connect through the web client.
  3. クライアントがサポートラインに電話をかけます。
  4. クライアントは、最初の担当者が電話に応対するまでしばらく待ちます。
  5. While the first agent is on the phone with the client, they can dial a second agent into the call.
  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

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

                    着信通話のハンドリング

                    着信通話のハンドリング

                    When a client makes a call to our Twilio number the application receives a POST request asking for instructions. We'll use TwiML to instruct the client to join a conference room and the Twilio REST API client to start a call with the first agent, so they can join the same conference.

                    クライアントに指示を与える際には、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

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

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

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

                                            When the three participants have joined the same call, the first agent has served his purpose. Now they can drop the call, leaving agent two and the client having a pleasant conversation.

                                            各参加者が通話に参加したときに受け取る 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を使用して、到着予定通知の実装方法を学びます。

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

                                                  このチュートリアルをお読みいただき、ありがとうございます。 どんなものを構築されたか(されるのか)、ぜひTwitterでお知らせください

                                                  David Prothero Kat King Samuel Mendes Andrew Baker Jose Oliveros
                                                  ページを評価:

                                                  ヘルプが必要ですか?

                                                  誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。

                                                        
                                                        
                                                        

                                                        フィードバックくださりありがとうございます!

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

                                                        Sending your feedback...
                                                        🎉 Thank you for your feedback!
                                                        Something went wrong. Please try again.

                                                        Thanks for your feedback!

                                                        Refer us and get $10 in 3 simple steps!

                                                        ステップ1

                                                        Get link

                                                        Get a free personal referral link here

                                                        ステップ2:

                                                        Give $10

                                                        Your user signs up and upgrade using link

                                                        ステップ3

                                                        Get $10

                                                        1,250 free SMSes
                                                        OR 1,000 free voice mins
                                                        OR 12,000 chats
                                                        OR more