CODEWITHSUNDEEP
node.jsazurebotsbotframework
Yuge Chen
Yuge Chen

Reputation: 127

Chat bot-Can I display html content using node.js in Microsoft bot framework & bot builder

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!!!

Upvotes: 0

Views: 2095

Answers (1)

Eric Dahlvang
Eric Dahlvang

Reputation: 8292

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:

hero card with chart image

Upvotes: 1

Related Questions