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

Byaravindmc

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="https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1"></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) {
    console.log(event);
    if (event.detail.response) {
        data = event.detail.response;
        console.log(data);
        //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.

Note: This is my old website and is in maintenance mode. I am publishing new articles only on my new website. 

If you are not sure where to start on my new website, I recommend the following article:

Is Dialogflow still relevant in the era of Large Language Models?

Leave a Reply