<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
/* Define the CSS style for the chat bot container */
#webchat-container {
position: fixed;
bottom: 15px;
right: 25px;
border: 3px solid #226CCB;
border-radius: 20px;
overflow: hidden;
transition: height 0.3s ease-in-out, width 0.3s ease-in-out;
z-index: 9999;
background: white;
}
#webchat-cover {
cursor: pointer;
width: 125px;
height: 125px;
border-radius: 20px;
#background-color: #161515;
display: flex;
justify-content: center;
align-items: center;
position: sticky;
color: white;
}
#webchat-header {
background-color: #ffdc02;
display: none;
justify-content: center;
align-items: center;
color: black;
width: 100%;
position: static;
height: 25px;
}
#webchat {
display: none;
overflow: auto;
height: 95%;
}
/* Overlay for preventing interactions with underlying elements */
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 95%;
display: none;
background: transparent;
z-index: 9998;
}
/* Media query for smaller screens, e.g., phones */
@media (max-width: 768px) {
#webchat-container {
height: 40%;
width: 60%;
}
#webchat-cover {
width: 40px;
height: 40px;
}
}
/* Preserve link color */
a {
color: #ffdc02;
}
</style>
</head>
<body>
<!-- Transparent overlay for preventing interactions with underlying elements -->
<div id="overlay" onclick="collapseBot()"></div>
<div id="webchat-container" >
<div id="webchat-cover" onclick="expandBot()" >
<img id="webchat-logo" src="Habio.png" alt="Neura Logo" style="width: 100%; height: 100%;">
</div>
<div id="webchat-header">
<span><b>SOLO by HNB - Virtual Assistant</b></span>
</div>
<div id="webchat">
<!-- Chat bot content goes here -->
</div>
</div>
<script>
let isChatting = false;
let resizingTimeout;
function expandBot() {
if (!isChatting) {
document.getElementById('webchat-cover').style.display = 'none';
document.getElementById('webchat').style.display = 'block';
document.getElementById('webchat-header').style.display = 'flex';
document.getElementById('overlay').style.display = 'block';
isChatting = true;
const screenWidth = window.innerWidth;
if (screenWidth <= 768) {
document.getElementById('webchat-container').style.height = '40%';
document.getElementById('webchat-container').style.width = '60%';
} else {
document.getElementById('webchat-container').style.height = '60%';
document.getElementById('webchat-container').style.width = '40%';
}
startResizingTimeout();
}
}
function collapseBot() {
document.getElementById('webchat-cover').style.display = 'flex';
document.getElementById('webchat-header').style.display = 'flex';
document.getElementById('webchat').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
resetToInitialSize();
}
const styleSet = window.WebChat.createStyleSet({
bubbleBackground: '#0d5297',
bubbleFromUserBackground: '#ffdc02',
bubbleTextColor: 'white',
bubbleFromUserTextColor: 'black',
bubbleBorderRadius: 5,
bubbleFromUserBorderRadius: 5,
backgroundColor: 'transparent'
});
styleSet.textContent = {
...styleSet.textContent,
fontFamily: 'Raleway',
fontSize: '16px',
fontWeight: 'normal',
};
const styleOptions = {
botAvatarImage: 'Habio.png',
botAvatarInitials: 'SB',
userAvatarImage: 'user.jfif',
userAvatarInitials: 'UB'
};
// WebChat configuration and rendering
const directLine = window.WebChat.createDirectLine({
token: 'w_bfsAKA8bU.ESJmsXz-l4OTdPhDTVOg-r5ay48E87MwqrlFoxmCqDs'
});
const webchatContainer = document.getElementById('webchat');
window.WebChat.renderWebChat({
directLine: directLine,
styleSet,
styleOptions
}, webchatContainer);
const resetToInitialSize = () => {
isChatting = false;
const screenWidth = window.innerWidth;
if (screenWidth <= 768) {
document.getElementById('webchat-container').style.width = '125px';
document.getElementById('webchat-container').style.height = '125px';
} else {
document.getElementById('webchat-container').style.width = '125px';
document.getElementById('webchat-container').style.height = '125px';
}
};
const startResizingTimeout = () => {
clearTimeout(resizingTimeout);
resizingTimeout = setTimeout(resetToInitialSize, 300000); // 30 seconds
};
</script>
</body>
</html>