Flutter Bot - AI Chatbot Widget #

A beautiful, customizable AI chatbot widget that can be easily integrated into any Flutter app. Perfect for adding intelligent customer support to your applications with just a few lines of code.

Features #

• 🎨 Beautiful UI: Modern, customizable design with smooth animations
• 🚀 Easy Integration: Single widget integration with minimal setup
• 🔒 Secure: Project-based authentication with secure keys
• 📱 Responsive: Adaptive design for mobile and web platforms
• ⚡ Real-time: Live chat with typing indicators
• 🎭 Customizable: Themes, colors, FAB styles, and behavior
• 🌐 Multi-platform: Works on iOS, Android, and Web

Installation #

Add to your pubspec.yaml:

dependencies:
  flutter_bot: ^1.0.0

Quick Start #

1. Import the package #

import 'package:flutter_bot/flutter_bot.dart';

2. Add the ChatWidget to your app #

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Your app content here
          YourMainContent(),
          
          // Add the chatbot
          Positioned(
            bottom: 20,
            right: 20,
            child: ChatWidget(
              configuration: BotConfiguration(
                projectSecretKey: 'your-project-secret-key',
                userID: 'unique-user-id',
                name: 'Support Bot',
                welcomeMessage: 'Hello! How can I help you today?',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Configuration Options #

Basic Configuration #

BotConfiguration(
  // Required
  projectSecretKey: 'your-secret-key',  // Get from your dashboard
  userID: 'user-123',                   // Unique identifier for the user
  
  // Optional
  name: 'Assistant',                    // Bot display name
  welcomeMessage: 'How can I help?',    // Initial greeting
  fontFamily: 'Roboto',                 // Chat font (default: Roboto)
  color: '#3B82F6',                     // Primary color in hex
  systemInstructions: 'Be helpful',     // Bot behavior instructions
  isPreviewMode: false,                 // Preview mode flag
)

FAB Customization #

BotConfiguration(
  projectSecretKey: 'your-key',
  userID: 'user-123',
  fabConfiguration: FabConfiguration(
    icon: 'chat_bubble',           // Icon name
    iconSize: 24.0,                // Icon size
    iconColor: '#FFFFFF',          // Icon color in hex
    backgroundColor: '#3B82F6',     // Background color in hex
    buttonSize: 56.0,              // FAB size
    borderRadius: 28.0,            // Corner radius
    useAvatarAsIcon: false,        // Use avatar image as icon
  ),
)

Advanced Usage #

Responsive Design #

ChatWidget(
  configuration: BotConfiguration(
    projectSecretKey: 'your-key',
    userID: 'user-123',
  ),
  mobile: false,  // Set to false for web/desktop layout
)

Custom FAB Widget #

ChatWidget(
  configuration: BotConfiguration(
    projectSecretKey: 'your-key',
    userID: 'user-123',
  ),
  fabWidget: CustomFABWidget(),  // Your custom FAB
)

Chat State Callbacks #

ChatWidget(
  configuration: BotConfiguration(
    projectSecretKey: 'your-key',
    userID: 'user-123',
  ),
  onOpen: ({required bool isOpen}) {
    print('Chat is ${isOpen ? "open" : "closed"}');
    // Track analytics, update UI, etc.
  },
)

Platform-Specific Setup #

Web #

For web applications, the widget automatically adapts to show a fixed-size chat window instead of full-screen on desktop browsers.

Mobile #

On mobile devices, the chat opens in full-screen mode for the best user experience.

Available Icons #

The FAB supports these icon options:

• chat_bubble (default)
• chat
• message
• support_agent
• help
• question_answer
• forum
• contact_support
• headset_mic

Security Best Practices #

1. Never expose your project secret key in client-side code
2. Use unique user IDs to maintain conversation history
3. Configure allowed origins for web deployments
4. Keep your SDK updated for security patches

Example App #

Check out the complete example in the /example folder:

import 'package:flutter/material.dart';
import 'package:flutter_bot/flutter_bot.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bot Example',
      home: Scaffold(
        body: Stack(
          children: [
            Center(
              child: Text('Your App Content'),
            ),
            Positioned(
              bottom: 20,
              right: 20,
              child: ChatWidget(
                configuration: BotConfiguration(
                  projectSecretKey: 'your-project-secret-key',
                  userID: 'demo-user',
                  name: 'AI Assistant',
                  welcomeMessage: 'Hi! How can I help you today?',
                  color: '#6366F1',
                  fabConfiguration: FabConfiguration(
                    icon: 'support_agent',
                    backgroundColor: '#6366F1',
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Troubleshooting #

Chat doesn't open #

• Verify your project secret key is correct
• Check console for any error messages
• Ensure the widget is properly positioned in your widget tree

Styling issues #

• Make sure hex colors include the # symbol
• Use supported Google Fonts for fontFamily
• Check that size values are reasonable (e.g., buttonSize: 56.0)

Support #

• Documentation: https://docs.widget-chat.com
• Email: support@widget-chat.com
• GitHub Issues: Report bugs here

License #

This project is licensed under the Proprietary License - see the LICENSE file for details.