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>

PreviousOpen other external widget once human transfer is initiated NextWebsite SDK - Custom data

Last updated 3 months ago