Embed PVA Chat Bots on Website

ButtonClick.html

<script>
    function openChat() {
      var chatWindowElement = document.getElementById("chatWindow");
      if (window.getComputedStyle(chatWindowElement).display === "none") {
        document.getElementById("chatWindow").style.display = "block";
        document.getElementById("chatbutton").innerHTML = "Close";
      } else {
        document.getElementById("chatWindow").style.display = "none";
        document.getElementById("chatbutton").innerHTML = "Chat";
      }
    }
  </script>

EmbedPVAChatBot.html

<button onclick="openChat()" role="openchatbutton" class="open-button">Chat</button>
<div role="openchat" class="chat-popup" style="order: 3; position: relative; width: 400px; min-width: 400px; height: 100%;">
  <div>
    <div role="main"></div>
  </div>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <script>
    document.querySelectorAll('[role="main"]')[0].setAttribute("id", "webchat");
    document.querySelectorAll('[role="openchat"]')[0].setAttribute("id", "chatWindow");
    document.querySelectorAll('[role="openchatbutton"]')[0].setAttribute("id", "chatbutton");
    const styleOptions = {
      // Add styleOptions to customize web chat canvas
      hideUploadButton: true,
      // Optional - do not include if you don't want to overwrite framework's images
      botAvatarImage: 'your-bot-image-here',
      // Optional - do not include if you don't want to overwrite framework's images
      userAvatarImage: 'your-user-image-here'
    };
    // 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;
    fetch(theURL)
      .then(response => response.json())
      .then(conversationInfo => {
        window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({
              token: conversationInfo.token,
            }),
            styleOptions
          },
          document.getElementById('webchat')
        );
      })
      .catch(err => console.error("An error occurred: " + err));
  </script>
</div>

main.css

.main {
    margin: 18px;
    border-radius: 4px;
}

div[role="form"]{
    background-color: black;
} 
div[role="log"]{
    background: gainsboro;
} 
div[role="status"]{
    background: darkgray;
} 

#webchat {
  position: fixed;
  height: calc(100% - 205px);
  z-index: 9999;
  width: 400px;
  top: 130px;
  overflow: hidden;
}

/*****/

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
    background-color: #555;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 8px;
    width: 400px;
    z-index: 9999;
  }
  
  /* The popup chat - hidden by default */
  .chat-popup {
    display: none;
  }