Embed

You can embed a chat widget to your website. Simply copy paste the embedded code provided to anywhere in the <body> tag of your html file.

Watch how to do that:

You can also customize your own embedded chat widget UI and pass chatflowConfig JSON object to override existing config. See configuration list.

To modify the full source code of embedded chat widget, follow these steps:

Fork the Flowise Chat Embed repository
Then you can make any code changes. One of the popular ask is to remove Flowise branding.
Run yarn build
Push changes to the forked repo
You can then use it as embedded chat like so:

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>

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

Tutorials

Watch how to embed LangFlux in a Bootstrap 5 website

Watch how to add chatbot to website

PreviousStreaming NextVariables

Last updated 2 years ago

hashtagTutorials

Tutorials