Send message back from Facebook webview to bot

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: "some@email.com",
                        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!

回答1:

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);
})

回答2:

It is possible to send parameters with the get request, (https://someurl?userChannelID=) and then use them in your js code, to triger a message from your sever (we use directline)