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).
Related
I am looking into the Payment Request API as a way to streamline payments on our site checkout and have run into a bit of a brick wall on how to use it with card payments. There are a few demos explaining how to use the payment request API, this one seemed to be the simplest and easiest to follow, but it is also quite out of date (as a lot of PR API demos i've found seem to be). Here is my code than runs when the payment button is clicked:
const paymentMethods = [
{
supportedMethods: ['basic-card', 'visa', 'mastercard', 'amex'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex']
}
}
];
const details = { total: { label: 'Test payment', amount: { currency: 'GBP', value: '1.00' } } };
// Show a native Payment Request UI and handle the result
const request = new PaymentRequest(paymentMethods, details);
request.show()
.then(response => {
console.log('yep');
console.log(response);
})
.catch(err => {
console.error(err);
});
I get the following error in the console:
Uncaught RangeError: Failed to construct 'PaymentRequest': Invalid payment method identifier format
I did some digging and found that the 'basic-card' supportedMethod is deprecated, and simple references to credit card providers don't seem to be supported anymore. The MDN docs for supportedMethods actually state
Starting with more recent browsers, this parameter is more generic than credit cards, it is a single string, and the meaning of the data parameter changes with the supportedMethods. For example, the Example Pay payment method is selected by specifying the string https://example.com/pay here.
Which is all well and good, but if i want to support Visa or Mastercard credit and debit card payments what URL do i use for them under supported methods? The payment processor for our website is Worldpay, so is this something i'd ask them for? Or do i need to find individual urls for Visa and Mastercard? I have done some googling and can't find anything relevant for either of them. Maybe i'm just bad at googling, but i don't really know how to proceed with this and wondered if anyone else had experience in setting up the payment request API to use credit and debit cards.
Oh, and i'm testing this in Chrome 103 btw.
Thanks
I'm having trouble using .filter, to search through an array i have, which stores product data. I am able to pass the query term i want to the search page i have but can't seem to return the results.
This is my code and Search results for {query} shows the query entered as expected.
Having .filter(results => results.match(new RegExp(query, "i"))) gives the error results.match is not a function.
import React from 'react'
import { useLocation } from 'react-router-dom'
import { productData } from '../ProductData';
export const Search = () => {
const location = useLocation();
const query = location.state;
return (
<div>
Search results for {query}
<ul>
{productData
.filter(results => JSON.stringify(results).match(new RegExp(query, "i")))
.map(results => {
return <li key={results.id}>{results.title} </li>
})}
</ul>
</div>
)
}
This is an example of the product data in my array
export const productData = [
{
id:"1",
title: "Echo (4th generation) | With premium sound, smart home hub and Alexa | Charcoal",
price: 89.99,
image: require("./Assets/Product Images/echo.png"),
images:
[
{
src: require("./Assets/Product Images/echo.png"),
title: "Amazon Echo"
},
],
monthly: 18.00,
cat: "Smart Speaker",
desc: "Premium sound—Echo delivers clear highs, dynamic mids and deep bass for rich, detailed sound that automatically adapts to any room. Voice control your entertainment—stream songs from Amazon Music, Apple Music, Spotify, Deezer and more. Plus listen to radio stations, podcasts and Audible audiobooks. Supports lossless HD audio available on select streaming services such as Amazon Music HD. Ready to help—ask Alexa to play music, answer questions, play the news, check the weather, set alarms, control compatible smart home devices and more.",
details:
[
{
title: "Smart home made simple",
para: "With the built-in hub, easily set up compatible Zigbee devices to voice control lights, locks and sensors. Fill your home with sound—with multi-room music, playing synchronised music across Echo devices in different rooms. You can also pair your Echo with Fire TV to feel scenes come to life with home cinema audio. Connect with others—call almost anyone hands free. Instantly drop in on other rooms or announce to the entire household that dinner's ready. Designed to protect your privacy—built with multiple layers of privacy protection and control, including a Microphone Off button that electronically disconnects the microphones."
},
{
title: "Smart home made simple",
para: "With the built-in hub, easily set up compatible Zigbee devices to voice control lights, locks and sensors. Fill your home with sound—with multi-room music, playing synchronised music across Echo devices in different rooms. You can also pair your Echo with Fire TV to feel scenes come to life with home cinema audio. Connect with others—call almost anyone hands free. Instantly drop in on other rooms or announce to the entire household that dinner's ready. Designed to protect your privacy—built with multiple layers of privacy protection and control, including a Microphone Off button that electronically disconnects the microphones."
},
{
title: "Smart home made simple",
para: "With the built-in hub, easily set up compatible Zigbee devices to voice control lights, locks and sensors. Fill your home with sound—with multi-room music, playing synchronised music across Echo devices in different rooms. You can also pair your Echo with Fire TV to feel scenes come to life with home cinema audio. Connect with others—call almost anyone hands free. Instantly drop in on other rooms or announce to the entire household that dinner's ready. Designed to protect your privacy—built with multiple layers of privacy protection and control, including a Microphone Off button that electronically disconnects the microphones."
}
],
brand: "Amazon",
rating :
[
{
stars: 5,
ratings: "11,048",
}
],
},
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.
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..
I am new with Cordova android development and looking to create a very simple app to show what is the latest movies and show the banner of the movie to users my code is below, the notification is showing but it's not displaying the banner. my image is saved inside the www/img folder
cordova.plugins.notification.local.schedule({
id: 1,
title: 'My first notification',
text: 'Thats pretty easy...',
attachments: ['file://img/logo.png'],
foreground: true,
vibrate: true
});
Here is my file path
Below is an example of what I want to achieve, any suggestion would be great.
How does your push notification look like and take a look of the name of the file and its extension, not that the file is named Logo.jpg and you write logo.jpg. Android is linuxbased and this can cause errors.
my try to build it with your code, the pure push is without image, after clicking pull it from above, it will show the image like that:
My Code is a simple one in index.js:
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
cordova.plugins.notification.local.schedule({
id: 1,
title: 'My first notification',
text: 'Thats pretty easy...',
attachments: ['file://img/logo.png'],
foreground: true,
vibrate: true
});
}
The Push Message out of the App
Look at this Gif to see the image (i know, the quality is horrible):