在Microsoft Bot Framework Widget的聊天框中添加"打开和关闭"按钮

Question

我正试图在我的聊天机器人中添加一个按钮，以便打开(启动(和关闭它，但我很难将它添加到聊天机器人区域，我也不确定它是否能工作，因为我无法测试它。如果这很容易解决，我很抱歉，但我在这里有点新手。

我的小部件代码如下：

<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

我解决了这个问题，所以发布了我之前使用的代码的更新：

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