Agent Setup

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

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 (
    <BreezeflowChat 
      agent={agent}
      agentId="your-agent-id"
      styles={{
        theme: 'light', // or 'dark'
        colors: {
          primary: '#0051FF',
          darkBg: '#1a1d21',
          lightBg: '#ffffff',
          messageBgDark: '#1e2227',
          messageBgLight: '#f7f7f7',
          inputBgDark: '#2a2e33',
          inputBgLight: '#f2f2f2'
        }
      }}
    />
  );
};

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script async type="text/javascript" src="https://cdn.jsdelivr.net/npm/breezeflow-sdk@latest/chat.js"></script>
    <title>Basic HTML Snippet</title>
</head>
<body>
    <bf-chat 
    chatbotID="YOUR-CHATBOT-ID"
    theme="dark"
    orientation="right"
    color="#0d3033"
    logoURL="https://mintlify.s3-us-west-1.amazonaws.com/breezeflow/images/hero-dark.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">
</bf-chat>
</body>
</html>

To get started, log in to your Breezeflow 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:

Visit your website to ensure the chat widget appears
Test the chat functionality with sample questions
Verify that the styling matches your website’s theme
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.

Welcome to Breezeflow

Feature Documentation

Overview

Prerequisites

Integration Methods

1. Using NPM

Usage

2. Using CDN

Usage

Configuration Options

Agent Props

Style Props

Testing Your Integration

​Overview

​Prerequisites

​Integration Methods

​1. Using NPM

​Usage

​2. Using CDN

​Usage

​Configuration Options

​Agent Props

​Style Props

​Testing Your Integration

Overview

Prerequisites

Integration Methods

1. Using NPM

Usage

2. Using CDN

Usage

Configuration Options

Agent Props

Style Props

Testing Your Integration