Dialogflow CX Tutorial for Beginners Part 2

What is a webhook?

A webhook is a user-defined HTTP callback that is automatically invoked when certain criteria are met. A webhook can be created in any server-side programming language, such as Python, PHP, or Node.js. You can read more about webhooks here.

In Dialogflow, a webhook can be used to fetch data from your server when a certain intent is called that has a webhook enabled (don’t worry, we’ll see that). The information from the intent is passed to the webhook service to get the result.

We are going to use Ngrok, (a web tunneling tool) which can be used to call a webhook from your local server. You can download Ngrok from ngrok.io.

Let’s start by creating our own Dialogflow agent with a webhook using Python (Flask) and deploy it using Ngrok.

Install Python

Download and install python from here depending on your supported OS.

Install Flask using PIP

Flask is a lightweight web framework that can be used to create webhook services that can communicate with external applications (in our case the Dialogflow agent). To use Flask in our application, we need to install it first. It can be easily installed using “pip”. If “pip” is not installed, you need to install it first.

pip install Flask

For more information you can visit: https://pypi.org/project/Flask

Creating a webhook using Python

Let’s create a basic flask application.

# import flask dependencies
from flask import Flask


# initialize the flask app
app = Flask(__name__)


# default route
@app.route('/')
def index():
   return 'Hello World!'


# create a route for webhook
@app.route('/webhook')
def webhook():
   return 'Hello World!'


# run the app
if __name__ == '__main__':
   app.run()

Now run the application using the following command.

python app.py or FLASK_APP=hello.py flask run

Our main application is now running, but as it is on the local system, it cannot be accessed from the outside world. To integrate it as a webhook for Dialogflow, we need to make it live/online. We use ngrok for this.

Run a webhook using Ngrok

Ngrok is a web tunneling tool that allows testing APIs and webhooks from a local server. Two versions are available. We will use the free version by registering on ngrok.io.

To start ngrok, use the following command: ngrok http <პორტის_ნომერი>

eg: ngrok http 5000 (for Colby app)

How to set up a webhook in Dialogflow

Dialogflow offers an option on the left sidebar known as Webhook. Just enter your webhook URL and the webhook name generated by ngrok and you’re done.

You can also configure the Webhook timeout.

Make sure you add the URL /webhook like…

https://41f5-2401-4900-1f3e-8fff-00-10d-c052.ngrok.io/webhook

and not only

https://41f5-2401-4900-1f3e-8fff-00-10d-c052.ngrok.io/

Because we are going to handle the request on the /webhook route, not the index route.

If you specify a URL without a webhook, then you may get an error like “The webhook call failed. Error: 405 Method not allowed.

Enable webhooks for pages

Now we need to enable webhooks for pages that need to communicate with data from our server. To do this, in the settings of the page you want to enable a webhook for, scroll down to the bottom and enable “webhook” from the webhook settings drop-down menu, select the webhook and fill in the Tag field you want to assign.

When this page is called, it will send a request to your webhook and respond based on the responses received from the webhook.

Building execution responses from a webhook

Webhook responses must be in the proper JSON format so that Dialogflow can understand what to display to the user.

The code below will prepare a simple JSON response for Dialogflow with the execution text. User will get “This is a response from webhook”. As a response to this intention.

# import flask dependencies
from flask import Flask, request, make_response, jsonify


# initialize the flask app
app = Flask(__name__)
# default route
@app.route('/')
def index():
   return 'Hello World!'


# create a route for webhook
@app.route('/webhook', methods=['GET', 'POST'])
def webhook():
   return make_response(jsonify(cx_response()))


def cx_response():
   data = request.get_json(silent=True, force=True)
   tag = data["fulfillmentInfo"]["tag"]


   if tag == "Welcome":
       reply = 
           "fulfillmentResponse": 
               "messages": [
                   
                       "text": 
                           "text": [
                               'This is a response from webhook.'
                           ]
                       
                   
               ]
           
       
       return reply




# run the app
if __name__ == '__main__':
   app.run()

You can see that we fetched the “tag” from the query using

tag = data["fulfillmentInfo"]["tag"]

In our example, we used a tag, you can use it for your purpose.

Checking response from webhook

Using the “Test Agent” console on the right side of the window, we can invoke the intent and test the response. For our example, the answer would be:

Using this guide, you can create a basic webhook.

We hope you find this tutorial helpful in integrating a webhook into your dialogflow application. If you have any questions, write in the comments. We will respond to it soon.

