# Scroll-Triggered Widget 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 ```html Scroll-Triggered Widget Example

Welcome to Our Website

Scroll down to see more content...

This is placeholder content. The chat widget will appear after you scroll down a bit.

More Content Here

The chat widget should now be visible.

``` ## How It Works 1. **CSS hiding**: The `#helix-chat-container` element is hidden with `display: none` 2. **Scroll listener**: We listen for scroll events on the window 3. **Threshold check**: When scroll position exceeds the threshold (100px by default), show the widget 4. **One-time trigger**: Remove the scroll listener after showing to avoid unnecessary checks 5. **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: ```javascript var scrollThreshold = 300; // Show after scrolling 300px ``` ### Show based on percentage of page ```javascript 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 ```javascript 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 ```html ``` ## With Event Logging Track widget events for analytics: ```javascript 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 ```html Full Scroll-Triggered Example

Welcome

The chat widget appears after scrolling or clicking the buttons above.

Scroll down to trigger the chat widget...

``` ## Related * [JavaScript API](/docs/developer-reference/website-sdk/javascript-api.md) - Widget control methods * [Events Reference](/docs/developer-reference/website-sdk/events.md) - Widget lifecycle events * [Styles API](/docs/developer-reference/website-sdk/styles-api.md) - Position and appearance options --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://alhena.gitbook.io/docs/developer-reference/website-sdk/examples/scroll-triggered-widget.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.