Detect in dialogflow a cardclick event from Hangouts chat and call a intent

Question

I have a problem with hangouts. I'll explain the scenario to you so that you can better understand

• I have hangouts for user chat (Channel)
• I have a bot implemented with Dialogflow
• I have the fulfillment connected to the bot, to create customized answers for the user.

I would like to create a list of buttons or a card so that when the user clicks, the option he has clicked is sent to the fulfillment and there it is processed.

Would anyone know any way to do this?

The flow 1) The user writes "hello" in the hangout chat

2) This message ("hello") is sent to dialogflow, which then processes the message and sends it to the fullfillment.

3) In the fulfillment a response is elaborated in json format (you will see it later). In this answer is included an object called onClick, inside it has another object called action and that contains another object called actionMethodName where you define where you want to go (In this case it would be ideal to redirect the user to another INTENT)

The problem is that when you click on that button you get a message saying "Your bot cannot be contacted. Try again later."

What I would like is that once the user clicks on it, the bot will recognize the event (CARD_CLICKED) and take him to another INTENT

  CustomPayload: function () {

    return {
      "actionResponse": {
        "type": 'CARD_CLICKED'
      },
      
        "payload": {
          "hangouts": {
            "sections": [
              {
                "widgets": [
                  {
                    "textParagraph": {
                      "text": "<b>Roses</b> are <font color=\"#ff0000\">red</font>,<br><i>Violets</i> are <font color=\"#0000ff\">blue</font>"
                    }
                  },
                  {
                    "buttons": [
                      {
                        "textButton": {
                          "text": "NEXT INTENT",
                          "onClick": {
                            "action": {
                              "actionMethodName": "intent",
                              "parameters": []
                            }
                            
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ],
            "header": {}
          }
        },
        "platform": "GOOGLE_HANGOUTS"
      }
    
  }

Answer 1

I tried something similar but at the end I am changing a little bit the design.

1. Configure Hangouts API to go to your backend instead of DialogFlow (and eliminate Fulfillment)

2. In your backend, check whether the type of the message is Message or Card_clicked (among others) and generate the card response.

3. Also in your backend you can use detectIntent function from dialogflow library to detect the intent and answer back to Hangouts.

I hope it helps.