How to embed a WebPage in
a chatbot (BotUI framework)
A BotUI is a JavaScript framework to build UI for your chatbots.
If you are new to BotUI framework, I recommend you to have basic knowledge about it from https://docs.botui.org/index.html
Overview
To show a message in the bot interface, we call the message.add
method on BotUI instance. messages could be some text, links, images, and icons.
Here’s how to display some text in a message:
botui.message.add({
content: 'Hello User.'
});
similarly, we can embed a YouTube video in a message:
botui.message.add({
type: 'embed', // this is 'text' by default
content: 'https://www.youtube.com/embed/ZRBH5vHhm4c'
});
We can also embed some HTML content in the message:
botui.message.add({
type: 'html', // this is 'text' by default
content: 'Hello, this is a <b>bold message</b>.'
});
What happens here is that it would simply create an iframe
element and set content
as its src
URL. So anything that can be shown in an iframe
can be embedded in a BotUI
message.
Embedding a Webpage
So here we can make use of type: ‘html'
in message.add
method to embed a webpage in a message container.
let’s see how.
botui.message.add({
type: 'html'
content:'<iframe src="https://docs.botui.org/index.html" style="height:400px; width:100%; "></iframe>'
});
the above code contains the iframe
element as thecontent
with src
of a webpage that will be displayed in the message container.
let’s see this with an example:
var botui = new BotUI('help-bot');botui.message.add({
content: 'Hello User !'
}).then(function(){
botui.action.button({
action : [ {text: 'BotUI' , value: 'botui'} ]
}).then(function(){
botui.message.add({
type: 'html',
content:'<iframe src="https://docs.botui.org/index.html" style="height:380px ; width:100%; "></iframe>'});
});
});
I hope this blog helped your query. You can also have a lot more fun with this chatbot framework.