🤖 Chatbot Floating Widget

A reusable floating chatbot widget built with React + Tailwind.
Easily add AI-powered chat to any application with a single component.

🚀 Features

• Floating button that opens a chat window.
• Configurable API endpoint via props or environment variables.
• Customizable colors (primaryColor, buttonColor).
• Lightweight build using tsup.
• Easy integration into Next.js, CRA, or any React project.

📦 Installation

npm install chatbot-widget
# or
yarn add chatbot-widget
# or
pnpm add chatbot-widget

🔧 Usage

import { Chatbot } from "chatbot-widget";

export default function App() {
  return (
    <div>
      <h1>My App</h1>
      <Chatbot
        apiUrl={process.env.NEXT_PUBLIC_CHATBOT_API}
        primaryColor="#2563eb"
        buttonColor="#facc15"
      />
    </div>
  );
}

⚙️ Props

| Prop | Type | Default | Description | |---------------|----------|-----------|-------------| | apiUrl | string | required | API endpoint for chatbot requests | | primaryColor| string | #2563eb | Main theme color | | buttonColor | string | #2563eb | Floating button background color |

🌍 Environment Variables

You can also configure the API URL via env variables:

NEXT_PUBLIC_CHATBOT_API=https://your-backend.com/api/chat

Then:

<Chatbot apiUrl={process.env.NEXT_PUBLIC_CHATBOT_API} />

🛠 Development

Clone the repo and install dependencies:

git clone https://github.com/your-org/chatbot-widget.git
cd chatbot-widget
npm install

Run in dev mode:

npm run dev

Build for production:

npm run build

🚀 Publishing to npm

npm login
npm run build
npm publish --access public

📄 License

MIT © [Your Name / Company]