Last active
June 1, 2023 20:07
-
-
Save Power-Maverick/83491048073dbc4a94f8b5abf745f051 to your computer and use it in GitHub Desktop.
Embed PVA Chat Bots on Website
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment