Embedded chat widget

On the Publish pane, the Embed into site tab displays code that can be inserted in the <body> of your HTML to interact with your flow.

The chat widget is implemented as a web component called langflow-chat and is loaded from a CDN. For more information, see the langflow-embedded-chat repository.

For a sandbox example, see the Langflow embedded chat CodeSandbox.

The following example includes the minimum required inputs, called props in React, for using the chat widget in your HTML code, which are host_url and flow_id. The host_url value must be HTTPS, and may not include a / after the URL. The flow_id value is found in your Langflow URL. For a Langflow server running the Basic prompting flow at https://c822-73-64-93-151.ngrok-free.app/flow/dcbed533-859f-4b99-b1f5-16fce884f28f, your chat widget code is similar to the following:


_11<html>
_11  <head>
_11    <script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
_11  </head>
_11  <body>
_11    <langflow-chat
_11      host_url="https://c822-73-64-93-151.ngrok-free.app"
_11      flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_11    ></langflow-chat>
_11  </body>
_11</html>

When this code is embedded within HTML, it becomes a responsive chatbot, powered by the basic prompting flow.

To configure your chat widget further, include additional props.

All props and their types are listed in index.tsx.

To add some styling to the chat widget, customize its elements with JSON:


_16  <langflow-chat
_16    host_url="https://c822-73-64-93-151.ngrok-free.app"
_16    flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_16    chat_window_style='{
_16      "backgroundColor": "#1a0d0d",
_16      "border": "4px solid #b30000",
_16      "borderRadius": "16px",
_16      "boxShadow": "0 8px 32px #b30000",
_16      "color": "#fff",
_16      "fontFamily": "Georgia, serif",
_16      "padding": "16px"
_16    }'
_16    window_title="Custom Styled Chat"
_16    height="600"
_16    width="400"
_16  ></langflow-chat>

To add a custom session ID value and an API key for authentication to your Langflow server:


_13<html>
_13  <head>
_13    <script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
_13  </head>
_13  <body>
_13    <langflow-chat
_13      host_url="https://c822-73-64-93-151.ngrok-free.app"
_13      flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_13      api_key="YOUR_API_KEY"
_13      session_id="YOUR_SESSION_ID"
_13    ></langflow-chat>
_13  </body>
_13</html>

The chat widget requires your flow to contain Chat Input and Chat Output components for the widget to communicate with it. Sending a message to Langflow without a Chat Input still triggers the flow, but the LLM warns you the message is empty. Text Input and Text Output components can send and receive messages with Langflow, but without the ongoing LLM "chat" context.

To use the chat widget in your React application, create a component that loads the widget script and renders the chat interface:

Declare your web component and encapsulate it in a React component.


_18declare global {
_18  namespace JSX {
_18    interface IntrinsicElements {
_18      "langflow-chat": any;
_18    }
_18  }
_18}
_18
_18export default function ChatWidget({ className }) {
_18  return (
_18    <div className={className}>
_18      <langflow-chat
_18        host_url="https://c822-73-64-93-151.ngrok-free.app"
_18        flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_18      ></langflow-chat>
_18    </div>
_18  );
_18}

Place the component anywhere in your code to display the chat widget.

For example, in this docset, the React widget component is located at docs > src > components > ChatWidget > index.tsx. index.tsx includes a script to load the chat widget code from CDN and initialize the ChatWidget component with props pointing to a Langflow server.


_35import React, { useEffect } from 'react';
_35
_35// Component to load the chat widget script
_35const ChatScriptLoader = () => {
_35  useEffect(() => {
_35    if (!document.querySelector('script[src*="langflow-embedded-chat"]')) {
_35      const script = document.createElement('script');
_35      script.src = 'https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js';
_35      script.async = true;
_35      document.body.appendChild(script);
_35    }
_35  }, []);
_35
_35  return null;
_35};
_35
_35declare global {
_35  namespace JSX {
_35    interface IntrinsicElements {
_35      "langflow-chat": any;
_35    }
_35  }
_35}
_35
_35export default function ChatWidget({ className }) {
_35  return (
_35    <div className={className}>
_35      <ChatScriptLoader />
_35      <langflow-chat
_35        host_url="https://c822-73-64-93-151.ngrok-free.app"
_35        flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_35      ></langflow-chat>
_35    </div>
_35  );
_35}

To import the component to your page, add this to your site.


