How to create card in messenger using API.ai (dialogflow) - node.js

I am integrated dialog flow and messenger by using nodejs this is working fine for text exchange. I am confused about creating a card in messenger. Can anyone please help in this?
I have integrated the facebook messenger bot with the website. When customer visit the page that bot will provide help. I want to show the card in that bot. Please provide reference or solution for this requirement. Please see this img Like this I want to show

I'm assuming by messsenger, you mean Facebook Messenger?
To use a Basic Card with Google Assistant, you first must check that the screen output supports use of the card UI. You can do this with:
if (!conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT')) {
conv.ask('Sorry, try this on a screen device or select the ' +
'phone surface in the simulator.');
return;
}
After you've tested whether the screen supports use of a basic card, you can create a new instance of the Basic Card class with code like:
// Create a basic card
conv.ask(new BasicCard({
text: `This is a basic card. Text in a basic card can include "quotes" and
most other unicode characters including emoji πŸ“±. Basic cards also support
some markdown formatting like *emphasis* or _italics_, **strong** or
__bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
things like line \nbreaks`, // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
subtitle: 'This is a subtitle',
title: 'Title: this is a title',
buttons: new Button({
title: 'This is a button',
url: 'https://assistant.google.com/',
}),
image: new Image({
url: 'https://example.com/image.png',
alt: 'Image alternate text',
}),
display: 'CROPPED',
}));
More info is available via Google's documentation.

Related

How to customize Payment Element in Japanese?

I recently signed up for Stripe and have successfully integrated Payment Element into my web application. However, the texts from the integrated Payment Element are displayed in English by default such as Card number, Expiration, etc. I would like to display those texts in Japanese.
I have found that, for example, Card number element has a .Label class as you can see on Elements Appearance API so I did the following.
.Label {
font-size: 0;
}
.Label::after {
font-size: 1rem;
content: "γ‚«γƒΌγƒ‰γƒŠγƒ³γƒγƒΌ";
}
This, however, did not replace Card number with γ‚«γƒΌγƒ‰γƒŠγƒ³γƒγƒΌ.
Is Payment Element not available in Japanese?
Is there a way to customize Payment Element in Japanese?
If it is not possible, what other way would you suggest to collect payments in Japanese? I don't mind coding a lot as long as it works and is customizable.
I found the answer here on stackoverflow.
You need to set locale when initiating Payment Element on the client side like the following.
var elements = stripe.elements({
locale: 'ja',
// clientSecret: ...,
// appearance: ...,
});

Using the Alexa Skills node SDK to display a full screen image on Echo Show

I'm using the Alexa Node SDK to build my application which is hosted on AWS Lambda. When using an Echo Show (or any display-enabled device), I'd like the screen to update with a full-screen image when Alexa responds with audio.
I'm able to do this with the "Standard Card" -- but the image is very small and appears to the right of the spoken text.
Is there any way to remove the text and display the image full screen?
Sample code:
return handlerInput.responseBuilder
.speak('my text')
.withStandardCard('my title', 'my text', 'https://myimage-sm.jpg', 'https://myimage-lg.jpg')
.reprompt('my title', 'my text')
.addElicitSlotDirective('slotname')
.getResponse();
To be clear, I've also tried adding a template with addRenderTemplateDirective, but this throws an error, as Alexa allows only one directive per slot.
No other directives are allowed to be specified with a Dialog directive. The following Dialog Directives were returned: [Display.RenderTemplate]
You can try my project here which uses APL behind the curtains to render the card wit a full background. BTW, the limitation is not one directive per slot, the limitation is that you can't use any dialog related directive with other directives, for example render template directives or APL directives. So if you're going to do dialog management forget about sending display rendering directives for the time being.

Actions-On-Google Card Subtitle not displaying in Simulator or Android phone

I'm using the DialogFlow Fulfillment Inline Editor to build a quick prototype/POC Google Action. I'm trying to add a subtitle to a Card using the Node.js code below (based on the default Fulfillment Node.js code) and it's not showing up in the Simulator or on my Android phone. Otherwise, the Card is rendering properly - all other properties are being displayed, but no subtitle. I've also tried creating the Card separately and setting the subtitle property directly (card.subtitle = 'The Subtitle';), but that also did not work. There is no 'subtitle' being returned in the response data, and there are no errors being logged (either in the "ERRORS" tab or the "View logs").
agent.add(new Card({
imageUrl: 'https://example.org/images/logo.png]',
title: `${titleCase(theTitle)}`,
subtitle: 'The Subtitle',
text: `${theText}`,
buttonText: 'Get More Information',
buttonUrl: 'https://example.org/info'
}));
Thoughts on what might be going on here?
There is no such thing as subtitle for a Card to my knowledge. You are probable confounding with the BasicCard from the Actions On Google library which does have a subtitle property.
Hope it helps.

Hyperlink in response in Api.ai

I am exploring api.ai now a days for one assignment to develop chat bot. Is there a way to add hyperlinks as a part of default response? I do not want to use Google Assistant, Facebook Messanger, KIK,Slack etc but I want to include hyperlink as a part of Default Response. I explored various blogs but could not find desired answer.
Practically you can't, but there is a hack:
Choose the response to be card.
Choose a custom image.
Embed link in the "next".
No, ideally you can not add a hyperlink in default response of api.ai but there is a workaround that I used in my code. In my case, I have developed my own chat window where before printing, I'm running a check on the response that is coming from api.ai using following function & get that link converted into the clickable format.
if(!String.linkify) {
String.prototype.linkify = function() {
// http://, https://, ftp://
var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&##\/%?=~_|!:,.;]*[a-z0-9-+&##\/%=~_|]/gim;
// www. sans http:// or https://
var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
// Email addresses
var emailAddressPattern = /[\w.]+#[a-zA-Z_-]+?(?:\.[a-zA-Z]{2,6})+/gim;
return this
.replace(urlPattern, '<a target="_blank" href="$&">$&</a>')
.replace(pseudoUrlPattern, '$1<a target="_blank" href="http://$2">$2</a>')
.replace(emailAddressPattern, '$&');
};
}

Microsoft BotBuilder node.js : How to send formatted text (BOLD , Italic , New Line ) to Android Skype for business client from Bot

We have implemented a Bot using Microsoft BotBuilder in node js, to proactively send message to Skype for Business users. We have requirement to send few formatted text such as - Bold, Italic , and line break (new Line), But It seems that Android Skype for business doesn't support any of these format. All Html formatted is shown as Raw HTML in all platforms (iOS, Android and MAC).
So far we have tried following ways to send Formatted text.
//1 using \n\n
var msgToSend = new builder.Message()
.text("Hello \n\n World!");
//2 using unicodes
var msgToSend = new builder.Message()
.text("Hello \u0085 \u2028 World!");
//using html formatting
var msgToSend = new builder.Message()
.text("Hello </br> World!");
bot.loadSession(addr1, function (err, session) {
bot.send(msgToSend);
});
We succeeded to send new line text to Mac, iOS, and Windows Skype for Business clients, but None of these seems to work for Android.
Any help would be appreciated to send formatted text to android.
As already replied in a question around the same theme (which was about webchat and rendering HTML):
Microsoft Bot Framework supports only 2 types of text format (see documentation here):
Markdown
XML (The textFormat xml is supported only by the Skype channel.)
As a consequence:
HTML will not help you here
you are limited to the capabilities of markdown and the restrictions of markdown rendering in your channel
If you look at markdown for Skype for Business in Channel Inspector, there is no possibility to do what you want (bold, italic etc. are not rendered as wished), sorry

Resources