メニュー

Expand
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?

RubyおよびRailsを使用したウォーム転送

Have you ever been disconnected from a support call while being transferred to someone else? That couldn't have left a great impression on you...

Warm transfer eliminates this problem - it allows your agents to have the ability to dial in another agent in real time.

Today we'll add warm transfer to a Ruby on Rails application so we can engender warm feelings among customers talking to support.

このマーケティング通知が高レベルでどのように機能するのかを以下に示します。

  1. The first agent becomes available by connecting through the web client.
  2. The second agent becomes available by connecting through the web client.
  3. A customer calls our support line.
  4. クライアントは、最初の担当者が電話に応対するまでしばらく待ちます。
  5. While the first agent is on the phone with the client, he or she dials the second agent into the call.
  6. Once the second agent is on the call, the first one can disconnect. The client and the second agent stay on the call.

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

Let's Transfer... Warmly

音声通話Webhookのセットアップ

First, let's configure the voice web-hook for the Twilio number that customers will dial when they want to talk to a support agent.

ウォーム転送用のTwilio Console

In production, this should be the public-facing URL for your app.

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

        
        
        
        
        config/routes.rb

        Route for our webhook

        config/routes.rb

        Nice work! With a webhook in place we're ready to dive into the code.

        Connect an Agent to a Call

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

        We need three things to have a live web client:

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

              ブラウザーから新規通話を作成する

              app/assets/javascripts/main.js

              In the next step we'll take a closer look at capability token generation.

              Generate the Token!

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

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

              Webクライアントを通じた着信接続を許可するには、トークンの生成時に識別子が提供される必要があります。 

                    
                    
                    
                    
                    特定のエージェントのアイデンティティーに対して新規けんちティートークンを生成する

                    lib/twilio_capability.rb

                    特定のエージェントのアイデンティティーに対して新規けんちティートークンを生成する

                    Next up let's take a look at how to handle incoming calls.

                    Handle Incoming Support Calls

                    For this tutorial we used fixed identifier strings like agent1 and agent2 but you can use any unique application generated string for your call center clients. These identifiers will be used to create outbound calls to the specified agent using the Twilio REST API.

                    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 use the Twilio REST API client to invite (and initiate a call to) the first agent.

                    When providing instructions to the client, we also provide a waitUrl. This URL is another end point of our application and will return more TwiML to SAY welcome to the user and also PLAY some music while on hold.

                    We use the client's CallSid as the conference identifier. Since all participants need this identifier to join the conference, we'll need to store it in a database so that we can grab it when we dial the second agent into the conference.

                          
                          
                          
                          
                          app/controllers/conference_controller.rb

                          Next up we'll look at the TwiML response to the client support call.

                          Provide TwiML Instructions For The Client

                          Here we create a TwiMLResponse that will contain a DIAL verb with a CONFERENCE noun that will instruct the JavaScript client to join a specific conference room.

                                
                                
                                
                                
                                lib/twiml_generator.rb

                                Now let's look at how we dial the first support agent into the conference call.

                                Dial The First Agent Into the Call

                                今回のアプリケーションでは、Caller モジュールを作成して担当者への電話の発信を処理します。 このモジュールはTwilio REST APIを使用して新規通話を作成します。 

                                The create method receives a hash with the following keys:

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

                                Once the agent answers the call in the web client, a request is made to the callback url instructing Twilio to join the agent's call with the conference room where the client is already waiting.

                                      
                                      
                                      
                                      
                                      lib/caller.rb

                                      Next up, let's look at bringing the second agent into the phone call.

                                      Dial The Second Agent Into the Call

                                      顧客と最初の担当者が通話中のとき、次の担当者へのウォーム転送を行う準備はすでに完了しています。 

                                      The first agent makes a request passing its identifier to allow us to look for the conference_id needed to add the second agent. Since we already have a Caller module, we can simply use the call_agent instance method to connect the second agent.

                                            
                                            
                                            
                                            
                                            app/controllers/conference_controller.rb

                                            Add the second agent to the conference call

                                            app/controllers/conference_controller.rb

                                            Once the second agent is in the call we can have the first agent disconnect. Let's look at the handoff next.

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

                                            When the three participants have joined the same call, the first agent has served his or her purpose. Now agent #1 can drop the call, leaving agent #2 and the client to discuss support matters and the weather.

                                            It is important to notice the differences between the TwiML each one of the participants received when joining the call:

                                            • Both agent one and two have startConferenceOnEnter set to true.
                                            • For the client calling and for agent two, endConferenceOnExit is set to true.

                                            Translated, this means a conference will start when either agent joins the call. It also means the client or agent #2 disconnecting will hang up the call.

                                                  
                                                  
                                                  
                                                  
                                                  lib/twiml_generator.rb

                                                  And that's a wrap! You've now helped us implement warm transfers for our support application. You're ready to add this capability on your own website!

                                                  次はどこでしょうか?

                                                  Ruby and Twilio are excellent partners. Here are two other tutorials you're sure to enjoy:

                                                  ブラウザー 通話

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

                                                  到着予定通知

                                                  Ruby - Rails および Twilio を使用して、ETA 通知を実装する方法について学びます。

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

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

                                                  Mario Celi David Prothero Kat King Samuel Mendes Hector Ortega Paul Kamp Andrew Baker
                                                  Rate this page:

                                                  ヘルプが必要ですか?

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