I'm working on a chatbot with Dialogflow & Messenger. The webhook is been written in Python 3.x. I'm facing problem with how to transfer data from webview to the messenger chat window again to continue conversation with user.
Messenger chatbot is integrated with Dialogflow (v2). I've added a button for choosing date by the user. When the user clicks on the button, it redirects to an external website where I host the HTML page for datepicker.
The webhook payload button contains --> "messenger_extensions": "true
"attachment" : {
"type" : "template",
"payload" : {
"template_type" : "button",
"text":"Click button and choose",
"buttons": [{
"type": "web_url",
"url": "https://datepicker.glitch.me",
"title": "Choose Date",
"webview_height_ratio": "tall",
"messenger_extensions": "true"
}]
}
}
My HTML domain is successfully whitelisted (added HTTPS domain in FB Page --> Settings --> Messenger Platform --> white-listed domain).
This opens the webview HTML page (for mobile --> popup as chat extension, for PC --> opens webview in new browser window). I can select the dates.
On Submit, Javascript gets the input filed values as alert. Also Facebook Messenger SDK is integrated with the HTML. This helps to close the webview on click of Submit button too.
// Facebook Messener SDK Javascript
(function(d, s, id){
alert('Messenger Extension loaded'); // This alert is coming
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));
// Messenger SDK loading completes
window.extAsyncInit = function() {
// the Messenger Extensions JS SDK is done loading
alert('window extAsyncInit') // This alert is coming
MessengerExtensions.getUserID(function success(uids) {
var psid = uids.psid;//This is your page scoped sender_id
alert("Getting PSID") // This alert is NOT COMING
alert("This is the user's psid " + psid); // Alert NOT COMING
}, function error(err) {
alert("Messenger Extension Error: " + err);
});
};
// This is the Javascript based onSubmit function
function sendMessage() {
alert($( "#from_field_id" ).val()) // This is coming
alert($( "#to_field_id" ).val()) // This is coming
/// DON't KNOW HOW TO RETURN DATA TO MESSENGER WINDOW
MessengerExtensions.requestCloseBrowser(function success() {
// This works too
}, function error(err) {
});
return $( "#from_field_id" ).val() //Not coming to messenger window
};
I got a few related topics but unfortunately all of them are related to node.js. But I could not find anything related to python webhook.
I went through a tons of documentation:
- Tutorial
- Stackoverflow topic: Datepicker data pass
- Webview Guide
- Stackoverflow topic 2: And many more documents available.
Expected: With the closing of the webview window, the user selected dates should be transferred to messenger chat window to continue conversation. Otherwise the data cannot be saved to database.
Actual: User can select date. On submit, JS picks the values from input fields and close the webview window. No data is been passed on to messenger chat window.
What am I doing wrong here? Please help.
