Added documentation of Chat Widget.

docs/docs/guidelines/widget.mdx

@@ -0,0 +1,252 @@
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
+
+# Chat Widget
+
+<div style={{ marginBottom: "20px" }}>
+  The <b>Langflow Embedded Chat</b> is a powerful web component that enables seamless communication with Langflow. This widget provides a <b>chat interface</b>, allowing you to integrate Langflow into your web applications effortlessly.
+</div>
+
+## Features
+
+🌟 __Seamless Integration:__ Easily integrate the Langflow Widget into your website or web application with just a few lines of JavaScript.
+
+🚀 __Interactive Chat Interface:__ Engage your users with a user-friendly chat interface, powered by Langflow's advanced language understanding capabilities.
+
+🎛️ __Customizable Styling:__ Customize the appearance of the chat widget to match your application's design and branding.
+
+🌐 __Multilingual Support:__ Communicate with users in multiple languages, opening up your application to a global audience.
+
+## Usage
+
+<div style={{ marginBottom: "20px" }}>
+  You can get the HTML code to embed the chat by clicking the <b>Code</b> button at the Sidebar after you build the flow.
+</div>
+
+<div
+  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
+>
+  <ZoomableImage
+    alt="Docusaurus themed image"
+    sources={{
+      light: useBaseUrl("img/widget-sidebar.png"),
+    }}
+    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+  />
+</div>
+
+<div style={{ marginBottom: "20px" }}>
+  After clicking the Chat Widget HTML tab, you get the code that needs to be inserted anywhere in the &lt;body&gt; tag of any HTML page.
+</div>
+
+<div style={{ marginBottom: "20px" }}>  
+  <ZoomableImage
+    alt="Docusaurus themed image"
+    sources={{
+      light: useBaseUrl("img/widget-code.png"),
+    }}
+    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+  />
+</div>
+
+<div style={{ marginBottom: "20px" }}>
+  Further down, we will explain how to use this code with HTML and React.
+</div>
+
+---
+
+### HTML
+
+The Chat Widget can be embedded into any HTML page, inside its &lt;body&gt; tag. Here's a video exemplifying the process.
+
+<div
+  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
+>
+  <ReactPlayer playing controls url="/videos/langflow_widget.mp4" />
+</div>
+
+---
+
+### React
+
+To use the Chat Widget in React, first, you need to insert this &lt;script&gt; tag into the React index.html file, inside the &lt;body&gt; tag.
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
+```
+
+Then, you need to declare your Web Component and encapsulate it in a react component.
+
+```jsx
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "langflow-chat": any;
+    }
+  }
+}
+
+export default function ChatWidget({ className }) {
+  return (
+    <div className={className}>
+      <langflow-chat
+        chat_inputs='{"your_key":"value"}'
+        chat_input_field="your_chat_key"
+        flow_id="your_flow_id"
+        host_url="langflow_url"
+      ></langflow-chat>
+    </div>
+  );
+}
+```
+
+Finally, you can use this component anywhere in your code to show the Chat Widget.
+
+---
+
+## Configuration
+
+Use the widget API to customize your widget:
+
+| Prop                  | Type      | Required |
+|-----------------------|-----------|----------|
+| bot_message_style     | json      | No       |
+| chat_input_field      | string    | Yes      |
+| chat_inputs           | json      | Yes      |
+| chat_position         | string    | No       |
+| chat_trigger_style    | json      | No       |
+| chat_window_style     | json      | No       |
+| chat_output_key       | string    | No       |
+| error_message_style   | json      | No       |
+| flow_id               | string    | Yes      |
+| height                | number    | No       |
+| host_url              | string    | Yes      |
+| input_container_style | json      | No       |
+| input_style           | json      | No       |
+| online                | boolean   | No       |
+| online_message        | string    | No       |
+| placeholder           | string    | No       |
+| placeholder_sending   | string    | No       |
+| send_button_style     | json      | No       |
+| send_icon_style       | json      | No       |
+| tweaks                | json      | No       |
+| user_message_style    | json      | No       |
+| width                 | number    | No       |
+| window_title          | string    | No       |
+
+- **bot_message_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for formatting bot messages in the chat window.
+
+- **chat_input_field:**
+  - Type: String
+  - Required: Yes
+  - Description: Specifies the input field type for chat messages.
+
+- **chat_inputs:**
+  - Type: JSON
+  - Required: Yes
+  - Description: Defines the chat input elements and their values.
+ 
+- **chat_output_key:**
+  - Type: String
+  - Required: No
+  - Description: Specify which output to choose if there is more than one output.
+
+- **chat_position:**
+  - Type: String
+  - Required: No
+  - Description: Determines the position of the chat window (top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left).
+
+- **chat_trigger_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for the chat trigger.
+
+- **chat_window_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for the overall chat window.
+
+- **error_message_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for error messages in the chat window.
+
+- **flow_id:**
+  - Type: String
+  - Required: Yes
+  - Description: Identifier for the flow associated with the component.
+
+- **height:**
+  - Type: Number
+  - Required: No
+  - Description: Specifies the height of the chat window in pixels.
+
+- **host_url:**
+  - Type: String
+  - Required: Yes
+  - Description: The URL of the host for communication with the chat component.
+
+- **input_container_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for the input container where chat messages are typed.
+
+- **input_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for the chat input field.
+
+- **Online:**
+  - Type: Boolean
+  - Required: No
+  - Description: Indicates if the chat component is online or offline.
+
+- **online_message:**
+  - Type: String
+  - Required: No
+  - Description: Custom message to display when the chat component is online.
+
+- **placeholder:**
+  - Type: String
+  - Required: No
+  - Description: Placeholder text for the chat input field.
+
+- **placeholder_sending:**
+  - Type: String
+  - Required: No
+  - Description: Placeholder text to display while a message is being sent.
+
+- **send_button_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for the send button in the chat window.
+
+- **send_icon_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for the send icon in the chat window.
+
+- **tweaks:**
+  - Type: JSON
+  - Required: No
+  - Description: Additional custom tweaks for the associated flow.
+
+- **user_message_style:**
+  - Type: JSON
+  - Required: No
+  - Description: Styling options for formatting user messages in the chat window.
+
+- **width:**
+  - Type: Number
+  - Required: No
+  - Description: Specifies the width of the chat window in pixels.
+
+- **window_title:**
+  - Type: String
+  - Required: No
+  - Description: Title for the chat window, displayed in the header or title bar.

docs/sidebars.js

@@ -21,6 +21,7 @@ module.exports = {
         "guidelines/collection",
         "guidelines/prompt-customization",
         "guidelines/chat-interface",
+        "guidelines/widget",
       ],
     },
     {