# Useful Tip: Views Saving | How to Load Widget on Scroll or Time Delay

**URL:** <https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791>\
**Category:** Pro Tips\
**Created:** [June 13, 2026, 1:33am UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791 "2026-06-13T01:33:25Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Petar\_Dietrich](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/petar_dietrich/32/92003_2.png) [@Petar\_Dietrich](https://community.elfsight.com/u/Petar_Dietrich)\
**Post date:** [June 13, 2026, 1:33am UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791/1 "2026-06-13T01:33:25Z")

</div>

Every time a user bounces or a bot hits your page, your embedded AI Chatbot widget loads anyway—wasting your precious monthly views.

The lightweight script provided below acts as a smart AI Chatbot widget gatekeeper. Instead of loading the Elfsight AI Chatbot widget instantly, it holds off until a visitor is actually engaged. It triggers the widget **only** after a user scrolls through 50% of the page or stays active for 30 seconds.

To set this up, just add the code below to your website as an HTML snippet using a plugin like **Code Snippets** or **WPCode** , and configure it to load in the **Site Wide Footer**. (Make sure to replace `WIDGETID` with your actual Elfsight widget ID)

It’s a quick fix to stop accidental triggers and keep your quota usage under control.

Enjoy!

* * *

```auto
<div class="elfsight-app-WIDGETID" data-elfsight-app-lazy></div>

<script>
(function() {
    // Configuration: Target the specific widget container
    var widgetContainer = document.querySelector('.elfsight-app-WIDGETID');
    if (!widgetContainer) return;

    var widgetLoaded = false;

    // Core Logic: Function to inject the Elfsight script dynamically
    function loadElfsightWidget() {
        if (widgetLoaded) return;
        widgetLoaded = true;
        var script = document.createElement('script');
        script.src = 'https://elfsightcdn.com/platform.js';
        script.async = true;
        document.body.appendChild(script);
    }

    // Trigger 1: Automatic load after 30 seconds
    setTimeout(loadElfsightWidget, 30000);

    // Trigger 2: Load on scroll (when the user reaches 50% of the page)
    window.addEventListener('scroll', function() {
        var scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
        var scrollPosition = window.scrollY;
        if ((scrollPosition / scrollHeight) >= 0.5) {
            loadElfsightWidget();
        }
    });
})();
</script>

```

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 15, 2026, 2:20pm UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791/2 "2026-06-15T14:20:15Z")

</div>

Hi @Petar_Dietrich 👋

Thanks a lot for sharing your solution with us!

Just to clarify a bit — message usage and views limit aren’t connected. A **view** is counted when the widget code loads on the page, while a **message** is counted when a user actually sends something in the chat.

Overall, your script works really well for saving the views limit, but it only works if there’s **one widget on the page**.

Our devs made a small tweak so it can now be used in **all cases** , even if multiple widgets are installed on the same page:

```auto
// Load AI Chatbot Widget on Scroll or Time Delay (Elfsight)

<script src="https://elfsightcdn.com/platform.js" async></script>
<script>
    (() => {
     const WIDGET_ID = 'WIDGETID'; // Replace WIDGETID with your actual widget ID
        const LOAD_DELAY = 30_000; // Automatic load after 30 seconds
        const SCROLL_THRESHOLD = 0.5; // Load on scroll (when the user reaches 50% of the page)

        const currentScript = document.currentScript;
        let widgetLoaded = false;
        let loadTimeout = null;

        function loadWidget() {
            if (widgetLoaded) {
                return;
            }

            widgetLoaded = true;

            const widget = document.createElement('div');
            widget.classList.add(`elfsight-app-${WIDGET_ID}`);
            currentScript?.parentElement?.append(widget);

            window.removeEventListener('scroll', checkScroll);
            clearTimeout(loadTimeout);
            loadTimeout = null;
        }

        loadTimeout = setTimeout(loadWidget, LOAD_DELAY);

        function checkScroll() {
            const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
            const scrollPosition = window.scrollY;

            if (scrollHeight && (scrollPosition / scrollHeight) >= SCROLL_THRESHOLD) {
                loadWidget();
            }
        }

        window.addEventListener('scroll', checkScroll, { passive: true });
    })();
</script>

```

