I'm developing a chatbot on azure using node.js. It's a data visualization bot which generates chart in html format using d3 library and display to user.
It seems that Microsoft bot builder doesn't support html format. But I have looked through this link:
https://blog.botframework.com/2017/09/07/html-not-supported-web-chat/
It says that there is a way to enable html content:
"If HTML rendering in Web Chat is a critical feature for your applications, you can clone or fork a copy of the Web Chat source code from GitHub, and enable it (on your own custom Web Chat client)."
I tried to clone the file and changed ‘html : false’ to ‘html : true’. But it's not working.
Can anyone tell me what I can do? Really appreciate it!!!
Depending on what data you are attempting to visualize, you might be able to use a service like Google Image Charts: https://developers.google.com/chart/image/docs/chart_playground
Using this service, with the following code:
// attach the card to the reply message
var msg = new builder.Message(session).addAttachment(createHeroCard(session));
session.send(msg);
function createHeroCard(session) {
return new builder.HeroCard(session)
.title('Months with Numbers Bar Chart')
.subtitle('Using a Chart as Image service...')
.text('Build and connect intelligent bots that have charts rendered as images.')
.images([
builder.CardImage.create(session, 'http://chart.googleapis.com/chart?cht=bvg&chs=250x150&chd=s:Monkeys&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul')
])
.buttons([
builder.CardAction.openUrl(session, 'https://learn.microsoft.com/bot-framework/', 'Get Started')
]);
}
Produces this hero card:
Related
I have chat bot, I build it with bot framework nodejs SDK I integrate this chat bot to whatsapp and I want to display some buttons in the whatsapp chat,
So is there any one found a solution for this problem pleas help me
Note: I try to send a hero card but I run to problem
Error: TwilioWhatsAppAdapter.parseActivity():
An activity text or attachment with contentUrl must be specified.
I don't know how bot framework attempts to send WhatsApp messages with buttons, but I doubt it fits with the way Twilio wants to send them.
Currently, to send a message with buttons, you need to register and use a template message. When you send the text of a message that matches one of your templates, then Twilio will deliver the entire template with buttons as well.
For the future, look out for the Twilio Content API which will streamline templates, buttons and other rich messages across platforms.
It looks like you are using the TwilioWhatsAppAdapter from the botbuilder-community-js repo.
Looking at the adapter's code, it doesn't appear to be configured to handle any card other than a 'signin' card (see here). If you don't mind doing a little leg work on this, I don't see why you couldn't fork this repo and build in functionality that supports a hero card similar to the signin implementation.
I imagine it would look something like this:
case 'application/vnd.microsoft.card.hero':
// eslint-disable-next-line no-case-declarations
const hero = attachment.content;
message.body = `${ hero.text }\n\n`;
message.body += (hero.buttons[0].title ? `*${ hero.buttons[0].title }*\n` : '');
message.body += hero.buttons[0].value;
break;
The above may need a little massaging but it wouldn't be far off from this. Then, you just need to build the library for use.
Wechaty is a Bot SDK for Wechat Individual Account which can help you create a bot in 6 lines of javascript, with cross-platform support including Linux, Windows, Darwin(OSX/Mac) and Docker. see: https://github.com/chatie/wechaty
I want to send URL Link using wechaty, can I customize this?
Yes, you can.
Relate doc: https://docs.chatie.io/v/zh/faq#url-message
Example code in wechaty: https://github.com/Chatie/wechaty/blob/master/src/user/message.ts#L471
const linkPayload = new UrlLink ({
description : 'WeChat Bot SDK for Individual Account, Powered by TypeScript, Docker, and Love',
thumbnailUrl: 'https://avatars0.githubusercontent.com/u/25162437?s=200&v=4',
title : 'Welcome to Wechaty',
url : 'https://github.com/chatie/wechaty',
})
await msg.say(linkPayload)
You can change the title you like.
I have successfully hosted an instance of microsoft's Botframework web chat using directline on public domain, I want to make a chatbot in such a way that my customers can have their own channels completely separated from each other and I cannot find any kind of documentation anywhere, Kindly suggest me if this is possible and how?
I have written the complete code in Node.js and have very less idea about c#.
It seems that there is no such feature for uniform customized chat channel in bot framework. So we can leverage new builder.Message().address(address) to send messages to specific users from the official sample at https://github.com/Microsoft/BotBuilder-Samples/blob/master/Node/core-proactiveMessages/simpleSendMessage/index.js.
So I had a quick test which will save the users' addresses into an address list in server memory as a "customize channel", and trigger a key work to send message to these addresses in list as a broadcast in this "customize channel":
let channel_address = [];
bot.dialog('joinChannel',(session)=>{
channel_address.push(session.message.address);
}).triggerAction({
matches:/join/i
})
bot.dialog('broadcast',(session)=>{
channel_address.forEach((address)=>{
bot.send(
new builder.Message(session).address(address).text(session.message.text)
)
})
}).triggerAction({
matches:/^broadcast: .*/
})
Test Step:
Open two emulators connect to your local bot
in both emulators, type "join"
in either emulator, type text like broadcast: hi there
I am building a bot service to communicate to various endpoints. I have Skype basic communication running through Microsoft Botbuilder in Nodejs. I can send text to the Skype client fine, however when I want to send rich messages with images (animated gifs) or videos, things start going haywire.
1) Sending a animated gif:
function createAnimationCard(session) {
return new builder.AnimationCard(session)
.title('Microsoft Bot Framework')
.subtitle('Animation Card')
.image(builder.CardImage.create(session, 'https://docs.botframework.com/en-us/images/faq-overview/botframework_overview_july.png'))
.media([
{ url: 'http://i.giphy.com/Ki55RUbOV5njy.gif' }
]);
}
I call this code from another function:
exports.sendGif = function sendGif(chatBotUserSession, picUrl, contentType) {
var card = createAnimationCard(chatBotUserSession);
var reply = new builder.Message(chatBotUserSession).addAttachment(card);
_bot.send(reply);
};
When I do this I get to see an image with a play button (in the desktop Skype, mobile client does not show image at all), however pressing the button shows an error "opening not possible". I have tried different gif sources in the url field, but none seem to work. Also tried https for source.
2) I then moved to trying to display a video:
function createVideoCard(session) {
return new builder.VideoCard(session)
.title('Big Buck Bunny')
.subtitle('by the Blender Institute')
.text('Big Buck Bunny (code-named Peach) is a short computer-animated comedy film by the Blender Institute, part of the Blender Foundation. Like the foundation\'s previous film Elephants Dream, the film was made using Blender, a free software application for animation made by the same foundation. It was released as an open-source film under Creative Commons License Attribution 3.0.')
.image(builder.CardImage.create(session, 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg'))
.media([
{ url: 'http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4' }
])
.buttons([
builder.CardAction.openUrl(session, 'https://peach.blender.org/', 'Learn More')
]);
}
When I call this using:
exports.sendMovie = function sendMovie(chatBotUserSession, picUrl, contentType) {
var card = createVideoCard(chatBotUserSession);
var reply = new builder.Message(chatBotUserSession).addAttachment(card);
_bot.send(reply);
};
It all works... at least on my desktop Skype. My mobile skype (iOS) now crashes each time when I open the chat with my bot...
So two questions:
1) Does anyone know why I can't seem to send animated gifs that actually play?
2) Anyone have experience with bots on mobile Skype sending rich content and consequently crashing the app?
Thanks.
Microsoft Bot Framework messages with buttons in Facebook Messenger
My question relates to the question linked aboved. I am writing a bot using node.js that does not use the bot builder sdk. I manually returning a compatible response for the ms bot connector service. This is working fine for a text response, but I wish to return more complicated responses, e.g the buttons/carousel you can return with messenger. Based on the question I linked above, I guessed the format and added the below:
response.attachments = [ { "Title": "Choose One: ", "Actions": [{ "Title": "Postback!", "Message": "Postback from button" }, { "Title": "Postback2!", "Message": "Postback2 from button" }] } ];
The top level title seems to do nothing but the actions render as postback type buttons correctly (they send the Message as the postback content). With messenger you also have the option to return url based buttons, and image urls.
As far as I can tell there is zero documentation on returning attachments using the node bot builder sdk. If there were I'd just write the bot with the sdk in order to obtain the response format.
So my question is, does anyone know how to correctly return both postback and url based buttons to the bot connnector service, including accompanying images, with or without the bot builder sdk?
Update 05/05/2016
So I found the link below and you can see a definition of the attachments property:
http://docs.botframework.com/sdkreference/nodejs/interfaces/_botbuilder_d_.imessage.html
If you follow it to the IAttachment specification, it makes me wonder how/why my code above works at all? As a test of that format I wrote in the following:
var att = {};
att.content = "I am content";
att.contentType = "text/plain";
att.contentUrl = "http://www.google.com";
att.fallbackText = "I am fallback text";
att.text = "I am text";
att.thumbnailUrl = "https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png";
att.title ="I am title";
att.titleLink = "http://yahoo.com";
Now in slack I get a fairly nice output from this:
However in messenger I get "Service Error:Value cannot be null. Parameter name: source"
I found the info I needed. Not sure if it hadn't been published at the time or whether I was just hunting in the bot builder docs, but it's all detailed fairly well below.
http://docs.botframework.com/connector/message-actions/#navtitle
You have to tweak your message a little for certain integrations, e.g Skype doesn't really seem to support attachments.