_10import ChatWidget from '@site/src/components/ChatWidget';

To add the widget to your page, include <ChatWidget className="my-chat-widget" />.

To use the chat widget in your Angular application, create a component that loads the widget script and renders the chat interface.

Angular requires you to explicitly allow custom web components like langflow-chat in components, so you must add the <langflow-chat> element to your Angular template and configure Angular to recognize it. Add CUSTOM_ELEMENTS_SCHEMA to your module's configuration to enable this.

To add CUSTOM_ELEMENTS_SCHEMA to your module's configuration, do the following:

Open the module file .module.ts where you want to add the langflow-chat web component.
Import CUSTOM_ELEMENTS_SCHEMA at the top of the .module.ts file:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

Add CUSTOM_ELEMENTS_SCHEMA to the schemas array inside the @NgModule decorator:


_16import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
_16import { BrowserModule } from '@angular/platform-browser';
_16import { AppComponent } from './app.component';
_16
_16@NgModule({
_16  declarations: [
_16    AppComponent
_16  ],
_16  imports: [
_16    BrowserModule
_16  ],
_16  schemas: [CUSTOM_ELEMENTS_SCHEMA],
_16  providers: [],
_16  bootstrap: [AppComponent]
_16})
_16export class AppModule { }

Add the chat widget to your component's template by including the langflow-chat element in your component's .component.ts file:

For style properties that accept JSON objects like chat_window_style and bot_message_style, use Angular's property binding syntax [propertyName] to pass them as JavaScript objects.


_31import { Component } from '@angular/core';
_31
_31@Component({
_31  selector: 'app-root',
_31  template: `
_31    <div class="container">
_31      <h1>Langflow Chat Test</h1>
_31      <langflow-chat
_31        host_url="https://c822-73-64-93-151.ngrok-free.app"
_31        flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_31        [chat_window_style]='{"backgroundColor": "#ffffff"}'
_31        [bot_message_style]='{"color": "#000000"}'
_31        [user_message_style]='{"color": "#000000"}'
_31        window_title="Chat with us"
_31        placeholder="Type your message..."
_31        height="600"
_31        width="400"
_31        chat_position="bottom-right"
_31      ></langflow-chat>
_31    </div>
_31  `,
_31  styles: [`
_31    .container {
_31      padding: 20px;
_31      text-align: center;
_31    }
_31  `]
_31})
_31export class AppComponent {
_31  title = 'Langflow Chat Test';
_31}

Use the widget API to customize your chat widget.

Props with the type JSON need to be passed as stringified JSON, with the format {"key":"value"}.

All props and their types are listed in index.tsx.

Prop	Type	Description
flow_id	String	Required. Identifier for the flow associated with the component.
host_url	String	Required. URL of the host for communication with the chat component.
api_key	String	X-API-Key header to send to Langflow.
additional_headers	JSON	Additional headers to be sent to the Langflow server.
session_id	String	Custom session id to override the random session id.
height	Number	Height of the chat window in pixels.
width	Number	Width of the chat window in pixels.
chat_position	String	Position of chat window, such as `top-right` or `bottom-left`.
start_open	Boolean	Whether the chat window should be open by default.
chat_window_style	JSON	Overall chat window appearance.
chat_trigger_style	JSON	Chat trigger button styling.
bot_message_style	JSON	Bot message formatting.
user_message_style	JSON	User message formatting.
error_message_style	JSON	Error message formatting.
input_style	JSON	Chat input field styling.
input_container_style	JSON	Input container styling.
send_button_style	JSON	Send button styling.
send_icon_style	JSON	Send icon styling.
window_title	String	Title displayed in the chat window header.
placeholder	String	Placeholder text for the chat input field.
placeholder_sending	String	Placeholder text while sending a message.
online	Boolean	Whether the chat component is online.
online_message	String	Custom message when chat is online.
input_type	String	Input type for chat messages.
output_type	String	Output type for chat messages.
output_component	String	Output ID when multiple outputs are present.
chat_output_key	String	Which output to display if multiple outputs are available.
tweaks	JSON	Additional custom adjustments for the flow.

Embedded chat widget

Embed the chat widget with React

Embed the chat widget with Angular

Chat widget configuration

Embed the chat widget with React​

Embed the chat widget with Angular​

Chat widget configuration​

Embed the chat widget with React

Embed the chat widget with Angular

Chat widget configuration