Configure Chatbot Embed to Auto-Popup on Page Load for Desktop Users

[KI-Experten]

Hello,

I am looking to enhance the user experience on my website by having the Flowise chatbot window automatically open when a user visits the site. This should happen only once per session and only for desktop users, not on mobile devices.

I have found a JavaScript code snippet that achieves this for Voiceflow chatbots, but I need something equivalent that will work with Flowise. The goal is to replicate the following behavior tailored for Flowise:

• The chatbot window should pop up automatically on the first page load.
• It should only activate for users on desktop devices with a screen width of 1024 pixels or wider.
• Once the chatbot has been opened, it should not reappear on refresh or new page visits during the same session.

Here's the code snippet that works for Voiceflow, which I would like to adapt for use with Flowise:

# POP-UP ON DESKTOP NOT MOBILE (only once):

(opens once on first page load, only pops-up on desktop)

<script type="text/javascript">
(function(d, t) {
  var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
  v.onload = function() {
    window.voiceflow.chat.load({
      verify: { projectID: 'Insert Project ID' },
      url: 'https://general-runtime.voiceflow.com',
      versionID: 'production'
    });
  };
  v.src = "https://cdn.voiceflow.com/widget/bundle.mjs";
  v.type = "text/javascript";
  s.parentNode.insertBefore(v, s);
})(document, 'script');

async function runCode() {
  if (window.innerWidth >= 1024) {
    const chatbotOpenedBefore = sessionStorage.getItem('chatbotOpened');
    if (!chatbotOpenedBefore) {
      let element = document.querySelector(".vfrc-launcher");
      while (!element) {
        element = document.querySelector(".vfrc-launcher");
        await new Promise(resolve => setTimeout(resolve, 1000));
      }
      element.click();
      sessionStorage.setItem('chatbotOpened', 'true'); // Set a session storage flag to remember that the chatbot was opened
    }
  }
}

runCode();
</script>

I would greatly appreciate guidance on how to implement this functionality with the Flowise chatbot embed code. If there is an existing solution or a recommended approach to achieve this with Flowise, please let me know.

Thank you for your assistance!

Best regards.