Skip to content

Instantly share code, notes, and snippets.

@Power-Maverick

Power-Maverick/EmbedPVAChatBot.html

Last active June 1, 2023 20:07
Show Gist options
  • Save Power-Maverick/f85d6c96d5d8c0c607bf70a9bce4f733 to your computer and use it in GitHub Desktop.
Save Power-Maverick/f85d6c96d5d8c0c607bf70a9bce4f733 to your computer and use it in GitHub Desktop.
Download ZIP
Embedding PVA ChatBot on Website
Raw
EmbedPVAChatBot.html
<!-- Chat Bot -->
<button onclick="openChat()" role="openchatbutton" class="open-button">
<i class="fa fa-4x fa-comments"></i>
</button>
<div role="openchat" id="chatWindow" class="chat-popup" style="order: 3; position: relative; width: 400px; min-width: 400px; height: 100%;">
<div>
<div id="webchat" role="main" id="webchat"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
// Only needed for Power Apps Portals if IDs are not retained
//document.querySelectorAll('[role="main"]')[0].setAttribute("id", "webchat");
//document.querySelectorAll('[role="openchat"]')[0].setAttribute("id", "chatWindow");
const styleOptions = {
// Add styleOptions to customize Web Chat canvas
hideUploadButton: true,
botAvatarInitials: "BOT",
userAvatarInitials: "You",
backgroundColor: "rgba(255,255,255,0.85)",
};
// 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;
const store = window.WebChat.createStore(
{},
({ dispatch }) => next => action => {
if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
dispatch({
meta: {
method: "keyboard",
},
payload: {
activity: {
channelData: {
postBack: true,
},
//Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
name: 'startConversation',
type: "event"
},
},
type: "DIRECT_LINE/POST_ACTIVITY",
});
}
return next(action);
}
);
fetch(theURL)
.then((response) => response.json())
.then((conversationInfo) => {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: conversationInfo.token,
}),
store: store,
styleOptions,
},
document.getElementById("webchat")
);
})
.catch((err) => console.error("An error occurred: " + err));
</script>
<script>
function openChat() {
var chatWindowElement = document.getElementById("chatWindow");
if (window.getComputedStyle(chatWindowElement).display === "none") {
document.getElementById("chatWindow").style.display = "block";
} else {
document.getElementById("chatWindow").style.display = "none";
}
}
</script>
</div>
Raw
PVAChatBot.css
/* --------------------------------
Bot style
-------------------------------- */
div[role="form"] {
background: rgba(255, 255, 255, 0.6);
}
div[role="status"] {
border-bottom: 1px solid rgb(230, 230, 230);
}
div[role="status"] button {
border-color: rgb(0, 0, 0, 0.4) !important;
color: rgb(0, 0, 0) !important;
}
#webchat {
position: fixed;
height: calc(100% - 230px);
z-index: 9999;
width: 400px;
top: 140px;
right: 30px;
overflow: hidden;
}
.chat-popup {
display: none;
}
/*Button Style*/
.open-button {
background-color: transparent;
color: white;
border: none;
cursor: pointer;
opacity: 0.7;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
/*Animation*/
@keyframes slidein {
0% {right:-400px;}
100% {right:30px;}
}
.showChat {
animation-name: slidein;
animation-duration: 1s;
animation-delay: 0s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment