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!
<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>
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:
// 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 should be replaced in the 4th line of this script:
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:
Code Snippet Title:Load Elfsight Widget on Scroll or Time Delay
Minor Content Tweak (Add Comments Next to Constants):
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)
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 !
). Teamwork!