What is an Event Handler?

In Dialogflow CX, an event handler is a type of dialog node that allows you to trigger specific actions or responses based on an event that occurs during a conversation. An event can be thought of as a signal or trigger that indicates that something has happened or a condition has been met.

When you create an event handler in Dialogflow CX, you specify the name of the event it should listen for. When this event is fired, the event handler is fired and can perform a number of actions, such as setting a context, sending a message, or calling a webhook.

Event handlers are typically used to handle situations when a user provides specific information or performs a specific action, such as selecting a specific item from a list, confirming an order, or requesting assistance. By using event handlers, you can create more complex conversational flows that respond to specific user actions or conditions.

How to set up an event handler?

1. Open your Dialogflow CX agent in the Dialogflow CX console.
2. Click the Stream tab to open the Visual Stream Editor.
3. In the flow editor, select the dialog node where you want to add the event handler.
4. In the node’s settings panel on the right, scroll down to the “Events” section and click the “Add Event” button – In the “Add Event” dialog, select the event you want the event handler to include.
5. Optionally, you can add any additional parameters or conditions to the event handler.
6. Click Add to create the event handler.
7. You can now configure the actions you want the event handler to perform, such as sending a message or calling a webhook. You can do this by adding actions to the response section of the node or by adding a webhook to the execution section of the node.
8. Save the changes in the dialog box.

Built-in events:

The following events are built-in and called by Dialogflow. Some events are limited to certain levels.

event name	Called when
sys.no-match-default	– For stream or page level: The end-user input does not match any of the targets for handlers that are in scope.- For parameter level: The end-user input does not match the form parameter.
sys.no-input-default	No end user input received. It can be called when: – Dialogflow receives empty text input from the end user.- Dialogflow receives empty audio input from the end user or the input does not contain any recognized output. recognized speech.
webhook.error	The webhook call returned an error. This event is only called: 1) if there is no fine-grained webhook event handler (eg webhook.error.timeout) that matches the webhook error code, 2) if no transition target is specified on the original route called execution. Failed with webhook. See the Evaluation Order section for details.

You can learn about other built-in events at this link https://cloud.google.com/dialogflow/cx/docs/concept/handler#event-built-in

What is a unit?

An entity represents a specific object or concept that you want your chatbot or virtual assistant to be able to recognize and respond to. Entities are used to extract meaningful information from user input and help your bot understand the meaning of what the user is saying.

An entity can be a simple value, such as a number or date, or a more complex value, such as a product name or location. When a user enters a message, Dialogflow CX parses the text and extracts any relevant entities mentioned. For example, if a user asks “What’s the weather like in New York?”, Dialogflow CX can extract the entity “New York” as the location.

Entities in Dialogflow CX can be system or user defined. System-defined entities are built-in entities provided by Dialogflow CX, such as “@sys.date-time” or “@sys.number”. User-defined entities are entities that you define yourself based on the specific needs of your chatbot or virtual assistant. You can create a user-defined entity by defining a list of possible values ​​or by using regular expressions to match user input patterns.

Once you define an entity in Dialogflow CX, you can use it to match user input to goals and retrieve relevant information. You can also use entities to set performance parameters or generate dynamic responses based on user input. By using entities effectively, you can create a more natural and conversational experience for your customers.

Custom Unit:

You can create custom entities to recognize and extract information from user input. Custom entities are used to represent specific concepts or objects relevant to your conversational AI application.

To create a custom entity in Dialogflow CX, follow these steps:

1. In the Dialogflow CX Console, go to the Entities page.
2. Click the Create Entity button.
3. In the Create Entity dialog box, enter a name for your entity.
4. Select a type for your unit. There are several types, including:
   • Custom: A custom entity that you define.
   • System: A predefined system unit that recognizes common concepts such as dates, times, and numbers.
   • RegEx: A regular expression unit that matches user input patterns.

5. Select the language in which your unit will be used.
6. If you choose Custom as your entity type, define the values ​​that your entity can recognize. You can enter individual values, or you can import a list of values ​​from a CSV or JSON file.
7. Click the Create button to create your custom entity.

Once you’ve created your custom entity, you can use it in Goals and Performance to extract information from user input and use it to provide relevant responses.

Feel free to post your doubts/queries. We will be happy to help you. If you are looking for Chatbot development or natural language processing services then contact us or send your inquiry to letstalk@pragnakalp.com. We will be happy to offer you our expert services.