docs.langflux.space
  • Welcome to LangFlux
  • Using LangFlux
    • API
    • Streaming
    • Embed
    • Variables
  • Configuration
    • Auth
      • Chatflow Level
    • Rate Limit
  • Integrations
    • Cache
      • InMemory Cache
    • Chains
      • Conversational Retrieval QA Chain
      • Vectara QA Chain
    • Document Loaders
      • S3 File Loader
      • PDF Files
    • Chat Models
      • Azure ChatOpenAI
      • ChatLocalAI
      • Google VertexAI
    • Embeddings
      • Azure OpenAI Embeddings
      • LocalAI Embeddings
    • Memory
      • Short Term Memory
      • Long Term Memory
        • Zep Memory
      • Threads
    • Text Splitters
      • Character Text Splitter
    • Tools
      • Custom Tool
    • Vector Stores
      • Chroma
      • Pinecone
      • Elastic
      • Qdrant
      • SingleStore
      • Supabase
      • Vectara
    • Utilities
      • Set/Get Variable
      • If Else
    • External Integrations
      • Zapier Zaps
  • Use Cases
    • Web Scrape QnA
    • Webhook Tool
Powered by GitBook
On this page

Was this helpful?

  1. Using LangFlux

Embed

PreviousStreamingNextVariables

Last updated 1 year ago

Was this helpful?

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:

  1. Fork the Flowise Chat Embed repository

  2. Then you can make any code changes. One of the popular ask is to remove Flowise branding.

  3. Run yarn build

  4. Push changes to the forked repo

  5. 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