DialogFlow fulfillment for Facebook Messenger Webview

Question

Button to open web view on Facebook Messenger keeps opening a browser, on mobile and desktop

I've created Facebook Messenger Bot, created a Test Page and a Test App, currently receiving webhooks from every message on DialogFlow, which respond correctly to the first message, in which i return a DialogFlow card, with a button, this button supposed to open a webview, but keeps opening a browser tab, on mobile and desktop, now, i'm aware for open a webview on desktop the are some modifications to the code that need to be made but mobile should be working by now and that is not the case. I'm following this flow: https://cloud.google.com/dialogflow/docs/images/fulfillment-flow.svg)

This the webhook response sent from my Django instance to DialogFlow:

    "fulfillmentMessages": [
        {
            "card": {
            "title": "aaa bbb ccc",
            "platform": "facebook",
            "subtitle": "card text",
            "imageUri": "https://ucarecdn.com/6a3aae10-368b-418f-8afd-ed91ef15e4a4/aaaa_bbb_ccc.png",
            "buttons": [
            {
                "type": "web_url",
                "text": "Get Recipe",
                "postback": "https://assistant.google.com/",
                "webview_height_ratio":"compact",
                "messenger_extensions": "true"
            }
            ]
          }
        }],}

This is the view for responding to postback button:

@csrf_exempt
def get_recipe(request):
    """
    """
    response = render(request, "recipe_item.html")
    response['X-Frame-Options'] = 'ALLOW-FROM https://messenger.com/ https://www.facebook.com/ https://l.facebook.com/'
    response['Content-Type'] = 'text/html'
    return response

And this is the Messenger Extensions SDK been installed on the HTML for the view corresponding to the webview:

<html>
<head>
    <title>Choose your preferences</title>

</head>
<body>
<script>
        (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.getSupportedFeatures(function success(result) {
                  let features = result.supported_features;
                  if (features.indexOf("context") != -1) {
                    MessengerExtensions.getContext('375919546670588',
                      function success(thread_context) {
                        // success
                        document.getElementById("psid").value = thread_context.psid;
                        // More code to follow
                      },
                      function error(err) {
                        console.log(err);
                        console.log(err.message);
                      }
                    );
                  }
                }, function error(err) {
                  console.log(err.message);
                });

        };
</script>
...
</body>
</html>

The end result should be a web view been opening when Get Recipe button is pushed

EDIT: i just try sending this custom payload to DialogFlow and no webview, button keeps opening browser instead.

{
    "fulfillmentMessages": [
        {
        "payload": {
        "facebook": {
            "attachment": {
                "type":"template",
                "payload":{
                    "template_type":"button",
                    "text":"Try the URL button!",
                    "buttons":[
                        {
                            "type":"web_url",
                            "url":"https://www.messenger.com/",
                            "title":"URL Button",
                            "webview_height_ratio": "full"
                        }
                    ]
                }
            }
        }}
    }]}

score 2 · Answer 1 · answered Aug 17 '19 at 18:30

Ladies and Gentleman, i'm happy to announce, problem solve, well at least shows a webview, now i'm going to to try show my on view, i try showing a random website (https://www.messenger.com/), and changing again the custom payload to be send to DialogFlow from my Django instance:

 {
    "fulfillmentMessages": [
        {
        "payload": {
        "facebook": {
            "attachment": {
                "type":"template",
                "payload":{
                    "template_type":"button",
                    "text":"Try the URL button!",
                    "buttons":[
                        {
                            "type":"web_url",
                            "url":"https://www.messenger.com/",
                            "title":"URL Button",
                            "webview_height_ratio": "tall"
                        }
                    ]
                }
            }
        }}
    }]}

Basically, the difference is the change on webview_height_ratio from full to tall or compact, this last two are working, but when i set it to full just open a browser, next: - Try with my custom view for the webview - Make all this work on desktop I'll be in touch!!! i can't say how happy i am, sounds corny, but i don't care, i have been stucks on this for about 36 hours.

score 0 · Answer 2 · answered Aug 19 '19 at 13:49

I made extension works a month ago with Dialogflow but I gave up the idea because of the latest messenger update that no longer supports beginShareFlow : https://developers.facebook.com/docs/messenger-platform/webview/sharing/v4.0

Starting August 15, 2019, updated versions of the Messenger app will no longer support Begin share flow on Messenger extension SDK. As a workaround, developers can provide a way, to copy a link within the webview, that people can use to share in Messenger conversations. Refer to June 10, 2019 Announcement

I had few differences with your json :

button.put("webview_height_ratio", "full"); // <compact|tall|full>",
button.put("messenger_extensions", true);
button.put("webview_share_button", "hide");

Regards,

DialogFlow fulfillment for Facebook Messenger Webview

2 Answers2