Alhena
  • Introduction
  • Getting Started
  • Architecture
  • Reference
    • Website SDK
      • Configure Proactive Nudges
    • Product FAQs
    • Website chatsdk events
    • Website chatsdk APIs
    • Chat SDK api and events examples
      • Open other external widget once human transfer is initiated
      • Show the Alhena AI widget only when someone scroll the page by 5 px
    • Website SDK - Custom data
      • Website SDK - Customer data with Agent
    • Website SDK - Internationalization
    • API Reference
      • API calls
    • Device Compatibility
  • Tutorials
    • AI Training
      • Training Steps
      • Training Data Sources
        • Websites
        • Youtube videos
        • Google Drive
        • Twitter Pages
        • Discord Messages
        • Confluence Pages
        • Upload Documents
        • Github
        • Zendesk Tickets
        • Freshdesk Tickets
        • Freshchat Tickets
        • Custom data sources
        • Shopify API
        • Woocommerce API
        • PDF Crawling
      • Training Frequently Asked Questions
    • Tuning Alhena AI Post Training
      • Best Practices for configuring the Alhena AI’s personality and guidelines
      • Adding Human Feedback for improving specific Questions
      • Adding to your knowledge base with FAQs
      • Frequently Asked Questions - Tuning Responses
    • QAing Al Conversations
      • Smart Flagging: Streamline Your AI Quality Assurance
    • Integrations
      • Alhena Website Chat SDK
        • Customizing Your Alhena Chat Widget
      • Integrating Alhena AI With Slack
      • Integrating Alhena AI With Discord
      • Integrating Alhena With Freshdesk
      • Integrating Alhena AI With Zendesk
      • Integrating Alhena AI With Email
      • Integrating Alhena AI With Shopify
      • Integration Alhena AI With Trustpilot
      • Integrating Alhena With Gorgias
      • Integrating Alhena With Kustomer
    • Notifications
    • Alhena Dashboard
      • Managing Team
Powered by GitBook
On this page
  1. Reference
  2. Chat SDK api and events examples

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 initiatedNextWebsite SDK - Custom data

Last updated 2 months ago