Had written bot on ms bot frameworks for Facebook Messenger which creates carousel using custom channel data attachment with web_url which enables messenger extensions: "messenger_extensions": true. We have Added Messenger Extensions on a webview page but it is not clear how to send message with an attachment from this webview page back to messenger and therefore to bot framework.
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 50%;
margin: 25%;
}
</style>
<button type="button" class="button" onclick="sendMessage();">Complete Booking</button>
<script type="text/javascript">
function sendMessage() {
alert('Booking completed. What to do now? How to send the message back to bot?')
/// how to return? the facebook docs don't say anything
/// you HAVE to make a server round trip.. https://stackoverflow.com/questions/43956045/messengerextensions-how-to-send-a-message-by-messenger-to-users
return {
text: "HOTEL_SERVICE_PAYLOAD",
attachments: [
{
email: "[email protected]",
hotelName: "Hotel marriott",
confirmNumber: "1234567"
}
]
}
MessengerExtensions.requestCloseBrowser(function success() {
}, function error(err) {
});
}
(function (d, s, id) {
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"));
window.extAsyncInit = function () {
// the Messenger Extensions JS SDK is done loading
MessengerExtensions.getUserID(function success(uids) {
var psid = uids.psid;//This is your page scoped sender_id
alert("Getting PSID")
alert("This is the user's psid " + psid);
}, function error(err) {
alert("Messenger Extension Error: " + err);
});
};
</script>
</body>
</html>
Have read tons of documentation and blogs including stackoverflow: https://stackoverflow.com/a/44536739/630169.
Is there simple example of JavaScript script embedded on a page? Thanks!
If I'm understand the question right, you could set up an API endpoint that triggers a message send, and hit that endpoint in the success callback of ` MessengerExtensions.requestCloseBrowser().
Example using jQuery and node's express module:
Webview:
window.extAsyncInit = function () {
// the Messenger Extensions JS SDK is done loading
MessengerExtensions.getUserID(function success(uids) {
var psid = uids.psid;//This is your page scoped sender_id
$.post('https://myapi.com/sendOnWebviewClose', {"psid": psid})
}, function error(err) {
alert("Messenger Extension Error: " + err);
});
};
Server:
app.post('/sendOnWebviewClose', (req, res) => {
let psid = req.body.psid;
sendMessage(psid);
})