PHPおよびLaravelを使用したワンクリック通話
サーフィンするくらい簡単にエンドユーザーが連絡を取れるようにしたいですって? 今日はあなたのラッキーデーです!
Let's go over the steps necessary to implement click-to-call to add in-browser voice calls to your PHP and Laravel application.
- Webサイトの訪問者は電話番号をWebフォームに送信する。
- Webアプリケーションは送信を受け取り、TwilioへのHTTPリクエストを開始して、Twilioに通話の発信を始めるよう指示する。
- Twilioはリクエストを受け取り、ユーザーの電話に発信を開始する。
- ユーザーが電話に出る。
- 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.
さぁ、はじめましょう! 下記のボタンをクリックして、ワンクリック通話のLaravelチュートリアルの次のステップに移動しましょう。
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. We'll store them as environment variables that our application can read.
<?php return array( 'TWILIO_ACCOUNT_SID' => getenv('TWILIO_ACCOUNT_SID'), 'TWILIO_AUTH_TOKEN' => getenv('TWILIO_AUTH_TOKEN'), 'TWILIO_NUMBER' => getenv('TWILIO_NUMBER') );
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.
続いて、使いやすいWebフォームの作成について見ていきましょう。
Webフォーム
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
- 送信ボタン
Since the page doesn't need to render new content after clicking on submit, we decided to implement the POST action via AJAX using jQuery. Let's take a look at that next.
これでフロントエンドが出来上がったので、データの受信されるバックエンドを構築しましょう。 次のステップでその説明を始めます。
発信する
Next, we initiate a Twilio\Rest\Client
object with our Account SID and Auth Token.
This is essentially our PHP REST API handler, which we could use to send SMS (or a myriad of other things). Of course, for now, we just need it to create phone calls.
We'll use the REST API to make an outgoing phone call which requires us to pass a To
number, a From
number and an array which contains a URL Parameter
with instructions for Twilio. In a customer support case, Twilio needs to DIAL the Agent in once the call has been placed. (We'll discuss this more later.)
Let's look in greater detail at our TwiML commands to Twilio.
TwiMLを生成する
TwiML is a set of verbs and nouns written in XML that Twilio reads as instructions.
In this case, our instructions inform Twilio to SAY something to the user and DIAL a support agent.
To make writing TwiML easy, many of the helper libraries have methods that generate TwiML for you. In this case, we use twilio-php to create a TwiML response that will instruct Twilio to say something.
And with that, you've helped us get a working click-to-call form, ready to be integrated into your 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.
So, 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).
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.
Each time you run ngrok a new public URL will be generated. You will need to update this URL in the Console any time you restart ngrok.
You now have a publicly available endpoint for your app. Now you can take a look at your running app and enter the phone numbers using your ngrok address, which will look something like https://{unique-domain}.ngrok.io
.
次はどこでしょうか?
- Check out how iAdvize uses Twilo click-to-call to connect to online shoppers with customer support representatives
- Appointment Reminders - automate the process of reaching out to your customers in advance of an upcoming appointment.
- Automated Survey - instantly collect structured data from your customers with a survey conducted over a voice call or SMS text messages.
これは役に立ちましたか?
Thanks for checking out this tutorial! Tweet to us @twilio and let us know what you're building!
ヘルプが必要ですか?
誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。