SharePoint Diaries: Minimalistic Chatbot Webchat Implementation with just JQuery

This assumes you already have a chat bot and know its secret key and bot id. Also, you want a chat bot button on right hand corner of your screen to open and close the chat window.
There is a git-hub implementation of that but it is using react and full fledged solution. If you want a quick implementation, continue reading on.

Here is what it looks like -

Here is the link to download the full code. (Please remember to update the secret key and bot id)

Html for implementation -

<!DOCTYPE html>
<html>
<head>
<style>
#botDiv {
height:500px;
}

#dialogContainer {
right: 20px;
background-color: hsla(0,0%,100%,.8);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 4px;
box-shadow: 0 0 20px rgba(0,0,0,.2);
border: 4px solid #39c;
bottom: 80px;
display: flex;
flex-direction: column;
max-width: 400px;
min-width: 320px;
position: absolute;
/* top: 20px; */
width: 30%;
height: 500px;
}

#chatButton {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 2001;
}

.chat {
height: 52px;
width: 52px;
}

.chat {
background-color: #414244 !important;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
color: white !important;
height: 50px;
width: 50px;
border-radius: 50%;
font-family: "TW Cen MT", "Segoe UI", Arial, sans-serif !important;
text-decoration: none;
border: 1px solid #ffffff;
display: block;
}

.chat img {
position: relative;
}

.chat img {
display: inline-block;
padding-bottom: 1px;
background: transparent;
width: 1.5em;
left: 50%;
top: 45%;
-webkit-transform: translateX(-50%) translatey(-50%);
-moz-transform: translateX(-50%) translatey(-50%);
transform: translateX(-50%) translatey(-50%);
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<div id="chatButton">
<span class="bot-notification" style="display:none">1</span>
<a class="chat" href="#" id="openDialog">
<img alt="Chat Bubble" src="img/chat-bubble.svg">
</a>
</div>
<div id="dialogContainer" style="display:none;"><div id="botDiv" role="main" /></div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
var INPEXBot = (function () {
var _botOpened = false;

$("#openDialog").click(function () {
if (!_botOpened) {
openBotDialog();
}
else {
closeBotDialog();
}
return false;
});

function closeBotDialog() {
_botOpened = false;
$('#dialogContainer').hide();
}

function openBotDialog() {
_botOpened = true;
$('#dialogContainer').show();
activateBot();
}

function activateBot() {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: 'YOUR SECRET KEY'
}),
userID: 'YOUR BOT ID'
},
document.getElementById('botDiv')
);
};

})();
</script>
</body>
</html>

SharePoint Diaries

Monday, July 29, 2019

Minimalistic Chatbot Webchat Implementation with just JQuery

No comments:

Post a Comment