​
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

PropTypeDescription
orientation”left” | “right”Chat window position
colorstringPrimary color for the chat interface
logoURLstringURL for the agent’s avatar image
headlinestringChat window title
descriptionstringSubtitle text below the headline
initialMessagestringFirst message from the AI
initialMessagePopupDelaystringDelay before showing initial message
placeholderstringInput field placeholder text
newChatButtonTextstringText for the new chat button

​
Style Props

PropTypeDescription
theme"light" | "dark"UI theme
colorsobjectCustom color configuration
containerobjectContainer size and position
borderRadiusobjectBorder radius for UI elements
buttonobjectChat 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.

WhatsApp Integration