CODEWITHSUNDEEP
javascriptbotframework
Alain Daccache
Alain Daccache

Reputation: 125

Embed Microsoft Bot in a collapsible window via Direct Line

Using the WebChat, there is a way to embed the bot in a collapsible window

var xhr = new XMLHttpRequest();

xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
xhr.setRequestHeader('Authorization', 'BotConnector ' + 'webchat-secret');
xhr.send();
xhr.onreadystatechange = processRequest;

function processRequest(e) {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    document.getElementById("chat").src = "https://webchat.botframework.com/embed/nodejsbot98?t=" + response
  }
}
(function() {
  document.querySelector('body').addEventListener('click', function(e) {
    e.target.matches = e.target.matches || e.target.msMatchesSelector;
    if (e.target.matches('#botTitleBar')) {
      var botDiv = document.querySelector('#botDiv');
      botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
    };
  });
}());

However, if I connect the bot using direct line (below), and keep the event listener function, I get a collapsible window but with no bot inside.

var botConnection = new BotChat.DirectLine({
  secret: 'direct-line secret',
});

var user = {
  id: 'userid',
  name: 'username'
};

var bot = {
  id: 'botid',
  name: 'botname'
};

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

botConnection
  .postActivity({
    type: "event",
    value: "",
    from: {
      id: "me"
    },
    name: "greeting",
    data: {
      firstname: 'Alain',
      gender: 'male'
    }
  })
  .subscribe(id => console.log("success"));

This is the html

<div id='botDiv' style='height: 38px; position: fixed; bottom: 0; z-index: 1000; background-color: #fff'>
    <div id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor: pointer;'></div>
    <div id = 'chat' width='400px' height='600px' ></div>
</div>

Upvotes: 1

Views: 1231

Answers (1)

Gary Liu
Gary Liu

Reputation: 13918

You set the embed url to a div DOM in the response of the http request at:

document.getElementById("chat").src = "https://webchat.botframework.com/embed/nodejsbot98?t=" + response

And DIV doesn't have a src property, you can simply modifty:

<div id = 'chat' width='400px' height='600px' ></div>

to

<iframe id='chat' width='400px' height='600px'></iframe>

to solve your issue. Also, there is no necessary to use the botframework webchat library as you mentioned at the second code snippet.

update

It seems to be a CSS issue, you can try add and modify following CSS style

//add
.wc-chatview-panel {
        width: 400px;
        height: 600px;
        position: relative;
    }

add css style z-index:2 to botTitleBar div.

Upvotes: 2

Related Questions