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

Question

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.

Accepted Answer