Does botbuilder support Facebook Messenger's Button Template? - javascript

After reading this question, which is quite old now:
Does the Bot Framework support Facebook Messenger's Button Template? and viewing the list of available cards using Bot Framework.
Does botbuilder currently support Facebook Messenger's Button Template? I would like the solution to be channel-agnostic so no JSON would be required to manipulate in order to achieve this. I've tried using the hero card with no title and no image but the result is not aesthetically pleasant and the normal text stays in bold.
This is the code which renders de card:
const attachment = CardFactory.heroCard(
"",
"BotFramework Hero Card",
CardFactory.images([]),
CardFactory.actions([
{
type: "openUrl",
title: "Get started",
value: "https://learn.microsoft.com/en-us/azure/bot-service/"
},
{
type: "openUrl",
title: "Get started2",
value: "https://learn.microsoft.com/en-us/azure/bot-service/"
}
])
);
return MessageFactory.attachment(attachment);
Tried also with the ThumbnailCard but shows the same result...

If you send a hero card through the Facebook connector then it will automatically be converted to a button template if the card has only buttons and no text or images, and it will be converted to a generic template otherwise. If you want to send a customized template of your choice, you can use Bot Framework channel data. It might look something like this:
reply = {
'type': ActivityTypes.Message,
'channelData': {
'attachment': {
'type': 'template',
'payload': {
'template_type': 'button',
'text': 'Button Template',
'buttons': buttons
}
}
}
};
Note that while the answer to your question is yes, you may still be unsatisfied. You only asked for a way to use the button template instead of the generic template but your reasoning was that you want it to look better. The problem there is that the look will depend on which Messenger client you're using, and in some clients this button template will look no different from a generic template. If you try out the button template and you're still unsatisfied then you may have to do some experimenting. I think the fastest way to test this would be to send messages as your bot in an HTTP application like Postman using the Bot Framework REST API.

Related

Expo notification click to action

I can't seem to find a solution when I get a push notification and click on it redirects me to a screen, chat, etc. link to push notification.
I would also like to add a square image to the side and could not find an answer.
The push notifications are sent from a NodeJS server I looked at the docs and search the internet and I did not find anything of interest.
https://docs.expo.dev/versions/latest/sdk/notifications/#managing-notification-categories-interactive-notifications
https://github.com/expo/expo-server-sdk-node
Thank you in advance for your answers ❤️
I'm not quite sure about the square image, but in order to handle redirects you can look at this documentation from expo: https://docs.expo.dev/push-notifications/receiving-notifications/.
You can then pass the data you need for your redirect (i.e. notification_type, relevant id etc) via the data property on your message (this will need to be done wherever the message is created, which from your question is from the node api):
messages.push({
to: pushToken,
body: 'This is a test notification',
data: { notification_type: 'something', id: 'something_else' },
});
It is then up to you to decide how to handle that message based on the extra data you have provided.
For example, taking the code provided in the link above as an example, you could have a handle function as follows:
_handleNotification = response => {
const data = response.notification.request.content;
if (data.type === "new_message") {
// navigate to MessageScreen with data.id as param
} else {
// do something else based on the type or...
}
};

How to use 'tap' in ThumbnailsCard

I'm trying to use the tap option inside ThumbnailCard (TC) using MS bot framework.
Looking at the documentation I saw that TC has the following properties:
title, subtitle, text, buttons, images and tap.
On github, I can't see the tap property and I'm wondering if it's should be supported and how to use it if so.
const thumbnailCard = CardFactory.thumbnailCard(
'BotFramework Thumbnail Card',
[{ url: 'https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg' }],
[{
type: 'openUrl',
title: 'Get started',
value: 'https://learn.microsoft.com/en-us/azure/bot-service/'
}],
{
subtitle: 'Your bots — wherever your users are talking.',
text: 'Build and connect intelligent bots to interact with your users naturally wherever they are, from text/sms to Skype, Slack, Office 365 mail and other popular services.'
}
);
You've already linked to the documentation where you can see that tap is a card action. You can click on the link in that thumbnail card documentation yourself to see the card action documentation, and you can also see an example of a card action in the buttons property. You could use that information to try something like this:
const thumbnailCard = CardFactory.thumbnailCard(
'BotFramework Thumbnail Card',
[{ url: 'https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg' }],
[],
{
subtitle: 'Your bots — wherever your users are talking.',
text: 'Build and connect intelligent bots to interact with your users naturally wherever they are, from text/sms to Skype, Slack, Office 365 mail and other popular services.',
tap: {
type: 'openUrl',
title: 'Get started',
value: 'https://learn.microsoft.com/en-us/azure/bot-service/'
}
}
);
Because cards are UI elements, you should keep in mind that all card behavior is channel-specific and you shouldn't expect tap to work on all channels. You should always test your cards on each channel you're targeting to see what works, as explained in the card support doc.
These categories are intentionally broad and don't fully explain how every card feature is supported in each channel due to the many possible combinations of cards, features, and channels. Please use this table as a base reference, but test each of your cards in the desired channel(s).

Setting up Segment.io

