How to use the Dialogflow Messenger df-response-received event

Dialogflow Messenger How To

I got this question on my YouTube channel recently:

Hi, thanks for sharing this video! i have a question: – how i use Events JavaScript from dialogflow messenger (df-request-sent & df-response-received)

I used the df-response-received event as part of my Dialogflow CX bot which helps you choose between ES, CX and Actions Builder.

Here is some sample code:

Suppose the dfMessenger object has been added to your HTML like this (just copy this from the Dialogflow console)

<script src=""></script>
<df-messenger df-cx="true" chat-title="DFChooser" agent-id="your-agent-id-goes-here" language-code="en"></df-messenger>
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('df-response-received', function (event) {
    if (event.detail.response) {
        data = event.detail.response;
        //now do something with the data JSON object

You can parse the data object (which is in JSON format) and you will see that it contains all the information coming back from Dialogflow.

This is for a CX bot, but the basic concept works the same way for ES also.

I haven’t used the df-request-sent event, but I would expect that it would work in the same way. Note: the df-response-received event includes the request information from the user, so it is sufficient if you are just trying to log the Dialogflow conversation to a database.

About this website

I created this website to provide training and tools for non-programmers who are building Dialogflow chatbots.

I have now changed my focus to Vertex AI Search, which I think is a natural evolution from chatbots.


BotFlo was previously called MiningBusinessData. That is why you see that watermark in many of my previous videos.

Leave a Reply