Enhancing Chatbot Responsiveness on Mobile and Small Devices

[toi500]

Live Demo

https://flowise-responsive.surge.sh/

This guide outlines a simple tweak to ensure the chatbot fits on mobile and other compact devices - Popup Mode

Steps:

1. Installation: Follow the installation instructions provided on the FlowiseChatEmbed GitHub repository: https://github.com/FlowiseAI/FlowiseChatEmbed

2. Code Injection: Locate the index.css file and inject the provided code snippet within it. Place it at the end of the file.

@media (max-width: 640px) {
  div[part='bot'] {
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    max-width: unset !important;
    max-height: unset !important;
    height: calc(100dvh - 80px) !important;
  }

    div[part='button'], div[class='flex flex-row items-center w-full h-[50px] absolute top-0 left-0 z-10'], .chatbot-container {
    border-radius: 0px !important;
  }

button {
  cursor: default !important;
}

}

3. Build and Distribute: Rebuild your project to generate a new distribution file web.js.

4. Replace username to your Github username, and forked-repo to your forked repo:

<script type="module">
      import Chatbot from "https://cdn.jsdelivr.net/gh/username/forked-repo/dist/web.js"
      Chatbot.init({
          chatflowid: "chatflow-id",
          apiHost: "http://localhost:3000",
      })
</script>

[flang-ls1]

Will try thanks!