Scroll-Triggered Widget

Show the Alhena chat widget only after the user scrolls down the page, reducing initial visual clutter.

This example shows how to hide the chat widget on initial page load and only show it after the user scrolls down. This is useful for landing pages or content-heavy sites where you want to minimize distractions while still offering support.

What You'll Learn

Hide the widget on initial page load using CSS
Detect scroll events
Show the widget after a scroll threshold
Control widget visibility programmatically

Use Case

Showing the chat widget immediately can:

Distract users from your content
Increase perceived page load time
Feel intrusive on landing pages

By delaying the widget until the user scrolls, you:

Let users engage with your content first
Indicate the user is actively browsing
Show support when it's more likely to be needed

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll-Triggered Widget Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            line-height: 1.6;
        }

        .content {
            max-width: 800px;
            margin: 0 auto;
        }

        /* Hide widget initially */
        #helix-chat-container {
            display: none;
        }
    </style>
</head>
<body>

<div class="content">
    <h1>Welcome to Our Website</h1>
    <p>Scroll down to see more content...</p>

    <!-- Tall content to enable scrolling -->
    <div style="height: 1500px; background: linear-gradient(#f5f5f5, #e0e0e0); padding: 20px; margin: 20px 0;">
        <p>This is placeholder content. The chat widget will appear after you scroll down a bit.</p>
    </div>

    <h2>More Content Here</h2>
    <p>The chat widget should now be visible.</p>
</div>

<!-- Alhena SDK -->
<script>
document.gleenConfig = {
    company: 'your-company-key',
    apiBaseUrl: 'https://app.alhena.ai'
};
</script>
<script src="https://app.alhena.ai/sdk/gleenWidget.js"></script>

<!-- Scroll detection logic -->
<script>
(function() {
    var widgetShown = false;
    var scrollThreshold = 100; // pixels

    function showChatWidget() {
        if (widgetShown) return;

        var container = document.getElementById('helix-chat-container');
        if (container) {
            container.style.display = 'block';
            widgetShown = true;
            console.log('Chat widget shown after scroll');
        }
    }

    function handleScroll() {
        var scrollPosition = window.scrollY || window.pageYOffset;

        if (scrollPosition > scrollThreshold) {
            showChatWidget();
            // Remove listener after showing (optimization)
            window.removeEventListener('scroll', handleScroll);
        }
    }

    window.addEventListener('scroll', handleScroll);

    // Also show after a timeout as fallback
    setTimeout(function() {
        showChatWidget();
    }, 30000); // Show after 30 seconds regardless of scroll
})();
</script>

</body>
</html>

How It Works

CSS hiding: The #helix-chat-container element is hidden with display: none
Scroll listener: We listen for scroll events on the window
Threshold check: When scroll position exceeds the threshold (100px by default), show the widget
One-time trigger: Remove the scroll listener after showing to avoid unnecessary checks
Fallback timeout: Show the widget after 30 seconds even without scroll (for users who don't scroll)

Customization Options

Change scroll threshold

Adjust when the widget appears:

var scrollThreshold = 300; // Show after scrolling 300px

Show based on percentage of page

function handleScroll() {
    var scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;

    if (scrollPercent > 25) { // After scrolling 25% of the page
        showChatWidget();
        window.removeEventListener('scroll', handleScroll);
    }
}

Show when reaching a specific element

function handleScroll() {
    var targetElement = document.getElementById('support-section');
    var elementTop = targetElement.getBoundingClientRect().top;
    var windowHeight = window.innerHeight;

    if (elementTop < windowHeight) {
        showChatWidget();
        window.removeEventListener('scroll', handleScroll);
    }
}

Add with manual buttons

<button id="open-chat">Open Chat</button>
<button id="close-chat">Close Chat</button>

<script>
document.getElementById('open-chat').addEventListener('click', function() {
    showChatWidget();
    window.gleenWidget.open();
});

document.getElementById('close-chat').addEventListener('click', function() {
    window.gleenWidget.close();
});
</script>

With Event Logging

Track widget events for analytics:

window.gleenWidget.on('widget:loaded', function() {
    console.log('Widget loaded and ready');
});

window.gleenWidget.on('widget:opened', function() {
    console.log('User opened the chat');
    // Track in analytics
    gtag('event', 'chat_opened', {
        trigger: 'scroll'
    });
});

window.gleenWidget.on('widget:closed', function() {
    console.log('User closed the chat');
});

Complete Example with All Features

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Scroll-Triggered Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
        }

        .controls {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }

        .controls button {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }

        #helix-chat-container {
            display: none;
        }
    </style>
</head>
<body>

<div class="controls">
    <button onclick="handleOpen()">Open Chat</button>
    <button onclick="handleClose()">Close Chat</button>
    <button onclick="handleToggle()">Toggle Chat</button>
</div>

<h1>Welcome</h1>
<p>The chat widget appears after scrolling or clicking the buttons above.</p>

<div style="height: 2000px; padding: 20px;">
    <p>Scroll down to trigger the chat widget...</p>
</div>

<!-- Alhena SDK -->
<script>
document.gleenConfig = {
    company: 'your-company-key',
    apiBaseUrl: 'https://app.alhena.ai'
};
</script>
<script src="https://app.alhena.ai/sdk/gleenWidget.js"></script>

<script>
// Widget visibility control
var widgetShown = false;

function showChatWidget() {
    if (widgetShown) return;

    var container = document.getElementById('helix-chat-container');
    if (container) {
        container.style.display = 'block';
        widgetShown = true;
    }
}

// Scroll trigger
window.addEventListener('scroll', function onScroll() {
    if (window.scrollY > 100) {
        showChatWidget();
        window.removeEventListener('scroll', onScroll);
    }
});

// Button handlers
function handleOpen() {
    showChatWidget();
    window.gleenWidget.open();
}

function handleClose() {
    window.gleenWidget.close();
}

function handleToggle() {
    showChatWidget();
    window.gleenWidget.toggle();
}

// Event logging
window.gleenWidget.on('widget:loaded', function() {
    console.log('widget:loaded');
});

window.gleenWidget.on('widget:opened', function() {
    console.log('widget:opened');
});

window.gleenWidget.on('widget:closed', function() {
    console.log('widget:closed');
});
</script>

</body>
</html>

JavaScript API - Widget control methods
Events Reference - Widget lifecycle events
Styles API - Position and appearance options

PreviousHuman Handoff Widget NextCustom Launcher & Nudge UI

Last updated 5 months ago