Show the Alhena AI widget only when someone scroll the page by 5 px
Example code snippet
In this below code we have following functions
Ability to show the widget only when some scroll the page by 5 px
Ability to toggle, close, open with buttons
Events logging when widget gets opened and close
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample HTML Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
background-color: #f2f2f2;
}
header, main, footer {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
header {
text-align: center;
}
main {
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to the Sample HTML Page</h1>
</header>
<main>
<p>This is a sample content area. You can place your content here.</p>
<button onclick="handleOpen()">Open Chat Widget</button>
<button onclick="handleClose()">Close Chat Widget</button>
<button onclick="handleToggle()">Toggle Chat Widget</button>
<div style="height: 1000px"></div>
</main>
<footer>
<p>Sample Footer Information</p>
</footer>
<!-- Loading of chat SDK -->
<script>
document.gleenConfig = {
company: 'gleen',
};
</script>
<script src="https://app.alhena.ai/sdk/gleenWidget.js"></script>
<style>
#helix-chat-container {
display: none;
}
</style>
<script>
/* Logic to show the widget on scroll */
function showChatWidget() {
document.getElementById('helix-chat-container').style.display = 'block';
}
// Load the chat widget after the user scrolls down 5px, for example
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY || window.pageYOffset;
if (scrollPosition > 5) {
showChatWidget();
// Remove the event listener once the widget is loaded
window.removeEventListener('scroll', arguments.callee);
}
});
</script>
<script>
/* handling the function events for button clicks */
function handleOpen() {
showChatWidget();
window.gleenWidget.open();
}
function handleClose() {
window.gleenWidget.close();
}
function handleToggle() {
window.gleenWidget.toggle();
}
/* handling the SDK APIs */
window.gleenWidget.on('widget:opened', function() {
console.log('widget:opened');
});
window.gleenWidget.on('widget:closed', function() {
console.log('widget:closed');
});
window.gleenWidget.on('widget:loaded', function() {
console.log('widget:loaded');
});
</script>
</body>
</html>Last updated