html - How to create a side window or iframe that shows data that was gathered by a Web-Chat in one web page?

Question

I am building a chat bot via the Microsoft bot framework and recently deployed it as web-chat on a web page. In my web page, it is essential that I have a side box where data is shown that is gathered and calculated from the bot.

Can anyone help me to create this? Right now, I don't know how to create this window/box/iframe.

My chatbot negotiates with the user. I want to show the user data like the items that are available for negotiating in a kind of information box. It should be able to refresh it after an event that happens during the chat. So far, i implemented the web chat with inside the html code of the webpage as it is described by the Microsoft docs for web chat.

Answer 1

The easiest way to display information gathered from the chat is to send back channel events from the bot with the data and then intercept the message with a custom activity middleware in WebChat. Then you can process the data on the webpage however you'd like.

Bot - NodeJs SDK v4

In the bot, we are going to send back channel events to WebChat with the data we have gathered in the chat. Basically, you just need to send an activity with the type property set to 'event' and the name attribute set to some string value - we are going to use data in this case. The conversation data is going to be encapsulated in the activity's channel data.

await step.context.sendActivity({name: 'data', type: 'event', channelData: data});

WebChat - Custom Middleware

In WebChat, we are going to implement a custom middleware that is going to check incoming activities for the type and name values we specified earlier. When we do encounter a back channel event, we can handle the incoming data and update the web page.

const store = createStore(
  {},
  ({ dispatch }) => next => action => {
    if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
      let { channelData, name, type } = action.payload.activity;
      channelData || (channelData = {});

      if(type === 'event' && name === 'data') {
        this.props.handleData(channelData);
      }
    }
    return next(action);
  });

Screenshot

Since WebChat is built with React, I would highly recommend building this web page with React as well. There is already a sample - customization-selectable-activity - that splits the page into two columns with WebChat in one column and an activity inspector in the other. You could easily modify this sample to meet your requirements by adding the custom middleware to WebChat in this sample and changing the inspector view to a data table.

Requesting WebChat Token

Note, for the simplicity of getting started,you can fetch the DirectLine token from the client side; however, it is recommended that you create a backend REST API to generate and manage your tokens.

const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', 
{ 
  method: 'POST',
  headers: {
    'Authorization': `Bearer <SECRET>`,
    'Content-Type': 'application/json'
  },
});

const { token } = await res.json();

Hope this helps.