Embedding PVA ChatBot on Website

EmbedPVAChatBot.html

<!-- Chat Bot -->
<button onclick="openChat()" role="openchatbutton" class="open-button">
  <i class="fa fa-4x fa-comments"></i>
</button>
<div role="openchat" id="chatWindow" class="chat-popup" style="order: 3; position: relative; width: 400px; min-width: 400px; height: 100%;">
  <div>
    <div id="webchat" role="main" id="webchat"></div>
  </div>

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

  <script>
    // Only needed for Power Apps Portals if IDs are not retained
    //document.querySelectorAll('[role="main"]')[0].setAttribute("id", "webchat");
    //document.querySelectorAll('[role="openchat"]')[0].setAttribute("id", "chatWindow");

    const styleOptions = {
      // Add styleOptions to customize Web Chat canvas
      hideUploadButton: true,
      botAvatarInitials: "BOT",
      userAvatarInitials: "You",
      backgroundColor: "rgba(255,255,255,0.85)",
    };

    // Add your BOT ID below
    var BOT_ID = "YOUR-BOT-ID-HERE";
    var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

    const store = window.WebChat.createStore(
        {},
        ({ dispatch }) => next => action => {
            if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
                dispatch({
                    meta: {
                        method: "keyboard",
                    },
                    payload: {
                        activity: {
                                channelData: {
                                    postBack: true,
                                },
                                //Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
                                name: 'startConversation',
                                type: "event"
                            },
                    },
                    type: "DIRECT_LINE/POST_ACTIVITY",
                });
            }
            return next(action);
        }
    );

    fetch(theURL)
      .then((response) => response.json())
      .then((conversationInfo) => {
        window.WebChat.renderWebChat(
          {
            directLine: window.WebChat.createDirectLine({
              token: conversationInfo.token,
            }),
            store: store,
            styleOptions,
          },
          document.getElementById("webchat")
        );
      })
      .catch((err) => console.error("An error occurred: " + err));
  </script>
  <script>
    function openChat() {
      var chatWindowElement = document.getElementById("chatWindow");
      if (window.getComputedStyle(chatWindowElement).display === "none") {
        document.getElementById("chatWindow").style.display = "block";
      } else {
        document.getElementById("chatWindow").style.display = "none";
      }
    }
  </script>
</div>

PVAChatBot.css

/* -------------------------------- 
Bot style
-------------------------------- */
div[role="form"] {
  background: rgba(255, 255, 255, 0.6);
}
div[role="status"] {
  border-bottom: 1px solid rgb(230, 230, 230);
}
div[role="status"] button {
  border-color: rgb(0, 0, 0, 0.4) !important;
  color: rgb(0, 0, 0) !important;
}
#webchat {
  position: fixed;
  height: calc(100% - 230px);
  z-index: 9999;
  width: 400px;
  top: 140px;
  right: 30px;
  overflow: hidden;
}
.chat-popup {
  display: none;
}
/*Button Style*/
.open-button {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}
/*Animation*/
@keyframes slidein {
  0%   {right:-400px;}
  100%  {right:30px;}
}
.showChat {
  animation-name: slidein;
  animation-duration: 1s;
  animation-delay: 0s;
}