I'm trying to add a hyperlink in fb messenger. Basically I'm creating a chatbot that replies users questions. However when I want to link the user to a webpage the only way possible is if I type in the whole URL which is really lengthy and ugly.
Fb messenger does not support HTML tags so I can't use the anchor tag to create a hyperlink for my URL to hide the link behind a word..
Is there a way I can type a sentence and hyperlink the URL behind a word in fb messenger?
Been searching tooo long now..
You can use a generic template with a web_url and no image:
{
"recipient":{
"id":"333333333"
},
"message":{
"attachment":{
"type":"template",
"payload":{
"template_type":"generic",
"elements":[
{
"title":"Here is the link you asked for",
"default_action": {
"type": "web_url",
"url": "https://www.facebook.com",
"messenger_extensions": true,
"fallback_url": "https://www.facebook.com/"
},
"buttons":[
{
"type":"web_url",
"title": "open link",
"url":"https://www.facebook.com"
}
]
}
]
}
}
}
}
Related
So I have been experimenting with different Response types for DialogFlow through Actions: Actions Responses and Webhook/Fulfillment.
And so far, I have been able to generate proper responses for types like List, Basic Card, Suggestion Chips successfully. What I need now is a list-based response that lets the user open a link in a browser when touched as well as "not" generate a chat bubble. "Browsing carousel" fits the criteria: Browsing Carousel.
I have successfully created and simulated the output with 2 sample items. The issue is when the user wants to continue the conversation. As per the Guidance section in the help above, the browsing carousel:
By default, the mic remains closed after a browse carousel is sent. If you want to continue the conversation afterwards, we strongly recommend adding suggestion chips below the carousel.
From this what I understood is that the user has to invoke the App again by saying "Ok Google, talk to [app]". This doesn't seem very user-friendly as the user expects to return back to the conversation she was having with the agent after she has looked through the links from the carousel. Please note, I have simulated the flow using the Google Actions Simulator on Console.Actions page.
As soon as I invoke the intent with the Browsing Carousel, it is shown to me with the sample Items. But when I enter/say the next command to continue the conversation, the agent simply returns with:
We're sorry, but something went wrong. Please try again.
And the REQUEST/REQUEST window as well as the ERRORS/DEBUG are empty. I have logged calls to the Webhook and there is no call received.
The question: Is there a way to give the user the ability to browse an informative link from a response "list" (not Basic Card) and return to the conversation without ending it.
Here is the response for Browsing Carousel from RESPONSE window in Actions > Simulator (note I've removed non-relevant parts):
{
"conversationToken": "[token info]",
"expectUserResponse": true,
"expectedInputs": [
{
"inputPrompt": {
"richInitialPrompt": {
"items": [
{
"simpleResponse": {
"textToSpeech": "You have the following 2 options:",
"displayText": "You have the following 2 options:"
}
},
{
"carouselBrowse": {
"items": [
{
"title": "Test 1",
"description": "Desc 2",
"image": {
"url": "[some url]"
},
"openUrlAction": {
"url": "[some url]"
}
},
{
"title": "Test 2",
"description": "Desc 2",
"image": {
"url": "[some url]"
},
"openUrlAction": {
"url": "[some url]"
}
}
]
}
}
],
"suggestions": [
{
"title": "Continue"
},
{
"title": "End"
}
]
}
}
}
],
"responseMetadata": {
"status": {
"message": "Success (200)"
},
"queryMatchInfo": {
"queryMatched": true
}
}
}
For all those who are using the Simulator to test the Browsing Carousel and seeing that it stops responding after the output, please use a device instead to test it. When you use a device to render the output and use the Carousel response, it doesn't kill the conversation but turns off the mic. This is the intended behavior. One can introduce Suggestion chips to assist the user to continue the conversation.
Updated: Also make sure each Webhook Intent call has a proper response with Simple Response. As long as the response has required textual and audio information correctly setup, the Simulator will not fail.
i am trying to build a simple bot using dialog flow and fb messenger. i have requirement to show two buttons to the end user to pick a cake type. i am able to show the options using the below custom response:
{
"facebook": {
"attachment": {
"type": "template",
"payload": {
"template_type": "button",
"text": "What kind of cake would you like?",
"buttons": [
{
"type": "postback",
"payload": "witheggs",
"title": "Contain Eggs"
},
{
"type": "postback",
"payload": "noeggs",
"title": "Eggless"
}
]
}
}
}
}
once user tap one of the two buttons then how do i set it to some variable in dialog flow and then ask next set of question?
I don't know what language you're using but here's what you're looking for:
The payload part is returned by api.ai as resolvedQuery when the user clicks any button.
For example, if the user clicks on Contain Eggs, api.ai will return witheggs through the resolvedQuery node of the json.
Does that help? Feel free to ask if there's anything else.
I can use my app_token to call the Graph API Explorer to get the basic information of the Fan Page email, website etc...
Just using /v2.6/20531316728?fields=emails,website,name
But how can I get the Fan Page Additional Contact Info (e.g. Twitter, Instagram, WeChat, LINE, YouTube, etc...) using app_token?
Further research after my comment turns up the following...
While not intuitive through the docs, this is available via the Facebook Graph API for Pages. The field you are looking for is screennames.
https://graph.facebook.com/nasa?fields=screennames&access_token=TOKEN
Example Response
{
"screennames": {
"data": [
{
"service_name": "Twitter",
"value": "nasa"
},
{
"service_name": "Instagram",
"value": "nasa"
},
{
"service_name": "Snapchat",
"value": "nasa"
},
{
"service_name": "YouTube",
"value": "nasa"
}
]
},
"id": "54971236771"
}
Note that it returns the free text that people type in the input type on the Facebook Page edit screen. Sometimes you'll see just the social media name, other times you might see a full or partial url.
I'm trying to make a share from the webview of my bot. Here's my code
var messageToShare = {
"attachment":{
"type":"template",
"payload":{
"template_type":"generic",
"image_aspect_ratio":"square",
"elements":[
{
"title":"Welcome to Peter\'s Hats",
"subtitle":"We\'ve got the right hat for everyone.",
"image_url":"https://pbs.twimg.com/profile_images/735453447718338561/9W-MTtOo_400x400.jpg",
"buttons":[
{
"type":"web_url",
"url": "my share url",
"title":"View Website"
}
]
}
]
}
}
}
MessengerExtensions.beginShareFlow(
function success() {},
function error(errorCode, errorMessage) {},
messageToShare,
"broadcast"
);
The share is working, but it's not posting the image as expected. The "image_aspect_ratio" flag is not respected and the image is displayed with horizontal layout.
But the same JSON displays the image as a square when the share is done thru CURL. Is there something wrong with my share object ? Please help
It was a bug on Messenger platform. I reported about it to Facebook and now it has beed fixed.
https://developers.facebook.com/bugs/391245647960177/
You need to add "sharable":true in your payload:
var messageToShare = {
"attachment":{
"type":"template",
"payload":{
"template_type":"generic",
"image_aspect_ratio":"square",
"sharable": true,
"elements":[
{
"title":"Welcome to Peter\'s Hats",
"subtitle":"We\'ve got the right hat for everyone.",
"image_url":"https://pbs.twimg.com/profile_images/735453447718338561/9W-MTtOo_400x400.jpg",
"buttons":[
{
"type":"web_url",
"url": "my share url",
"title":"View Website"
}
]
}
]
}
}
}
I'm creating a content script Chrome extension that hides the newsfeed on the Facebook homepage.
This script loads when I first open facebook.com, but fails when navigating into Facebook and back to the main page (which is a URL that's defined in the extension correctly).
Here's my manifest.js file:
{
"name": "NewsBlock",
"description": "NewsBlock - Facebook Newsfeed Hider",
"version": "1.0.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*", "storage"
],
"browser_action": {
"default_title": "NewsBlock",
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["https://www.facebook.com/"],
"js": ["myscript.js"]
}
],
"manifest_version": 2
}
Here's my myscript.js file:
if (document.getElementById('home_stream'))
document.getElementById('home_stream').style.visibility = "hidden";
if (document.getElementById('pagelet_home_stream'))
document.getElementById('pagelet_home_stream').style.visibility = "hidden";
console.log("NewsBlock Activated...")
Any help in understanding why this isn't loaded when I navigate back to the homepage on Facebook will be amazing.
That's because on many occasions the Facebook page uses the history.pushstate method to navigate. This method can change the current url without causing a new page load. The navigation is simulated by replacing part of the page content with the result of ajax calls.
You can use the chrome.webNavigation.onHistoryStateUpdated event to detect that situation, as suggested in this answer https://stackoverflow.com/a/17584559/1507998.
Some links in facebook call ajax functions, so most of time clicking on a link in facebook doesn't change the page, just loads content via ajax. So your content script executes only once.
There are two possible solution,
You can also add a DOM change listener like DOMSubtreeModified, and run the code every time when content is changed.
You can add CSS code to page, so it doesn't need to be run every time even if page is changed via ajax.
Like this,
manifest.json
{
"name": "NewsBlock",
"description": "NewsBlock - Facebook Newsfeed Hider",
"version": "1.0.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*", "storage"
],
"browser_action": {
"default_title": "NewsBlock",
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["https://www.facebook.com/"],
"js": ["myscript.js"],
"css": ["mystyle.css"]
}
],
"manifest_version": 2
}
mystyle.css
#home_stream, #pagelet_home_stream {
visibility: hidden;
}