Custom Integration
Dialogflow Messenger
Integrate Dialogflow with Zoho Live Chat
BotCopy Example Bots
How to Choose

When user types a message

Let us look at what happens when the user types a message into the input box and presses the ENTER key.

Post message to process.php

I have a file called process.php which has all the middleware code – the code which connects the user interface to the Dialogflow agent.

When user presses the ENTER key, the contents of the user’s message is sent to process.php as a POST request in an AJAX call. The POST call is done from chatbot.js

On line 86, you see the code which submits the form when user presses the ENTER button inside the input box.

Line 87 assigns the user’s message to the variable called query.

Line 88 assigns the sessionID generated inside index.php to a variable called guid

The showUserText() method on line 90 is responsible for rendering the user’s message inside the Message Window.

As you might know, the e.preventDefault() on line 91 prevents the typical form submission (which reloads the entire page) which we need to do for AJAX methods.

Then line 93 is the actual AJAX call – the data field in line 96 has all the data which is being sent to the process.php file – in this case, we have three fields: submit = true, message = query and sessionid = guid.

Parse the contents of the POST request in process.php

Inside the process.php file, we get this POST request, and parse its contents to get the appropriate values we want.

if(isset($_POST['submit'])){ 
// create curl resource 
$ch = curl_init(); 
$userquery = $_POST['message']; 
$query = curl_escape($ch,$_POST['message']); 
$sessionid = curl_escape($ch,$_POST['sessionid']);

The code snippet above is straight forward. You assign the variables contained in the POST request to appropriate PHP variables.

We do the curl_escape to “escape” certain special characters such as spaces etc so that when you send the actual request over to Dialogflow, the query string is in the appropriate format.

Relay the user message to Dialogflow via REST API call

Once the process.php code has the correct values for the user’s message and the sessionID, it can relay the user’s query to Dialogflow.

Remember that as long as you use the same sessionID across multiple REST API calls, you don’t need to manage the context for the given session.

The actual code to do this is complex for a couple of reasons:

1 There is extra stuff I do in the bot (e.g. initiate the first message) which isn’t essential for this tutorial

2 I have not covered the REST API authentication logic yet (it comes later in the tutorial).

For now, here is the relevant code:

$apiUrl = 'https://dialogflow.googleapis.com/v2beta1/projects/'.$projectId.'/agent/environments/'.$envName.'/users/-/sessions/'.$sessionid.':detectIntent';
$response = $httpClient->request('POST', $apiUrl, [
    'json' => ['queryInput' => ['text' => ['text' => $userquery, 'languageCode' => 'en']],
        'queryParams' => ['timeZone' => 'Asia/Calcutta']]
]);
$contents = $response->getBody()->getContents();
$dec = json_decode($contents);

You have to construct the correct API URL. As you can see, I use the environments feature, which can be a big help if you wish to make changes to your bot without affecting the production version.

Next, you send a HTTP POST request to the URL and include the following information:

  • user’s query
  • language code
  • any query params you might have

I believe query params are optional, but you can test it out for yourself.

Then the contents of the response (to the POST request) is assigned to the $contents variable.

You can then simply use json_decode to retrieve all the contents in JSON format.

Why not use the PHP client library?

You might notice that I don’t use the PHP client library, and I am instead making a direct call to the API endpoint.

There are a couple of reasons for this:

1 As I have written before, the PHP client library for Dialogflow isn’t as stable as I would prefer for the task at hand

2 The chatbot.js does a lot of heavy lifting and requires information to be sent to it in JSON format. Calling the API endpoint and extracting the JSON is easier than using the client library for this use case.

ℹ️ All Courses | ? How to unlock all lessons (free) | ? Live chat

>