CODEWITHSUNDEEP
botsdialogflow-es
realnsleo
realnsleo

Reputation: 715

Retrieving Postback from Messenger Webview Using Dialogflow Agent

I am stuck here. I am trying to get a postback from a Webview opened in a Facebook Messenger chatbot that I am developing with DialoFlow's fulfillment library using NodeJS.

I am able to send a payload that opens a specific URL like below:

{
  "facebook": {
    "attachment": {
      "type": "template",
      "payload": {
        "template_type": "button",
        "text": "So you want to open the webview huh?",
        "buttons": [{
            "type": "web_url",
            "url": "https://somewebsiteurlwithdataiwanttoget.como",
            "title": "Open Website",
            "messenger_extensions": true  // To get psid and close window event
          }]
      }
    }
  }
}

In my webview I am able to submit a form and get the data from that form using jQuery Ajax:

let jqxhr = $.ajax({
    url: '/webhook',  // Fires my webhook
    data: { var1: 'Hello', var2: 'World' }, // Sent to my webhook
    dataType: 'json'
});

In my webook, I initialize my agent and send this data back to the Messenger Bot using a custom event (PS: I am using Express).

// The webhook that receives post data from the form in my webview
router.post('/', function (req, res, next) {
  // Initialize Agent
  const agent = new WebhookClient({ request: req, response: res })

  // Handle the intent
  let intentMap = new Map()

  // Set default handle if there are no intents
  intentMap.set(null, handle)

  // Handle stuff from the form
  agent.handleRequest(intentMap)

  function handle (agent) {
    agent.add(`Just a test to see if this message gets to messenger`)
  }
})

However, I get an error in my console saying "This request is not a valid Dialogflow request". I am not sure what I am doing wrong and I hope someone can help me out there.

Thank you.

Upvotes: 0

Views: 654

Answers (1)

SajidR
SajidR

Reputation: 41

Sending the json { var1: 'Hello', var2: 'World' } is the problem here. WebhookClient expects the 'req' parameter follow a schema, which could be like this:

 {
    "responseId": "e72a8020-1051-489d-acb4-95c9ebeadcb7-ee1dc704",
    "queryResult": {
    "queryText": "view appointment",
    "parameters": {
    },
    "allRequiredParamsPresent": true,
    "fulfillmentText": "Hi here you go.",
    "fulfillmentMessages": [
     .
     .
    ],
    "intent": {
      "name": "projects\/proj1\/agent\/intents\/77f38791-f2da-41bd-b44f-cef190d26fd9",
      "displayName": "2-show-appointments"
    },
    "intentDetectionConfidence": 1,
    "languageCode": "en"
  },
  "originalDetectIntentRequest": {
    "source": "GOOGLE_TELEPHONY",
    "payload": {
      "telephony": {
        "caller_id": "Anonymous"
      }
    }
  },
  "session": "projects\/proj1\/iKawldQ1RFSBIckQfGKww"
}

This contains information about the message that was received, the intent that was detected and the fulfillment payload. You do not have the liberty to change the schema.

Also, this approach is not viable. As per this, dialogflow doesn't have callbacks for webview events in messenger platform.

Upvotes: 1

Related Questions