I've created a Microsoft Bot and want to deploy it on my website. How do you keep a chat bot fixed/pinned to a certain location on the website, that it stays there visible even if you browse through different pages. I am using iFrame for the web chat and want to display the chat at the bottom right corner of the website.Previously I was in testing the bot so I created a sample page on the website and put the collapsible iFrame there. This is the code I am using:
<div id="bot" />
<Script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed;
right: 0; bottom: 0; z-index: 1000; background-color: #fff'><div
id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor:
pointer;'></div><iframe width='400px' height='600px'
src='https://webchat.botframework.com/embed/sec key'></iframe></div>";
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';
};
});
}());
</script>
