Updated on August 26, 2023
Dialogflow CX is a new product from Google that was accessible from December 2020. It introduced a new approach to agent design, employing a state machine approach. This provides a clear and explicit control over a conversation, as well as a better end-user experience and development workflow. The older version of Dialogflow, Dialogflow ES, is still supported, but Dialogflow CX allows chatbots of greater complexity to be built more seamlessly using a visual editor rather than complex code.
We will integrate with third-party tools such as Kommunicate because Dialogflow does not provide a UI for the chat interface. We’ll be using the Kommunicate-powered chat plugin to demonstrate the webhook example as it works well with Dialogflow CX.
Assuming you’re familiar with Dialogflow CX and how to use it to build a chatbot. We’ll be focusing solely on setting up the webhook with the Dialogflow CX agent via Kommunicate. If this is your first time using it, however, you can get started here. You can also refer to this article for detailed instructions on how to integrate Dialogflow CX with Kommunicate.
What is a webhook? Why is it used in building chatbots?
Webhooks are services that serve as a middleman for the business logic that comes with your chatbot. Webhooks allows to use of the data extracted by Dialogflow’s natural language processing during a session to generate dynamic responses, validate collected data, or trigger backend actions.
We may encounter a problem if a user requests real-time information and Dialogflow can only retrieve the user response that was provided to it. For example, suppose we’re using an e-commerce bot and customers contact us for order information. So we must return to our system and retrieve the order details via webhook before displaying the response to the user. More information on webhook service requests and extras can be found in this Google Doc.
How to set up a webhook with Dialogflow CX?
Make a Webhook endpoint URL and publish it in a Webhook server. I created a mock API endpoint URL with Beeceptor because it includes a ready-to-use Webhook and allows you to receive a response payload. Please ensure that the API endpoint is configured to handle a JSON POST request.
Once your webhook service is operational, you must create a webhook resource in your agent with connectivity and authentication information. To add a webhook resource to your console, follow these steps.
- Open the Dialogflow CX Console.
- Choose your GCP project.
- Select your agent.
- Select the Manage tab.
- Click Webhooks.
- Click Create.
- Enter webhook data.
- Click Save.
Check that the correct webhook endpoint is provided, You can further provide request header values for authentication in the request body. When this process is finished, your webhooks will be able to retrieve data from your APIs.
Dialogflow fulfilment is used for any intent that requires a response message. The console will open a fulfilment editing panel for each of these use cases. Enable the webhook for each intent where you want to receive a response and save the changes.
Test the webhook connection
Once the webhook is ready for testing. A triggered interaction with a Webhook should respond with the message from your Webhook. Test your bot using the link provided in the Kommunicate manage bot section, and the response will display on your webhook service.
You can connect your bot to Webhooks in this manner and perform decisive custom actions to make your chatbot more dynamic, robust, and user friendly.
At Kommunicate, we are envisioning a world-beating customer support solution to empower the new era of customer support. We would love to have you on board to have a first-hand experience of Kommunicate. You can signup here and start delighting your customers right away.
