Do remember to replace gleen (as your company key) postfix in this https://gleen.ai/chat-iframe/gleen
Install via Gleen JS SDK
You can also install gleen chat sdk with button similar to the experience of chat support.
Make sure to replace company with your company key. company key is the word before dashboard in the dashboard url e.g. If this is your dashboard url https://app.gleen.ai/gleen/dashboard/ then company is gleen
Chat sdk has a number of functions that can be configured to change the experience.
Following methods are exposed in the sdk
open - Opens the chat bubble. If it is already opened it will leave the chat sdk as it is on UI.
close - Closes the chat bubble. If it is already closed it will leave the chat sdk as it is on UI.
toggle - Closed the chat bubble if it is opened and vice - versa
Example code
<!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.gleen.ai/sdk/gleenWidget.js"></script>
<style>
#helix-chat-container {
display: none;
}
</style>
<script>
function showChatWidget() {
document.getElementById('helix-chat-container').style.display = 'block';
}
showChatWidget();
</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();
}
</script>
</body>
</html>
Adding the ability to load the sdk only if it has scrolled some px
On page load you can set the sdk to not show the chat widget and only show it after user has scrolled some px
<!DOCTYPE html><htmllang="en"><head> <metacharset="UTF-8"> <metaname="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> <buttononclick="handleOpen()">Open Chat Widget</button> <buttononclick="handleClose()">Close Chat Widget</button> <buttononclick="handleToggle()">Toggle Chat Widget</button> <divstyle="height: 1000px"></div></main><footer> <p>Sample Footer Information</p></footer><!-- Loading of chat SDK --><script> document.gleenConfig = { company: 'gleen', };</script><scriptsrc="https://app.gleen.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'); });</script></body></html>
Customize the look and feel
SDK has some properties that can be customize as per the need
styles can take the parameter
fontFamily
Please make sure your website has logic to load the font. sdk doesn't load any font. It will use in the style - whatever font has been passed.