> ## Documentation Index
> Fetch the complete documentation index at: https://docs.breezeflow.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Agent Setup
> Learn how to connect Breezeflow chatbot to your website
## Overview
Breezeflow's AI chatbot enhances your website's customer support capabilities by providing instant, intelligent responses to visitor inquiries. This guide will walk you through the process of integrating the Breezeflow chatbot into your website.
## Prerequisites
Before you begin, ensure you have:
* A Breezeflow account with chatbot access
* Your unique chatbot ID (available in your Breezeflow dashboard)
* Access to your website's codebase
## Integration Methods
You can integrate the Breezeflow chatbot using either NPM packages or a CDN link. Choose the method that best suits your development environment.
## 1. Using NPM
```
npm install breezeflow-sdk
or
yarn add breezeflow-sdk
or
pnpm add breezeflow-sdk
```
### Usage
```javascript theme={null}
import { BreezeflowChat } from 'breezeflow-sdk';
import 'breezeflow-sdk/style.css';
const MyComponent = () => {
const agent = {
orientation: "right",
color: "#0d3033",
logoURL: "path/to/your/logo.svg",
headline: "Chat with our AI",
description: "Ask me anything, and I'll do my best to answer!",
initialMessage: "Hello 👋 How can I help you today?",
placeholder: "Type your message here...",
newChatButtonText: "Start a new chat"
};
return (
);
};
```
## 2. Using CDN
Add the CDN link `https://cdn.jsdelivr.net/npm/breezeflow-sdk@latest/chat.js` to the `head` tag of your HTML file.
### Usage
```HTML theme={null}
Basic HTML Snippet
```
To get started, log in to your [Breezeflow](https://www.breezeflow.io) account and obtain your chatbot ID from the dashboard.
## Configuration Options
### Agent Props
| Prop | Type | Description |
| ------------------------ | ----------------- | ------------------------------------ |
| orientation | "left" \| "right" | Chat window position |
| color | string | Primary color for the chat interface |
| logoURL | string | URL for the agent's avatar image |
| headline | string | Chat window title |
| description | string | Subtitle text below the headline |
| initialMessage | string | First message from the AI |
| initialMessagePopupDelay | string | Delay before showing initial message |
| placeholder | string | Input field placeholder text |
| newChatButtonText | string | Text for the new chat button |
### Style Props
| Prop | Type | Description |
| ------------ | --------------------- | ----------------------------- |
| theme | `"light"` \| `"dark"` | UI theme |
| colors | `object` | Custom color configuration |
| container | `object` | Container size and position |
| borderRadius | `object` | Border radius for UI elements |
| button | `object` | Chat button configuration |
## Testing Your Integration
After implementation:
1. Visit your website to ensure the chat widget appears
2. Test the chat functionality with sample questions
3. Verify that the styling matches your website's theme
4. Check both desktop and mobile responsiveness
Remember to replace `your-agent-id` with your actual agent ID from your Breezeflow account. For additional support or troubleshooting, visit your Breezeflow dashboard or contact our support team.