Add an Open and Close button to Chatbox in Microsoft Bot Framework Widget

Question

I am trying to add a button to my chatbot so it can be opened (started) and closed, but I am struggling to add it into the chatbot area, also I am not sure if it will even work as I can't test it. Apologies if this is simple to solve but I am a bit of a novice here.

My widget code is as follows:

<div
  class="chat-popup"
  id="webchat"
  role="main"
  style="height: 30%; width: 15%; margin-top: 5%; margin-left: 10%"
>
  <span class="close_div" onclick="close_div(1)">✖</span>
</div>

<script
  src="https://omnireach.net/webchat?key=PbjMaijC3EKXWii/ANCiHQ=="
  type="text/javascript"
></script>

<script>
  window.onload = function () {
    var styleOptions = {
      hideUploadButton: false,
      bubbleFromUserBackground: "lightblue",
      sendBoxButtonColor: "red",
      typingAnimationDuration: 5000,
      typingAnimationHeight: 20,
      typingAnimationWidth: 64,
      timestampColor: undefined,
      timestampFormat: "relative",
      botAvatarImage:
        "https://zincgroupdevelopment.com/wp-content/uploads/2021/06/Talk-to-us-1.png",
    };

    orWebChat.start(styleOptions, "webchat");
  };

  function close_div(id) {
    if (id === 1) {
      jQuery("#webchat").hide();
    }
  }
</script>

Answer 1

I worked it out, so posting an update to the code I used earlier:

<div class="chat-popup" id="webchat" role="main" style="height: 30%; width: 15%; margin-top:5%; margin-left:10%"></div>

<button id="open" class="open-button" onclick="openForm()">Open Chat</button>
<button id="close" type="button" class="btn cancel" onclick="closeForm()">Close Chat</button> 

<script src="https://omnireach.net/webchat?key=PbjMaijC3EKXWii/ANCiHQ==" type="text/javascript"></script>

<script>

    window.onload = function() {

        var styleOptions = {

            hideUploadButton: false,
            bubbleFromUserBackground: 'lightblue',
            sendBoxButtonColor: 'red',
            typingAnimationDuration: 5000,
            typingAnimationHeight: 20,
            typingAnimationWidth: 64,
            timestampColor: undefined,
            timestampFormat: 'relative',
            botAvatarImage: 'https://learn.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0'

        };

 

        orWebChat.start(styleOptions, "webchat");

    };

  
  function openForm() {
  document.getElementById("webchat").style.display = "block";
}

function closeForm() {
  document.getElementById("webchat").style.display = "none";
}
  
</script>

#webchat {
  display: none;
  position: fixed;
  bottom: 70px;
  right: 15px;
  border: 3px solid #0076C1;

  
}

#open {
  background-color: green;
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 16px;
  width: 140px;
  height: 40px;
  padding: 16px 20px;
  font-size: 12px;
}


#close {
  background-color: red;
  color: white; 
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 160px;
  width: 140px;
  height: 40px;
  padding: 12px 20px;
  font-size: 12px;