CODEWITHSUNDEEP
botframeworkweb-chat
Jeff_hu
Jeff_hu

Reputation: 427

How to add a button which can close webchat page?

I'm using webchat V3 and bot framework V3. Is it possible to send users a button which could close the webchat page?

Upvotes: 0

Views: 1013

Answers (2)

Steven Kanberg
Steven Kanberg

Reputation: 6393

As requested, here is the v3 solution. The key elements are .filter and .subscribe. Filter listens to incoming activities from the bot to the page. Subscribe listens to activities and events on the page allowing you to act on them before sending data to the bot.

This example is "using" TJ's hero card of type 'imBack'. Alternatively, if you don't want text posted by the bot to the user showing the selection you can send a 'postBack'. In this case, the value is not displayed and will require you to filter on slightly different activity properties (channelData and value).

Please note, I am instantiating direct line here by including the secret for simplicity's sake. In production, you will want to exchange your secret for a token to mitigate any security issues.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Bot Chat</title>

  <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />

  <style>
    #botchat {
      border: 1px solid #333;
      float: left;
      height: 600px;
      position: relative;
      width: 460px;
    }

  </style>
</head>

<body>
  <div id="botchat"></div>

  <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>

  <script>
    const params = BotChat.queryParams(location.search);

    const user = {
      id: params['userid'] || 'userid',
      name: params['username'] || 'username'
    };

    const bot = {
      id: 'bot',
      name: 'bot'
    };

    window['botchatDebug'] = params['debug'] && params['debug'] === 'true';

    const botConnection = new BotChat.DirectLine({
      secret: 'xxxxxxx'
    });

    BotChat.App({
      bot: bot,
      botConnection: botConnection,
      user: user
    }, document.getElementById('botchat'));

    botConnection.activity$
      .filter(function (activity) {
        if (activity.type === 'message' && activity.text === 'close' ) {
          window.close();
        }
      })
      .subscribe(function (activity) {
        // Make function calls and track activity/events from the page to the bot
      });

  </script>
</body>

</html>

Hope of help!

Upvotes: 3

tdurnford
tdurnford

Reputation: 3712

I don't believe this is possible in Web Chat v3; however, in Web Chat v4 you can use the card action middleware to change the actions default behavior. Then from the bot you can send a card with a button to close the window.

Web Chat v4

const cardActionMiddleware = () => next => card => {
  const { cardAction: { value }} = card;
  if (value === 'close') {
    window.close();
  }
  next(card);
}

window.WebChat.renderWebChat({
  cardActionMiddleware,
  directLine
}, document.getElementById('webchat'));

Bot Framework SDK v4 (Node)

const card = CardFactory.heroCard(
  'Close Window',
  null,
  CardFactory.actions([
    {
      type: 'imBack',
      title: 'close',
      value: 'Close'
    }])
);

await context.sendActivity({ attachments: [card] });

Note, Web Chat v3 is currently in sunset and no longer supported, but Web Chat v4 is compatible with v3 bots. Take a look at the Migration documentation for more details.

Hope this helps!

Upvotes: 3

Related Questions