Separate On Scroll and Delay triggers for each device

[BryanCamphens]

Hi Elfsight team,

I would like to suggest a feature for the AI Chatbot widget that would make it possible to control when the chatbot button becomes visible on a website.

For example, it would be very useful to have options such as:

• Show the chatbot only after a specific delay, for example after 10, 15, or 20 seconds.
• Show the chatbot only after the visitor has scrolled a certain number of pixels.
• Apply these visibility settings separately for desktop, tablet, and mobile devices.

[Max]

Hi there, @BryanCamphens

Nice idea, thanks for sharing!

Just to clarify, do you want to apply these triggers to the whole widget (chat bubble and window) or open the chat window when the condition is met?

[BryanCamphens]

Sure, to clarify: in my situation, I am mainly referring to the round chat button/bubble.

I would like this button to become visible only after specific visibility settings are met, such as a delay or after scrolling. Until that moment, nothing from the widget should be visible on the website.

The reason for this request is that on mobile devices, the chat bubble currently overlaps important CTA buttons on certain Google Ads landing pages. That means visitors see the chatbot button immediately when the page loads, sometimes directly on top of the main conversion button.

That is why it would be very helpful to have settings that prevent the chat bubble from appearing immediately on page load, especially on mobile.

[Max]

Got it, thanks!

Although the widget doesn’t offer such visibility settings, I think it’s possible to implement via custom script.

I see that you have 2 AI Chatbot widgets. Could you please specify the widget name and the trigger(s) you’d like to use there? Our devs will be happy to help with the customization

[BryanCamphens]

For me, it’s for this one: Ortho Billet AI Chatbot Bo

What I would like, that the chat shows up after 15 sec after page load

[Max]

On mobile only? Or desktop as well?

[BryanCamphens]

Mobile please

[Max]

Thanks! I’ve passed your request on to the dev team and will update you once the solution is ready

[Max]

Here is a script to display a chat bubble on mobile with a delay (15 secs)

util.waitForElement('\[class\*="FloatingButton__FloatingButtonContainer-sc"\]').then(floatBtn => {
  **if** (window.innerWidth <= 768) {
    floatBtn.style.display = 'none';
    setTimeout(() => {
      floatBtn.style.display = 'block';
    }, 15000);
  }
});

This script should be added to the Custom JS field on the Settings tab of your widget settings. The delay time is set in milliseconds and you can change it here:

If you’d like to display the chat bubble using On Scroll trigger, you can use this Custom JS code:

util.waitForElement('\[class\*="FloatingButton__FloatingButtonContainer-sc"\]').then(floatBtn => {
  floatBtn.style.display = 'none';
  **const** checkAndShow = () => {
    **const** scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
    **const** scrolled = window.scrollY || window.pageYOffset || 0;
    console.log(scrolled);
    **if** (scrollHeight > 0 && scrolled / scrollHeight >= 0.5) {
      floatBtn.style.display = 'block';
      window.removeEventListener('scroll', checkAndShow);
      **return** true;
    }
    **return** false;
  };
  **if** (!checkAndShow()) {
    window.addEventListener('scroll', checkAndShow);
  }
});

The script works for all devices and the scroll position can be changed here:

[BryanCamphens]

Thanks a lot! Have a great weekend.

[BryanCamphens]

I get a lot of errors by using this code:

util.waitForElement(‘\[class\*=“FloatingButton__FloatingButtonContainer-sc”\]’).then(floatBtn => {
floatBtn.style.display = ‘none’;
**const** checkAndShow = () => {
**const** scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
**const** scrolled = window.scrollY || window.pageYOffset || 0;
console.log(scrolled);
**if** (scrollHeight > 0 && scrolled / scrollHeight >= 0.5) {
floatBtn.style.display = ‘block’;
window.removeEventListener(‘scroll’, checkAndShow);
**return** true;
}
**return** false;
};
**if** (!checkAndShow()) {
window.addEventListener(‘scroll’, checkAndShow);
}
});

[Max]

Ah, apologies for the inconvenience! Some weird elements have been added when pasting the code.

Here are the correct versions:

After Delay

util.waitForElement('[class*="FloatingButton__FloatingButtonContainer-sc"]').then(floatBtn => {
  if (window.innerWidth <= 768) {
    floatBtn.style.display = 'none';
    setTimeout(() => {
      floatBtn.style.display = 'block';
    }, 15000);
  }
});

On Scroll

util.waitForElement('[class*="FloatingButton__FloatingButtonContainer-sc"]').then(floatBtn => {
  floatBtn.style.display = 'none';
  const checkAndShow = () => {
    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrolled = window.scrollY || window.pageYOffset || 0;
    console.log(scrolled);
    if (scrollHeight > 0 && scrolled / scrollHeight >= 0.5) {
      floatBtn.style.display = 'block';
      window.removeEventListener('scroll', checkAndShow);
      return true;
    }
    return false;
  };

  if (!checkAndShow()) {
    window.addEventListener('scroll', checkAndShow);
  }
});

Please try them out and let me know if it helped

[BryanCamphens]

Yes, perfect! Thnx