I have recently finished building a website on Webflow and I am looking to integrate Segment.io onto my website to connect with different destinations. I haven't been able to figure out how I could go onto collecting event and identity data into segment.io.
I have gone on their website and have seen example scripts (as shown below) but, I can seem to figure out anywhere how I could replace the dummy from the hard-coded strings to be functional on my HTML coded website.
analytics.identify('f4ca124298', {
name: 'Michael Bolton',
email: 'mbolton#initech.com'
});
analytics.track('Article Bookmarked', {
title: 'Snow Fall',
subtitle: 'The Avalanche at Tunnel Creek',
author: 'John Branch'
});
Is there anyone that has been successful in setting up Segment.io on their projects?
this code snippet goes on your web page, usually in a javascript import. Depending on how you are setting up your page, but simple javascript would be populating using the DOM values..
The first example, using an identify call, typically happens on a form submit.
var name = document.getElementById('name_field').value;
var email = document.getElementById('email_field').value;
var user_id = document.getElementById('user_id_field').value;
analytics.identify(user_id, {name: name, email: email});
Similar thinking when using the track calls..

Liferay 7: Retrieved custom field value using javascript api jsonws return java.lang.NullPointerException

I'm very new to liferay, I've created a page custom field using 'control panel > configuration > custom fields > page'. My goal is to retrieve the value from the page custom field and display the value in my custom portlet. One of the methods I've tried is using ExpandoValue/get-data API from the liferay json web service and this API is generated from localhost:8080/api/jsonws. Below is the generated javascript API:
Liferay.Service(
'/expandovalue/get-data',
{
companyId: themeDisplay.getCompanyId(),
className: 'com.liferay.portal.model.Page',
tableName: 'CUSTOM_FIELDS',
columnNames: 'pageDetail',
classPK: themeDisplay.getUserId()
},
function(obj) {
console.log(obj);
}
);
However, this api throws me an error: java.lang.NullPointerException. I'm thinking that this error occurs due to the permission given to the custom field. So, I've ticked View and Update permissions for Guest. But the issue persists.
My question is what triggered this error and how to fix it and is there any other solution I can use to retrieve the value from the page custom field?
Thanks in advance.
Edit
I had misunderstanding in assigning the attributes for the api and here is the new api as suggested by Olaf.
Liferay.Service(
'/expandovalue/get-data',
{
companyId: 20115,
className: 'com.liferay.portal.kernel.model.Layout',
tableName: 'CUSTOM_FIELDS',
columnName: 'details',
classPK: themeDisplay.getLayoutId()
},
function(obj) {
console.log(obj);
}
);
It works fine. However it only took the default value but not the value assign for that particular pages.
If memory serves me right, the stock remote API can't be used by unauthenticated users, but requires at least a logged in user (on top of the regular permissions of course).
You can test for this by accessing the API from logged in accounts with the same permissions. If it works there, then this is what you're running into.
However, when I interpret the call in your question correctly, the current user id would be the primary key for the custom field that you're looking at (looking at your classPK value). For a custom field on the page, I'd have expected a page id (layoutId in Liferay-API-terms). And while I'm seeing this, I notice com.liferay.portal.model.Page in your snippet. I've not seen that class, and pages can rather be found in com.liferay.portal.kernel.model.Layout (Assuming Liferay 7.1)
This makes me wonder what you're trying to achieve here - are you rather looking for a user-specific field (that would then be a custom field on the user) or really a page-specific field? Anyways - as this is an answer, not a comment, it might give enough hints to try out and come closer to a solution.

Can I relabel the person.noun for Profile object type in Facebook Open Graph?

I have created a Story using Open Graph and the object I want to use is called Service, which is really just a Profile but I want the text in the post to say 'service' rather than 'person' (which it does now). I have tried creating a custom object but it seems overly complicated for what I need so I have 2 questions:
Can I create a custom type that simply inherits from Profile that can be created in the same way (using the FB.api javascript method)? I don't want to have to use self-hosted types..
Can I simply re-label person.noun from 'person' to 'service' somehow? I can't see a way to do that..
My code to post the story is:
FB.login(function (response) {
if (response.authResponse) {
var strmessage = 'Some message';
var profileid = 'xxxxxxxxx;
var opts = {
profile: profileid,
message: strmessage,
no_feed_story: false,
'fb:explicitly_shared': true
};
FB.api('https://graph.facebook.com/me/mynamespace:myaction', 'post', opts, function (response) {
if (!response || response.error) {
Result("Your message has not been posted");
}
else {
//Message has been posted
Result("Your message has been posted");
}
});
You're going to have to do the custom object if you want a custom name. And, you're going to have to do it on the FB Developer site and go through the whole approval process and all that. And no, there is no way to do any sort of inherence on this.
FB's Open Graph is pretty simple if you use the built in actions and objects, but as soon as you go down the road of wanting custom names for stuff, you are going to have to go all in with it.
I finally put the time aside to implement a custom action and type. It wasn't the most intuitive process but I got there in the end and my app is now approved and doing exactly what I wanted it to do. I'm actually glad I put myself through this learning process as custom stories have great potential and I'm sure I'll find other applications for them in the future.

Categories