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 srcof 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.

https://docs.botui.org/index.html