[Widget ID](https://help.elfsight.com/article/1219-where-to-get-your-widget-id-in-new-dashboard) should be replaced in the **4th** line of this script:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/0/d0477b2a4dd269c8bc4656980ea14efbef6219fb.png)

  

Really appreciate you taking the time to share this — it’s super helpful for the Community 😊

---

<div class="post-metadata">

**Author:** ![Petar\_Dietrich](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/petar_dietrich/32/92003_2.png) [@Petar\_Dietrich](https://community.elfsight.com/u/Petar_Dietrich)\
**Post date:** [June 15, 2026, 3:19pm UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791/3 "2026-06-15T15:19:32Z")

</div>

Hey @Max,

Glad you guys had a chance to review and improve my code snippet. Tested. It works beautifully (actually, both of them 🙂 ). **Teamwork!**

To further assist the community, I would like to suggest:

1. **Code Snippet Title:** `Load Elfsight Widget on Scroll or Time Delay`
2. **Minor Content Tweak** (Add Comments Next to Constants):

```auto
        const WIDGET_ID = 'WIDGETID'; // Replace WIDGETID with your actual widget ID
        const LOAD_DELAY = 30_000; // Automatic load after 30 seconds
        const SCROLL_THRESHOLD = 0.5; // Load on scroll (when the user reaches 50% of the page)

```

Cheers!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 15, 2026, 3:31pm UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791/4 "2026-06-15T15:31:58Z")

</div>

Well noted, I’ve added these comments to the script!

I’ve also slightly adjusted the title of the post since this solution can be applied to any Elfsight widget (not just to the AI Chatbot) 🙂

---

<div class="post-metadata">

**Author:** ![Petar\_Dietrich](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/petar_dietrich/32/92003_2.png) [@Petar\_Dietrich](https://community.elfsight.com/u/Petar_Dietrich)\
**Post date:** [June 15, 2026, 3:33pm UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791/5 "2026-06-15T15:33:25Z")

</div>

Agree! I adjusted my recommended code snippet title to sync with yours.

---

<div class="post-metadata">

**Author:** ![Bob\_Wilson](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/bob_wilson/32/92862_2.png) [@Bob\_Wilson](https://community.elfsight.com/u/Bob_Wilson)\
**Post date:** [June 19, 2026, 12:49pm UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791/6 "2026-06-19T12:49:59Z")

</div>

Interesting observation re the modified script…

I have a couple pages on one site with the Elfsight RSS Feed widget appearing at the bottom of the page. I like the widget performance and the value it adds, but it has always hurt my PageSpeed Insights performance score on mobile, even with Elfsight’s lazy loading. I decided to try a modified version of this script (stripped out the 30 second timer logic), simply replacing the second line of the Elfsight install code with the script. To my pleasant surprise, my performance score jumped from 63 to 98 using the script!

To ensure a fair comparison, I emptied browser cache, purged server cache and then rewarmed it before each test. The PageSpeed insights page warns that “Values are estimated and may vary” but in my experience, the variation is never more than +/- 3. There is also a possible small variation due to the reality that the exact same RSS feed may not be loading each time. Even taking this all into account, I’m impressed. A score jump of 35 can only be attributed to the new JS code. I am definitely making this a permanent part of my toolbox. Kudos to @Petar_Dietrich and @Max !

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 19, 2026, 1:01pm UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791/7 "2026-06-19T13:01:21Z")

</div>

Wow, I am super happy to know this solution helped you improve your website’s performance!

Thanks a ton for sharing your experience with us 😉

---

<div class="post-metadata">

**Author:** ![Petar\_Dietrich](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/petar_dietrich/32/92003_2.png) [@Petar\_Dietrich](https://community.elfsight.com/u/Petar_Dietrich)\
**Post date:** [June 19, 2026, 2:29pm UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791/8 "2026-06-19T14:29:10Z")

</div>

Hey @Bob_Wilson,

Thank you for your comment.

Hats off to you as well for sharing your experience with such great detail. Very helpful.

At the end of the day, it all boils down to capturing data from real users – never bots nor sporadic site visitors.

Enjoy your day!

---

<div class="post-metadata">

**Author:** ![user34755](https://avatars.discourse-cdn.com/v4/letter/u/3ec8ea/32.png) [@user34755](https://community.elfsight.com/u/user34755)\
**Post date:** [June 21, 2026, 1:32pm UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791/9 "2026-06-21T13:32:06Z")

</div>

> [@Max](#):
>
> `<script src="https://elfsightcdn.com/platform.js" async></script>`

I assume that the new script follows the platform.js script?

---

<div class="post-metadata">

**Author:** ![Bob\_Wilson](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/bob_wilson/32/92862_2.png) [@Bob\_Wilson](https://community.elfsight.com/u/Bob_Wilson)\
**Post date:** [June 21, 2026, 2:28pm UTC](https://community.elfsight.com/t/useful-tip-views-saving-how-to-load-widget-on-scroll-or-time-delay/163791/10 "2026-06-21T14:28:15Z")

</div>

@user34755 , correct!