在 Microsoft Bot Framework 小部件中向 Chatbox 添加打开和关闭按钮答案

【问题标题】：Add an Open and Close button to Chatbox in Microsoft Bot Framework Widget在 Microsoft Bot Framework 小部件中向 Chatbox 添加打开和关闭按钮
【发布时间】：2022-02-14 23:58:36
【问题描述】：

我正在尝试向我的聊天机器人添加一个按钮，以便可以打开（启动）和关闭它，但我正在努力将其添加到聊天机器人区域，我也不确定它是否能正常工作'测试它。抱歉，如果这很容易解决，但我在这里有点新手。

我的小部件代码如下：

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

【问题讨论】：

标签： javascript html chatbot

【解决方案1】：

我已经解决了，所以发布了我之前使用的代码的更新：

<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://docs.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;

【讨论】：