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"
}
]
}
}
}}
}]}
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.
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,
Related
Regarding getting Cookie from my chrome extension, it works perfectly when the chrome setting "On all sites".
But when I set "On [current site]" or "When you click the extension" in chrome extension setting, I couldn't get any cookies..
https://support.google.com/chrome_webstore/answer/2664769?hl=en
"Let extensions read and change site data"
※ When I keep opening the url where I want to get the cookie, it's success...
I tried to look for the solution, but there were nothing.
{
"name": "myapp",
"version": "1.0.0",
"description": "desc",
"permissions": [
"contextMenus",
"tabs",
"cookies"
],
"host_permissions": [ "https://wanna-get-cookie-this-domain.com/*" ],
"background": { "service_worker": "service_worker.js" },
"content_scripts": [
{
"js": ["scripts/contentscript.js"],
"matches": ["https://*/*"]
}
],
"manifest_version": 3
}
service_woeker.js
chrome.contextMenus.create({
id: "testapp",
title: "title",
contexts: ["all"],
type: "normal"
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
chrome.windows.create({
url: `/views/popup.html`,
type: 'popup',
focused: true,
width: 395, height: 230
});
})
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.type == "getCookie") {
chrome.cookies.getAll({}, function(cookies) {
console.log(cookies);
// "On all sites" works.
// "On [current site]" or "When you click the extension" doesn't work
// even after I clicked and enabled the extension.
});
}
return true;
});
views/popup.html
<html>
...
<script src="/scripts/popup.js"></script>
</html>
scripts/popup.js
// After user clicked, below code
chrome.runtime.sendMessage({type: 'getCookie'}));
Thanks,
This is a bug:
the cookies API is only checking the host permissions, and not checking tab-specific permissions, since the request isn't associated with a tab.
Until it's fixed you'll have add the host permissions for all sites in manifest.json:
"host_permissions": ["<all_urls>"]
Note that your content script already runs on all https sites (why not all sites though?), which means that your extension is already requesting the "broad host permission" under the hood, so adding the same pattern to host_permissions doesn't increase the internal permissions of your extension, it's more of a cosmetic requirement to allow the use of chrome API in the non-content scripts like the background script.
In my website I have a series of images that serve as nuxt links to game pages:
<template>
<NuxtLink :to="game.pageName">
<img :src="game.boxImage" :height="gamePanelHeight" class="elevation-4"
/></NuxtLink>
</template>
Each of those links draws its properties from a content markup file like this:
index: 3
boxImage: gameImages/box_image.png
title: game title
pageName: games/whatever
And they're loaded into the page like so:
<script>
export default {
async asyncData({ $content, params }) {
const games = await $content('games').sortBy('index', 'asc').fetch()
return { games }
},
}
</script>
Whenever I refresh this page. All of these images break until I navigate outside the page and come back. What's causing this issue and how do I fix it?
This is a static Nuxt application FYI. And it's being served through an AWS S3 bucket but I don't think that's what's causing this issue.
EDIT: Also the boxImage that's in gameImages/box_image.png is from the static folder.
asyncData is not a hook that is triggered upon reaching an URL or using a reload (F5), it is only triggered during navigation.
If you want it to work even after a reload, use the fetch() hook.
More info here: https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch#options
Edit on how to write it with fetch()
<script>
export default {
data() {
return {
games: [],
}
},
async fetch() {
this.games = await this.$content('games').sortBy('index', 'asc').fetch()
},
}
</script>
I'm not able to see 'Get Started' button in my messenger bot conversation.
But it DID appear. And for some unknown reasons, it disappeared yesterday.
I've already made this request :
POST https://graph.facebook.com/v2.6/me/messenger_profile?fields=get_started&access_token=XXX
{
"get_started":{
"payload":"getstarted"
}
}
And checked :
GET https://graph.facebook.com/v2.6/me/messenger_profile?fields=get_started&access_token=XXX
Result :
{
"data": [
{
"get_started": {
"payload": "getstarted"
}
}
]
}
I tried to delete the conversation both on facebook web UI, messenger web UI and iOS app.
I am administrator of that app.
Any suggestion ?
Thanks !
I'm working with Facebook js SDK "Go Live Dialog" for live streaming, every thing works fine until the last step when I want to publish the stream and I can't publish because there is a CORS error, it is:
XMLHttpRequest cannot load https://graph2.facebook.com/v2.5/10154376393778843?access_token=EAAOAPyi8mX....&suppress_http_code=1. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, https://www.facebook.com/', but only one is allowed. Origin 'https://www.facebook.com/' is therefore not allowed access.
the issue is due to graph2.facebook.com is sending CORS header twice:
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: https://facebook.com/
and Google Chrome accepts only one.
I opened it as a bug on facebook but until now their answers is to "disable CORS security" on my browsers, a bad solution if I want to make my app public for every one.
The code for the app is this:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '452751035113070',
xfbml : true,
version : 'v2.8'
});
};
(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.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<button id="liveButton">Create Live Stream To Facebook</button>
<script>
document.getElementById('liveButton').onclick = function() {
FB.ui({
display: 'popup',
method: 'live_broadcast',
phase: 'create',
}, function(response) {
if (!response.id) {
alert('dialog canceled');
return;
}
console.log('stream url:' + response.secure_stream_url);
FB.ui({
display: 'popup',
method: 'live_broadcast',
phase: 'publish',
broadcast_data: response,
}, function(response) {
console.log("video status: \n" + response.status);
});
});
};
</script>
also here here: https://plnkr.co/edit/Aq0hkCTh5suXfOl6qKuN?p=preview .
To make a real try you should start an streaming using wowza or similar, if not, the publish button is disabled and the problem occurs when I click the publish button.
did someone know how to handle it to allow all users to use the script and to force them to use other browsers or to disable the security options? or I need to wait until facebook fix it?
I Disable a Chrome extension and it works.
The extension is: JetBrains IDE Support 2.0.9
this is strange because every post talk about you can't have 2 CORS directives and I think the server keeps sending 2 directives or maybe the server send just 1 and this extensions modify the headers...I don't know, but now ir works.
I am using the javascript sdk to share content on a Facebook wall:
FB.ui({
method:'share',
display: 'touch',
href: 'www.adarshkr.com',
redirect_uri:'www.adarshkr.com'
},
function(response) {
if (response && !response.error)
{
alert("shared");
window.reload();
console.log(response)
}
else
{
FB.init();
}
});
Upon sharing the content its not taking to URL which is specified in redirect_uri. In Android webview, upon sharing the content i am getting the blank screen.. I am not getting response from the facbook.