Estoy tratando de agregar un botón a mi chatbot para que pueda abrirse (iniciarse) y cerrarse, pero tengo problemas para agregarlo al área de chatbot, tampoco estoy seguro de si funcionará, ya que no puedo probarlo . Disculpas si esto es fácil de resolver, pero soy un poco novato aquí.
El código de mi widget es el siguiente:
<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>Lo resolví, así que publiqué una actualización del código que usé anteriormente:
<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;