Maximizing Your Chatbot Experience: A Step-by-Step Guide to Adding Dynamic Responses with Dialogflow CX Webhooks

I lately used webhooks in Dialogflow CX to make the dialogues more dynamic.

I felt that some instructions are missing, and certain things work differently compared to Dialogflow ES. On top of this, the UI is missing a Diagnostic Info tool, like Dialogflow ES had, which was extremely handy when working with Webhooks, as you could see exactly which requests you are sending to your API and the response that Dialogflow ES would receive.

Let’s take a step back. What are Webhooks? Webhooks allow you to make your conversations more dynamic. For example, instead of hardcoding agent responses (text) in fulfillments, you can retrieve them from another place. That other place could be a web service / API that fetches data from a database, or some JSON data feed, etc.

This makes much sense in production environments, especially when you want your agent to store user input.

[Are you learning about Conversational AI and chatbots? Check out Changing the customer experience with Contact Center AI: Look back and look forward.]

In Dialogflow ES, the webhook is another word for fulfillment, and you could only define one external URL for the whole virtual agent. This means you must route all your dynamic responses through this end point.

In Dialogflow CX, any response, static or dynamic, is called fulfillment. (That makes sense because its fulfillment says something about resolving a response rather than the place where it comes from). Connecting to dynamic APIs are called webhooks, and you can define any amount of webhooks to your agent. Also, you can fetch data from the webhook from page fulfillments, event fulfillments, route fulfillments, etc. Partial responses (returning responses before it finalizes a task on the server) are possible too.

Now we know what webhooks are and how these differ from Dialogflow ES. Let’s look into an example of how to create some.

You can run webhook services anywhere. It can be on-premise, in Google Cloud (Cloud Run, Compute, GKE), or in Cloud Functions. Let’s look into an example with a simple Cloud Function to keep things simple and not dive too deep into infrastructure.

Easily Create Dynamic Dialogues with Dialogflow CX Webhooks and Cloud Functions

Create a Cloud Function

1. Open https://console.cloud.google.com and browse to Cloud Functions from the hamburger menu.
2. Click Create Function, and choose 2nd generation. Follow the wizard, and make sure you specify a function name a region, and make sure you have a service account selected. For this example, I named my function: order-state, picked Node JS 16 as an environment (so JavaScript code), selected allow unauthenticated invocations, and set my entry point to orderState.
3. You can use the below code in the next section as content for index.js.
4. Click Create to create the Cloud Function. When it’s successful, you will receive a URL which you will later use in Dialogflow CX.
5. Click on the created Cloud Function and hit the permissions tab. You will need to give the service account that is used by Dialogflow CX permissions to use this Cloud Function. You can do this by clicking the Grand Access button. Enter the address of the service account that is used by Dialogflow CX (It will look something like this: your-service-account@your-project.iam.gserviceaccount.com) and give it the Cloud Function Invoker role.

The code of the webhook function:

Here’s an example of the contents of a webhook. There are a couple of things you want to pay attention to.

• req.body.sessionInfo.parameters — will hold the parameters set by Dialogflow CX.
• req.body.fulfillmentInfo.tag — is a string name you will set in Dialogflow CX, which can be used as some kind of routing mechanism in your webhook code.
• You will need to return a JSON response with a status 200, which includes a specific JSON response object that holds the response.fulfillment.messages text responses. And a response.sessionInfo.parameters object that sets new parameters back into the Dialogflow CX session.

Have a look; the below code creates a fake order state manager that can handle add or update calls. (It doesn’t do anything with databases, but you can hook it here.) It returns a message back to Dialogflow CX, and it will set new session parameters.

Testing the function (without Dialogflow CX):

Once you have created the above Cloud Function, you can test it from your Google Cloud terminal window. Then, when it all works as expected, you can continue to integrate this into Dialogflow CX.

curl -m 70 -X POST https://my-function.a.run.app \
-H "Authorization: bearer $(gcloud auth print-identity-token)" \
-H "Content-Type: application/json" \
-d '{
 "sessionInfo": {
   "parameters": {
     "item": "tshirt",
   }
 },
 "fulfillmentInfo": {
       "tag": "add"
 }
}'

Create webhooks in Dialogflow CX:

1. In Dialogflow CX, click on Manage > Webhooks.
2. Click Create
3. Specify the Display Name (e.g., Order State Manager)
4. Specify the URL. (This will be the URL to your Cloud Function)

Click Save

Creating fulfillment through webhooks in Dialogflow CX:

Now, in Dialogflow CX, select the fulfillment you want to make dynamic.

This can be the entry fulfillment in a page, route, event, etc.

1. You will first need to flip the switch: Enable Webhook
2. Then you will have to pick the Display Name of the webhook (Order State Manager).
3. Next, it requires you to enter a tag name. Remember the “add” and “update” tags we created for the switch statement to route the calls. That’s what you enter here in this field. Remember to hit Save.

And there you go. You can test this example in the Dialogflow CX simulator.

Did anything go wrong? Go to the Google Cloud console, and select the Logging tool from your hamburger menu. Then, filter on the Cloud Function to see the requests (and other console.log statements to debug the problems.

Creating webhooks is relatively easy, and Dialogflow CX gives you many more possibilities than Dialogflow ES!

In the official documentation, read about Webhooks and Fulfillments in Dialogflow CX.

[Looking for more information about Dialogflow? Check out Solving internal search problems with Dialogflow.]