html - Web チャットを Web サイト全体で固定する

Question

Microsoft Bot を作成し、自分の Web サイトに展開したいと考えています。チャット ボットを Web サイトの特定の場所に固定/ピン留めして、別のページを閲覧してもそこに表示されたままにするにはどうすればよいですか。Web チャットに iFrame を使用しており、チャットを Web サイトの右下隅に表示したいと考えています。以前はボットをテストしていたので、Web サイトにサンプル ページを作成し、折りたたみ可能な iFrame を配置しました。これは私が使用しているコードです:

<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>

これはそのページで完全に実行されているようですが、インデックスに載せたいので、誰かが別のページを閲覧してもそこにとどまるべきです.