🗨️ Chatbot Component for React & Next.js

A lightweight, customizable Chatbot component for React and Next.js apps. All CSS is bundled inline, so you can drop it in without extra setup. Part of the Chatbotly ecosystem.

🚀 Features

• ✅ Works with React 18+ and Next.js 13+
• ✅ Inline CSS — no extra stylesheet needed
• ✅ Fully customizable: avatars, colors, titles, messages
• ✅ Supports callbacks for message handling
• ✅ Optimized for SSR & client-side rendering

📦 Installation

npm install chatbotly-react
# or
yarn add chatbotly-react

Peer dependencies: React and ReactDOM.

🛠️ Usage

React Example

import React from "react";
import { Chatbot } from "@chatbotly-react";

export default function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Chatbot
        chatbotId="chatbot_123"
        apiKey="YOUR_API_KEY"
        user={{ id: "user_001", name: "Jane Doe" }}
        apiEndpoint="https://api.your-saas.com/chat"
        position="bottom-right"
        primaryColor="#2563eb"
        secondaryColor="#10b981"
        title="Support Chat"
        welcomeMessage="Hello! How can I help you today?"
        botAvatar="https://example.com/bot-avatar.png"
        userAvatar="https://example.com/user-avatar.png"
        onSaveMessage={(msg) => console.log("Saved message:", msg)}
        initialMessages={[
          { role: "bot", content: "Welcome to the chat!" },
        ]}
      />
    </div>
  );
}

All CSS is inline and bundled, so you don’t need to import any stylesheet.

⚙️ Props

| Prop | Type | Default | Description | | | | | ----------------- | ----------------------- | ------------- | ----------------------------------------------- | ------------ | ---------------- | ------------------------------------- | | user | User | — | User information object (required) | | | | | chatbotId | string | — | Unique identifier for the chatbot (required) | | | | | apiKey | string | — | API key for authentication (required) | | | | | position | `'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'` | 'bottom-right' | Position of the chatbot on the screen | | onSaveMessage | (messageData) => void | undefined | Callback invoked when a message is saved | | | | | initialMessages | ChatMessage[] | [] | Optional array of initial messages | | | | | primaryColor | string | "#2563eb" | Main color for buttons, headers, and highlights | | | | | secondaryColor | string | "#10b981" | Secondary color for accents | | | | | botAvatar | string | undefined | URL of the bot avatar | | | | | userAvatar | string | undefined | URL of the user avatar | | | | | title | string | "" | Chat window title | | | | | welcomeMessage | string | "Hello!" | Message shown when chat starts | | | | | apiEndpoint | string | "/api/chat" | Backend endpoint to handle messages | | | |

🎨 Customization

• primaryColor and secondaryColor control theme colors
• title sets the chat window header
• botAvatar and userAvatar show custom avatars
• welcomeMessage lets you define the greeting
• position places the chat widget anywhere in the viewport

🧪 Development / Testing

git clone https://github.com/Walon-Foundation/chatbot-react
cd chatbot-react
npm install

Test the component locally in a React or Next.js app.

📖 Roadmap

• [ ] Multiple chatbot API support
• [ ] Dark/light themes
• [ ] Typing indicators & animations
• [ ] Message history persistence

🤝 Contributing

1. Fork the repo
2. Create a feature/fix branch
3. Submit a pull request

📄 License

This project is licensed under the MIT license.