メニュー

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?

C#およびASP.NET MVCを使用したワンクリック通話

サーフィンするくらい簡単にエンドユーザーが連絡を取れるようにしたいですって? 今日はあなたのラッキーデーです!

Let's go over the steps necessary to implement click-to-call in a C# and ASP.NET MVC application.

クリック トゥー コール

  1. Webサイトの訪問者は電話番号をWebフォームに送信する。
  2. Webアプリケーションは送信を受け取り、TwilioへのHTTPリクエストを開始して、Twilioに通話の発信を始めるよう指示する。
  3. Twilioはリクエストを受け取り、ユーザーの電話に発信を開始する。
  4. ユーザーが電話に出る。
  5. After the call connects, we provide TwiML instructions to connect the user to our sales or support teams.

私達が学ぶこと

This tutorial demonstrates how to initialize a call using the Twilio REST API and how to create a call using the TwiML Say verb.

さぁ、はじめましょう! 下のボタンをクリックして、チュートリアルの次の手順に移動してください。

Set up your environment

Before we create our click-to-call application we need to set up our environment first.

Let's put our Twilio credentials in a place where our application can access them. For the purposes of this tutorial, we'll store them in environment variables that our application can read. Create a Local.config file under the ClickToCall.Web/ directory with the following content:

<?xml version="1.0" encoding="utf-8"?>
  <appSettings>
    <add key="TwilioAccountSID" value="your_twilio_account_sid" />
    <add key="TwilioAuthToken" value="your_twilio_auth_token" />
    <add key="TwilioNumber" value="your_twilio_number" />
  </appSettings>

Replace the Account_SID, Auth_Token, and Twilio_Number placeholder values with your unique values, which you can find in the Twilio Console. You can use an existing Twilio phone number or obtain a new number.

Twilio Console Credentials Location

        
        
        
        
        ClickToCall.Web/Web.config

        続いて、使いやすいWebフォームの作成について見ていきましょう。

        The web form

        For our solution, we'll need a form where the user can enter a phone number.

        No need to overthink this step as the real goal is to POST the user's phone number to your controller.

        What information does this form need?

        • An input for the User's phone number
        • An input for the sales team phone number
        • 送信ボタン
              
              
              
              
              ClickToCall.Web/Views/CallCenter/Index.cshtml

              ユーザーの目に触れるWebフォーム

              ClickToCall.Web/Views/CallCenter/Index.cshtml

              Since the page doesn't need to render new content after clicking, we decided to implement the POST action via AJAX using jQuery. Let's take a look at that code next.

              フォームを送信する

              クリックトゥーコール機能をよりシームレスにするために、Ajax を使用して非同期的にフォームを送信するようにしました。

              このコードは、jQueryを使用してこれを実装するひとつの方法を示しています。

              • ユーザーがフォーム要素を送信するのを待つ
              • Submit the form's data to our controller
              • 送信の成否についてユーザーに知らせる

              これは jQuery の jQuery.post() メソッドの一般的な実装です。通話の接続時にレスポンスメッセージを返していることに注意してください。

                    
                    
                    
                    
                    ClickToCall.Web/Scripts/app.js

                    AJAXでフォームを送信する

                    ClickToCall.Web/Scripts/app.js

                    Now that we have the front end done let's build the back end that will receive this data. We'll start our exploration in the next step.

                    Outbound call routing

                    Back on the server, we'll define a route that handles the HTTP POST requests to the /Call URL. This is the code that we're calling via our AJAX request in the browser. It will be responsible for placing the outbound call.

                    Before we place the call we first check that the POST data is valid, which requires that our CallViewModel has a user number and a sales number present.

                    Next, we'll use the REST API to make an outgoing phone call which requires we pass it a From number, a To number and the URL Parameter uriHandler that tells Twilio what to do after it connects the call to our customer.

                          
                          
                          
                          
                          ClickToCall.Web/Controllers/CallCenterController.cs

                          Call Center Controller

                          ClickToCall.Web/Controllers/CallCenterController.cs

                          Now let's look at how we prepare TwiML to send to Twilio.

                          TwiMLを生成する

                          TwiML is a set of verbs and nouns written in XML that Twilio reads as instructions.

                          今回の指示は、Twilioに何かをエンドユーザーに対して読み上げ (SAY) させ、サポート担当の電話番号に電話を発信 (DIAL) し、顧客が彼または彼女と話せるようにします。

                          We will use the Twilio .NET Helper Library to create a TwiML response.

                          まず始めに、着信リクエストが Twilio から来ていることを確認します。これを行うために、Twilio .NET ヘルパーライブラリの RequestValidator クラスを使って実装された Twilio Validation Service を使用します。

                                
                                
                                
                                
                                ClickToCall.Web/Controllers/CallController.cs

                                コールコントローラー

                                ClickToCall.Web/Controllers/CallController.cs

                                And with that, you've helped us get a working click-to-call form, ready to be integrated into your own application.

                                Test your app locally

                                Now you can run and test your Twilio app.

                                However, you probably want to test it using a publicly available endpoint without having to go "public" with your app. The best option is to use ngrok.

                                Note: For more information about running the application, see the Readme file in the app github repository.

                                About ngrok

                                ngrok generates a secure URL that forwards traffic to a port, usually 5000, on your localhost server. It allows you to run applications locally but make them a publicly available endpoint via secure tunneling. This allows you to test your application and do all the things you want your app to do but in a secure public space.

                                ngrok is an executable (ngrok.exe) that you run on the command line or terminal.

                                Setting Up ngrok

                                Head over to ngrok's website, download the ngrok.zip file for your OS of choice, then unzip the file into an easily accessible location.

                                For example, on Windows, you can place it in your \Users directory in \AppData\Roaming\<ngrok-directory-name>\ngrok.exe. Then, update your PATH environment variables to the location of the ngrok executable. On Linux or OSX, it's much easier (see the instructions on the ngrok site).

                                And that's it.

                                Accessing your app from an endpoint using ngrok

                                Before you start ngrok, it might be a good idea to have your Twilio Console open.

                                For Mac and Linux, open a terminal and run this command to start ngrok:

                                $ ./ngrok http 4040
                                

                                On Windows, open a command prompt and run this command to start ngrok:

                                $ Path-to-ngrok> ngrok http 4040
                                

                                Alternately, you can start ngrok using the following command:

                                $ ngrok http 4040 -host-header="localhost:4040"
                                

                                The port number "4040" is arbitrary. If your local server is running on another port, replace "4040" in the command with the appropriate port number.

                                This will start ngrok. A running instance of ngrok will appear in the terminal showing the local web interface (in this case http://127.0.0.1:4040) and the public URL (in this case, https://28dd499b.ngrok.io).

                                ngrok-running

                                The forwarding public URL needs to be set in the Twilio Console. In the Console, select the active phone number you set in Local.config and enter the public URL from ngrok (shown above) in the "A Call Comes In" field under Voice & Fax. Be sure to select Webhook from the dropdown list.

                                Remember, each time you run ngrok, a new public URL will be generated. You will need to set this new URL in the Console.

                                Twilio Console Webhook Setting

                                You now have a publicly available endpoint for your app, so now you can take a look at your running app and enter the phone numbers using your ngrok address: https://xxxxxx.ngrok.io

                                他に構築できるもの

                                次はどこでしょうか?

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

                                Thanks for checking out this tutorial! Tweet to us @twilio and let us know what you're building!

                                Jose Oliveros Agustin Camino Hector Ortega Andrew Baker Paul Kamp Kat King Glenn Lea
                                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.