### Full Component Setup with Custom Styling
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/full-component.md
This example shows how to set up the Full component while ensuring a true full-screen layout by applying `margin: 0` to the body. It includes the necessary import and initialization script.
```html
```
--------------------------------
### Install and Build Project Dependencies
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/README.md
Set up the project by installing dependencies and building the library for production or development. This includes running linting and formatting commands.
```bash
yarn install
yarn build # Production build
yarn dev # Development server on http://localhost:5678
yarn lint
yarn format
```
--------------------------------
### Start Development Server (Bash)
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Command to start the development server for serving the test page. This will be available at http://localhost:5678.
```bash
yarn dev
# This will serve the test page on http://localhost:5678 automatically
```
--------------------------------
### Start Proxy Server
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/README.md
Configure and start the proxy server for secure API key management. Ensure the .env file is set up with necessary environment variables.
```bash
cp .env.example .env # Configure environment
yarn start # Proxy server on http://localhost:3001
```
--------------------------------
### Start Proxy Server
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Run the Flowise Embed Proxy Server using the `yarn start` command. The server will be accessible at `http://localhost:3001`.
```bash
yarn start
# Server will be available at:
# - Local: http://localhost:3001
```
--------------------------------
### Install Flowise Embed
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Install the Flowise embed library using yarn.
```bash
yarn install
```
--------------------------------
### Example .env File for Chatflows
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/configuration.md
An example of how to set up environment variables in a .env file for Flowise chatflows, including API host, API key, port, node environment, and specific chatflow configurations with their respective domains.
```bash
API_HOST=https://flowise.acme.com
FLOWISE_API_KEY=sk-abc123xyz789
PORT=3001
NODE_ENV=production
# Chatflows
sales_bot=91e9c803-5169-4db9-8207-3c0915d71c5f,https://sales.acme.com,https://internal.acme.com
support_bot=a1b2c3d4-e5f6-4a5b-8c9d-0e1f2g3h4i5j,https://support.acme.com
```
--------------------------------
### Develop Flowise Embed
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Start the development server for the Flowise embed library.
```bash
yarn dev
```
--------------------------------
### Initialize Chatbot with Observers
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/chatbot-api.md
Example of initializing the chatbot with observer callbacks to log user input, messages, and loading state to the console.
```typescript
Chatbot.init({
chatflowid: '...',
apiHost: '...',
observersConfig: {
observeUserInput: (userInput) => {
console.log('User input:', userInput);
},
observeMessages: (messages) => {
console.log('Messages:', messages);
},
observeLoading: (loading) => {
console.log('Loading:', loading);
},
},
});
```
--------------------------------
### Configure Starter Prompts (Array)
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bot-component.md
Use an array of strings to define simple suggested starting prompts for the chat window. This is useful for providing basic user guidance.
```typescript
starterPrompts: ['What is Flowise?', 'How do I get started?']
```
--------------------------------
### Minimal Full Component Setup
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/full-component.md
This is the most basic setup for embedding the Flowise chatbot as a full-page component. It requires importing the Chatbot module and initializing it with a chatflow ID and API host.
```html
```
--------------------------------
### State Observers Usage Example
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bot-component.md
Example of how to configure and use state observers to log changes in user input, loading status, and message history.
```typescript
observersConfig: {
observeUserInput: (input) => {
console.log('Current input:', input);
},
observeLoading: (isLoading) => {
console.log('Bot is ' + (isLoading ? 'responding...' : 'ready'));
},
observeMessages: (messages) => {
console.log('Message count:', messages.length);
},
}
```
--------------------------------
### Bubble Component Height Examples
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bubble-component.md
Demonstrates various ways to set the height for the chat window, including fixed, viewport-relative, and responsive calculations.
```typescript
const bubbleProps: BubbleProps = {
chatflowid: 'YOUR_CHATFLOW_ID',
// Fixed height, shrinks on small screens
height: 700,
// or
height: '700px',
// 80% of viewport height (responsive)
height: '80dvh',
// Caps at 700px on large screens
height: 'min(700px, 80dvh)'
};
```
--------------------------------
### Chatbot Setup with Observers
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bubble-component.md
Configure observers to track user input, bot loading status, and message history. This enables custom event handling and logging.
```html
```
--------------------------------
### Bubble Component Width Examples
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bubble-component.md
Illustrates different methods for defining the chat window's width, including fixed and viewport-relative units.
```typescript
const bubbleProps: BubbleProps = {
chatflowid: 'YOUR_CHATFLOW_ID',
// Fixed width
width: 400,
// 50% of viewport width
width: '50vw'
};
```
--------------------------------
### Deploy with Proxy Server Configuration
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/00-START-HERE.md
Set environment variables for API host, API key, and specific bot configurations when deploying with a proxy server. Refer to configuration.md for detailed proxy server setup.
```bash
API_HOST=https://flowise.example.com
FLOWISE_API_KEY=sk-xxx
sales_bot=uuid-here,https://sales.example.com
```
--------------------------------
### Chatbot Setup with Theme Customization
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bubble-component.md
Customize the appearance and behavior of the chatbot button and chat window. This includes colors, sizes, welcome messages, and auto-open settings.
```html
```
--------------------------------
### Bubble Component Props
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bubble-component.md
Example of how to configure the Bubble component with core and theme-specific props.
```typescript
const bubbleProps: BubbleProps = {
chatflowid: 'YOUR_CHATFLOW_ID',
apiHost: 'http://localhost:3000',
pageTitle: 'Flowise Chatbot',
theme: {
button: {
backgroundColor: '#FF0000',
size: '64px'
},
chatWindow: {
backgroundColor: '#FFFFFF'
},
tooltip: {
text: 'Chat with us!'
},
disclaimer: {
text: 'By continuing, you agree to our terms.'
},
form: {
inputPlaceholder: 'Ask me anything...'
}
}
};
```
--------------------------------
### Minimal Chatbot Setup
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bubble-component.md
Integrate the Flowise chatbot with essential configuration. Ensure you have the correct chatflowid and apiHost.
```html
```
--------------------------------
### CSS for Shadow DOM Styling
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/full-component.md
Example CSS demonstrating how to style elements within the Full Chatbot's shadow DOM using the `::part()` pseudo-element, targeting the bot message styling.
```css
flowise-fullchatbot::part(bot) {
font-family: 'Roboto', sans-serif;
}
```
--------------------------------
### Client-side Streaming with fetchEventSource
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/endpoints.md
This TypeScript example demonstrates how to consume streaming responses from the Flowise API using `fetchEventSource`. Ensure the API is configured to return `Content-Type: text/event-stream`.
```typescript
import { fetchEventSource } from '@microsoft/fetch-event-source';
fetchEventSource('http://localhost:3000/api/v1/prediction/chatflowid', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ question: 'Hello' }),
onmessage(event) {
const data = JSON.parse(event.data);
console.log('Streamed chunk:', data);
},
});
```
--------------------------------
### Chatbot Setup with Portal for Dialogs
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bubble-component.md
Specify a custom HTML element as the portal target for chatbot dialogs. This allows embedding the chat interface within a specific part of your page.
```html
```
--------------------------------
### Portal for Dialogs using HTMLElement
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bubble-component.md
Example of configuring the `dialogContainer` prop with a direct HTMLElement reference for rendering agent dialogs outside the shadow DOM.
```typescript
const bubbleProps: BubbleProps = {
chatflowid: 'YOUR_CHATFLOW_ID',
dialogContainer: document.getElementById('flowise-portal')
};
```
--------------------------------
### Portal for Dialogs using CSS Selector
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bubble-component.md
Example of configuring the `dialogContainer` prop with a CSS selector string to render agent dialogs outside the shadow DOM.
```typescript
const bubbleProps: BubbleProps = {
chatflowid: 'YOUR_CHATFLOW_ID',
dialogContainer: '#flowise-portal'
};
```
--------------------------------
### Full Chatbot Page with Custom Theme
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/full-component.md
An example of a complete HTML page embedding the Full Chatbot component with specific theme configurations for the chat window, including title, background color, and agent message visibility.
```html
Chat Support
```
--------------------------------
### Get Audio Extension from MIME Type
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/utility-functions.md
Converts an audio MIME type string into its corresponding file extension. Defaults to 'webm' for unknown MIME types.
```typescript
import { getRecordingExtensionForMime } from '@/utils';
const ext = getRecordingExtensionForMime('audio/webm'); // Returns 'webm'
```
--------------------------------
### Get Chatbot Configuration
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/query-functions.md
Fetches the chatbot's configuration, including details on allowed file uploads (types and sizes) and starter prompts. This function requires the chatflow ID and can specify the API host and a request interceptor.
```typescript
const response = await getChatbotConfig({
chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f',
apiHost: 'http://localhost:3000',
});
if (response.data) {
console.log('Max file size:', response.data.uploads.fileUploadSizeAndTypes);
}
```
--------------------------------
### Request Interceptor Usage Example
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bot-component.md
Example of an onRequest interceptor that adds a custom header and modifies the request body.
```typescript
onRequest: async (request) => {
// Add custom header
if (!request.headers) request.headers = {};
request.headers['X-Custom-Header'] = 'value';
// Modify body
if (request.body) {
const body = JSON.parse(request.body as string);
body.customField = 'data';
request.body = JSON.stringify(body);
}
}
```
--------------------------------
### Configure Starter Prompts (Object)
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bot-component.md
Use an object to define starter prompts with associated metadata. This allows for more structured prompt management, associating a key with a prompt object.
```typescript
starterPrompts: {
'Question 1': { prompt: 'What is Flowise?' },
'Question 2': { prompt: 'How do I deploy?' },
}
```
--------------------------------
### Configure Proxy Server Environment Variables
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Set up the `.env` file for the Flowise Embed Proxy Server by copying `.env.example` and configuring `API_HOST` and `FLOWISE_API_KEY`. Define chatflow identifiers and their allowed domains.
```bash
# Copy .env.example to .env and configure required settings:
API_HOST=https://your-flowise-instance.com
FLOWISE_API_KEY=your-api-key
# Configure your chatflows:
# Format: [identifier]=[chatflowId],[allowedDomain1],[allowedDomain2],...
#
# identifier: Any name you choose (e.g., agent1, support, salesbot)
# chatflowId: The UUID of your Flowise chatflow
# allowedDomains: Comma-separated list of domains where this chat can be embedded
#
# Examples:
support=abc123-def456,https://example.com
agent1=xyz789-uvw456,https://sales.example.com
helpdesk=ghi123-jkl456,https://help.example.com,https://support.example.com
```
--------------------------------
### Configure Chat Window Styling for Starter Prompts
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bot-component.md
Customize the appearance of starter prompts within the chat window theme. This includes setting the prompt list and font size.
```typescript
theme: {
chatWindow: {
starterPrompts: ['Prompt 1', 'Prompt 2'],
starterPromptFontSize: 14,
}
}
```
--------------------------------
### Initialize Full Chatbot with Theme Customization
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/full-component.md
This snippet demonstrates how to initialize the Full Chatbot component with custom theme settings for the chat window, including title, background color, and font size.
```html
```
--------------------------------
### Full Chatbot Initialization with Configuration
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/configuration.md
This snippet demonstrates initializing the Flowise chatbot with a wide range of configuration options. It covers core settings like chatflow ID and API host, behavior options, observer functions for user input and messages, portal configuration, and extensive theming for the chat button, tooltip, disclaimer, chat window, input fields, and custom CSS.
```html
```
--------------------------------
### Clear Specific Chat Instance
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Initialize a full-page chatbot with a specific ID and provide examples for clearing all chats or a specific chat instance using `Chatbot.clearChat()`.
```html
```
--------------------------------
### Initialize Chatbot with Dialog Container (CSS Selector)
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Use the `dialogContainer` prop with a CSS selector string to render the NodeDetailsDialog into a specified host-page element. Ensure the target element exists in the DOM.
```html
```
```javascript
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.init({
chatflowid: '',
apiHost: 'http://localhost:3000',
dialogContainer: '#flowise-portal',
});
```
--------------------------------
### initFull(props: BotProps & {id?: string}): void
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/chatbot-api.md
Initializes a full-page chat widget that fills the entire viewport or a container element. This function accepts BotProps along with an optional ID for targeting a specific HTML element.
```APIDOC
## initFull(props: BotProps & {id?: string}): void
### Description
Initializes a full-page chat widget that fills the entire viewport or a container element.
### Method
`initFull`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
* **chatflowid** (string) - Required - UUID of the Flowise chat flow
* **apiHost** (string) - Optional - Base URL of Flowise API (Default: `'http://localhost:3000'`)
* **pageTitle** (string) - Optional - Browser tab title (Default: `'Flowise Chatbot Widget'`)
* **onRequest** (`(request: RequestInit) => Promise`) - Optional - Optional request interceptor
* **chatflowConfig** (`Record`) - Optional - Chatflow runtime config
* **observersConfig** (observersConfigType) - Optional - Observer callbacks
* **theme** (BubbleTheme) - Optional - Theme configuration
* **dialogContainer** (`string | HTMLElement`) - Optional - Portal target for dialogs
* **id** (string) - Optional - HTML element ID to use; if omitted, creates or targets `flowise-fullchatbot`
### Request Example
```typescript
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.initFull({
chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f',
apiHost: 'https://your-flowise-instance.com',
theme: {
chatWindow: {
height: '100dvh',
showTitle: true,
},
},
});
```
### Response
#### Success Response
`void`
#### Response Example
None
```
--------------------------------
### Get Cookie by Name
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/utility-functions.md
Retrieves the value of a cookie by its name. Returns an empty string if the cookie is not found. Use this to access previously stored cookie data.
```typescript
import { getCookie } from '@/utils';
const userId = getCookie('user_id');
```
--------------------------------
### Proxy Server Required Environment Variables
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/configuration.md
Sets up essential environment variables for the optional proxy server. `API_HOST` and `FLOWISE_API_KEY` are mandatory for the server to function correctly.
```bash
API_HOST=https://your-flowise-instance.com
FLOWISE_API_KEY=your-api-key-here
```
--------------------------------
### Initialize Chatbot with Full Configuration
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/configuration.md
Use this snippet to initialize the chatbot with all available configuration options, including chatflow ID, API host, page title, custom chatflow configurations, observer callbacks for state changes, and detailed theme settings.
```typescript
Chatbot.init({
chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f',
apiHost: 'https://flowise.example.com',
pageTitle: 'Support Chat',
chatflowConfig: {
topK: 5,
temperature: 0.7,
},
observersConfig: {
observeUserInput: (input) => console.log(input),
observeMessages: (messages) => console.log(messages),
observeLoading: (isLoading) => console.log(isLoading),
},
theme: {
button: {
backgroundColor: '#3B81F6',
size: 'large',
},
chatWindow: {
title: 'Chat with Us',
height: '80dvh',
},
},
});
```
--------------------------------
### Initialize Full-Page Chatbot with Dialog Container
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
The `dialogContainer` prop also works with `initFull` to render dialogs into a specified host-page element, ensuring they appear on top.
```html
```
```javascript
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.initFull({
chatflowid: '',
apiHost: 'http://localhost:3000',
dialogContainer: '#flowise-portal',
});
```
--------------------------------
### init(props: BotProps): void
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/chatbot-api.md
Initializes a popup/bubble chat widget and injects it into the page. This function takes a BotProps object containing configuration for the chat flow, API host, theming, and callbacks.
```APIDOC
## init(props: BotProps): void
### Description
Initializes a popup/bubble chat widget and injects it into the page.
### Method
`init`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
* **chatflowid** (string) - Required - UUID of the Flowise chat flow to connect to
* **apiHost** (string) - Optional - Base URL of the Flowise API server (Default: `'http://localhost:3000'`)
* **pageTitle** (string) - Optional - Browser tab title; empty string falls back to default (Default: `'Flowise Chatbot Widget'`)
* **onRequest** (`(request: RequestInit) => Promise`) - Optional - Callback to modify HTTP requests before sending
* **chatflowConfig** (`Record`) - Optional - Configuration passed to the chatflow (e.g., `topK: 2`)
* **observersConfig** (observersConfigType) - Optional - Callbacks to observe user input, message stack, and loading state
* **theme** (BubbleTheme) - Optional - Visual theme configuration for button, chat window, tooltip, and disclaimer
* **dialogContainer** (`string | HTMLElement`) - Optional - Portal target for NodeDetailsDialog; CSS selector or HTMLElement reference
### Request Example
```typescript
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.init({
chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f',
apiHost: 'https://your-flowise-instance.com',
theme: {
chatWindow: {
title: 'Support Bot',
titleBackgroundColor: '#3B81F6',
},
},
});
```
### Response
#### Success Response
`void`
#### Response Example
None
```
--------------------------------
### Get Button Size in Pixels
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/utility-functions.md
Converts a button size specification (string or number) into a pixel value. Supports 'small', 'medium', 'large', or a direct number. Defaults to 48px.
```typescript
import { getBubbleButtonSize } from '@/utils';
const size = getBubbleButtonSize('large'); // Returns 64
```
--------------------------------
### Get Local Storage Chatflow Session Data
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/utility-functions.md
Retrieves saved chat session data from localStorage using the chatflow ID. Returns an empty object if no data is found.
```typescript
import { getLocalStorageChatflow } from '@/utils';
const sessionData = getLocalStorageChatflow('chatflow-123');
console.log('Saved chat ID:', sessionData.chatId);
```
--------------------------------
### Build Flowise Embed
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Build the Flowise embed library for production deployment.
```bash
yarn build
```
--------------------------------
### Initialize Flowise Chatbot Widget
Source: https://github.com/flowiseai/flowisechatembed/blob/main/public/index.html
Import the Chatbot module and initialize it with a chatflow ID and API host. Use environment variable names as chatflow IDs if configured.
```javascript
import Chatbot from './web.js'
// Example initialization:
// If your .env contains:
// agent1=xyz789-uvw456,https://example.com
// support=abc123-def456,https://example.com
// salesbot=ghi123-jkl456,https://example.com
// Then use the environment variable name as chatflowid:
Chatbot.init({
chatflowid: 'agent1', // or 'support', 'salesbot', etc.
apiHost: window.location.origin
})
```
--------------------------------
### Proxy Server Environment Variables
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/README.md
Configuration for a proxy server to secure Flowise API access. It involves setting the API host and an API key, and optionally configuring specific chatflows with their identifiers and allowed domains.
```bash
# .env
API_HOST=https://flowise.example.com
FLOWISE_API_KEY=your-api-key
# Configure chatflows (identifier=chatflowId,domain1,domain2)
sales_bot=91e9c803-5169-4db9-8207-3c0915d71c5f,https://sales.example.com
```
--------------------------------
### Connect to Flowise during Development
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Configure the script in `public/index.html` to connect to a local Flowise instance during development. Ensure your `chatflowid` and `apiHost` are correctly set.
```html
```
--------------------------------
### Proxy Server Optional Environment Variables
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/configuration.md
Configures optional settings for the proxy server, such as the port, host, environment mode, and public base URL for cloud deployments.
```bash
PORT=3001 # Server port (default: 3001)
HOST=0.0.0.0 # Server host (default: 0.0.0.0)
NODE_ENV=production # Environment (production or development)
BASE_URL=https://your-domain.com # Public URL for cloud deployment
```
--------------------------------
### Configure Chatbot for Local Development
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Update public/index.html to use local development settings. Ensure 'chatflowid' matches your .env and 'apiHost' is set to 'http://localhost:3001'.
```html
```
--------------------------------
### Configure Full Chatbot for Local Development
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Use this configuration in public/index.html for full page chatbot testing during local development. Ensure 'chatflowid' matches your .env and 'apiHost' is set to 'http://localhost:3001'.
```html
```
--------------------------------
### Initialize Chatbot with Dialog Container (HTMLElement)
Source: https://github.com/flowiseai/flowisechatembed/blob/main/README.md
Alternatively, pass a direct `HTMLElement` reference to the `dialogContainer` prop for rendering the NodeDetailsDialog into a specific DOM element.
```html
```
```javascript
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.init({
chatflowid: '',
apiHost: 'http://localhost:3000',
dialogContainer: document.getElementById('flowise-portal'),
});
```
--------------------------------
### Fetch chatbot configuration
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/README.md
Retrieve the configuration details for a specific chatbot, which may include settings for uploads and starter prompts.
```APIDOC
## GET /api/v1/public-chatbotConfig/{chatflowid}
### Description
Fetch chatbot configuration
### Method
GET
### Endpoint
/api/v1/public-chatbotConfig/{chatflowid}
### Parameters
#### Path Parameters
- **chatflowid** (string) - Required - The ID of the chatflow to fetch configuration for.
### Response
#### Success Response (200)
- **config** (object) - The chatbot configuration object.
#### Response Example
```json
{
"config": {
"uploads": true,
"starterPrompts": ["Hello! How can I help you?"]
}
}
```
```
--------------------------------
### Auto Window Open Theme Configuration
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/types.md
Sets up automatic opening behavior for the chat window. Includes options for enabling auto-open, setting a delay, and controlling behavior on mobile devices.
```typescript
type autoWindowOpenTheme = {
autoOpen?: boolean;
openDelay?: number;
autoOpenOnMobile?: boolean;
}
```
--------------------------------
### getChatbotConfig
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/query-functions.md
Fetches the chatbot configuration, including upload constraints and starter prompts.
```APIDOC
## GET /api/v1/public-chatbotConfig/{chatflowid}
### Description
Fetches the chatbot configuration including upload constraints and starter prompts.
### Method
GET
### Endpoint
{apiHost}/api/v1/public-chatbotConfig/{chatflowid}
### Parameters
#### Path Parameters
- **chatflowid** (string) - Required - Chatflow UUID
#### Query Parameters
- **apiHost** (string) - Optional - API server. Defaults to 'http://localhost:3000'.
### Request Example
```typescript
const response = await getChatbotConfig({
chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f',
apiHost: 'http://localhost:3000',
});
if (response.data) {
console.log('Max file size:', response.data.uploads.fileUploadSizeAndTypes);
}
```
### Response
#### Success Response (200)
- **uploads** (object) - Upload configuration details.
- **imgUploadSizeAndTypes** (Array<{fileTypes: string[], maxUploadSize: number}>) - Allowed image file types and sizes.
- **fileUploadSizeAndTypes** (Array<{fileTypes: string[], maxUploadSize: number}>) - Allowed general file types and sizes.
- **isImageUploadAllowed** (boolean) - Whether image uploads are permitted.
- **isSpeechToTextEnabled** (boolean) - Whether speech-to-text is enabled.
- **isRAGFileUploadAllowed** (boolean) - Whether RAG file uploads are permitted.
- **starterPrompts** (string[]) - Optional - An array of starter prompts.
- **leads** (LeadsConfig) - Optional - Configuration for lead capture.
```
--------------------------------
### Chat Window Theme Configuration
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/types.md
Configuration for the main chat window's appearance and behavior. Includes options for title, messages, input field, and overall layout.
```typescript
type ChatWindowTheme = {
showTitle?: boolean;
showAgentMessages?: boolean;
title?: string;
titleAvatarSrc?: string;
titleTextColor?: string;
titleBackgroundColor?: string;
welcomeMessage?: string;
errorMessage?: string;
backgroundColor?: string;
backgroundImage?: string;
height?: number | string;
width?: number | string;
fontSize?: number;
userMessage?: UserMessageTheme;
botMessage?: BotMessageTheme;
textInput?: TextInputTheme;
feedback?: FeedbackTheme;
footer?: FooterTheme;
sourceDocsTitle?: string;
poweredByTextColor?: string;
starterPrompts?: string[];
starterPromptFontSize?: number;
clearChatOnReload?: boolean;
dateTimeToggle?: DateTimeToggleTheme;
renderHTML?: boolean;
headerHtml?: string;
}
```
--------------------------------
### Popup Embed with Observers Configuration
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/README.md
Initializes the popup chat widget and configures observers to track user input, messages, and loading states. Callbacks are provided for each observed event, logging data to the console.
```html
```
--------------------------------
### Components
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/MANIFEST.md
Reference for the available chatbot components, including bubble and full-page implementations.
```APIDOC
## Components
### Description
Documentation for the user-facing chatbot components.
### Components
- **``**
- **Purpose:** The bubble/popup chat widget component.
- **Features:** Initialization, button interaction, auto-open, chat window sizing, styling.
- **``**
- **Purpose:** The full-page chat widget component.
- **Features:** Initialization, lazy loading, styling, responsive sizing, HTML structure, theme integration.
```
--------------------------------
### Viewport Meta Tag for Interactive Widgets
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/full-component.md
This HTML snippet shows the recommended viewport meta tag configuration that includes `interactive-widget=resizes-content` to optimize browser behavior for interactive components like the Full Chatbot.
```html
```
--------------------------------
### Chatbot API Methods
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/chatbot-api.md
Provides an overview of the main methods available on the global `window.Chatbot` object for interacting with the chatbot widget.
```APIDOC
## Global Window Object
When the library is imported as an ES module, the Chatbot API is automatically injected into the `window` object.
```typescript
// Access via window.Chatbot
window.Chatbot.init({...});
window.Chatbot.initFull({...});
window.Chatbot.destroy();
window.Chatbot.clearChat();
```
### `init(props: BotProps)`
Initializes the chatbot widget with the provided configuration.
### `initFull(props: BotProps)`
Initializes the full chatbot widget, potentially with more advanced setup options.
### `destroy()`
Removes the chatbot widget and cleans up associated resources.
### `clearChat()`
Clears the current chat history.
```
--------------------------------
### Retrieve Chatbot Configuration
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/endpoints.md
Fetches the configuration for a specific chatflow, including settings for file uploads, starter prompts, and lead collection.
```typescript
const response = await fetch('http://localhost:3000/api/v1/public-chatbotConfig/91e9c803-5169-4db9-8207-3c0915d71c5f');
const config = await response.json();
```
--------------------------------
### Enable HTML Rendering
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bot-component.md
Configuration option to enable rendering of bot messages as HTML. Content is sanitized to prevent XSS attacks.
```typescript
renderHTML: true
```
--------------------------------
### sendFileDownloadQuery
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/query-functions.md
Downloads files generated by OpenAI Assistants. This function allows users to retrieve binary files associated with OpenAI Assistant messages.
```APIDOC
## POST /api/v1/openai-assistants-file/download
### Description
Downloads files generated by OpenAI Assistants. This function allows users to retrieve binary files associated with OpenAI Assistant messages.
### Method
POST
### Endpoint
`{apiHost}/api/v1/openai-assistants-file/download`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **fileId** (string) - Required - OpenAI file ID
### Request Example
```json
{
"fileId": "file-abc123"
}
```
### Response
#### Success Response (200)
- **data** (Blob) - Binary file data
#### Response Example
```json
{
"data": "[Binary file data]"
}
```
```
--------------------------------
### Enable Date and Time Display in Chat
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/bot-component.md
Configure the chat window theme to show timestamps on messages. Set 'date' and 'time' to true to enable display.
```typescript
theme: {
chatWindow: {
dateTimeToggle: {
date: true, // Show message date
time: true, // Show message time
}
}
}
```
--------------------------------
### Initialize Full-Page Chat Widget
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/api-reference/chatbot-api.md
Use this function to initialize a full-page chat widget that occupies the entire viewport or a specified container. Configure the chatflowid, API host, and theme as needed.
```typescript
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
Chatbot.initFull({
chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f',
apiHost: 'https://your-flowise-instance.com',
theme: {
chatWindow: {
height: '100dvh',
showTitle: true,
},
},
});
```
--------------------------------
### Full-Page Embed with Flowise Embed JS
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/README.md
Initializes the full-page chat interface using the `initFull` function. Requires `chatflowid` and `apiHost`. This method is used for a viewport-filling chat experience.
```html
```
--------------------------------
### Tooltip Theme Configuration
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/types.md
Configures the tooltip that appears near the chat button. Allows enabling/disabling the tooltip, setting its message, and customizing its appearance.
```typescript
type ToolTipTheme = {
showTooltip?: boolean;
tooltipMessage?: string;
tooltipBackgroundColor?: string;
tooltipTextColor?: string;
tooltipFontSize?: number;
}
```
--------------------------------
### Configure Chat Window Theme
Source: https://github.com/flowiseai/flowisechatembed/blob/main/_autodocs/configuration.md
Customize the appearance of the chat window, including titles, colors, sizing, and message rendering. Set properties like title text, background colors, dimensions, and whether to render HTML messages.
```typescript
theme: {
chatWindow: {
title: 'Support Bot',
titleBackgroundColor: '#1f2937',
titleTextColor: '#ffffff',
backgroundColor: '#f9fafb',
height: '80dvh',
width: '450px',
fontSize: 15,
welcomeMessage: 'Welcome! How can we help you today?',
showTitle: true,
showAgentMessages: true,
clearChatOnReload: false,
renderHTML: true,
}
}
```