Beon Widget SDK #

A fully-featured, customizable chat widget SDK for Flutter with real-time messaging support via WebSocket (Laravel Reverb).

Features #

• Real-time messaging via WebSocket (Laravel Reverb)
• Visitor persistence across sessions
• Pre-chat form for lead collection
• Customizable theming and positioning
• RTL/LTR language support
• File attachments
• Emoji picker
• Sound notifications
• Offline message caching
• Pagination support
• Polling fallback
• Fullscreen mode support

Installation #

Add to your pubspec.yaml:

dependencies:
  beon_widget_sdk: ^1.0.0

Then run:

flutter pub get

Quick Start #

Basic Integration #

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // Your app content
            MyMainContent(),

            // Beon Chat Widget (floating button + chat window)
            BeonChatWidget(
              config: BeonConfig(
                apiKey: 'your-api-key',
                primaryColor: Colors.indigo,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Fullscreen Mode #

For a fullscreen chat experience:

BeonChatWidget(
  config: BeonConfig(
    apiKey: 'your-api-key',
    fullScreen: true,
    headerTitle: 'Support Chat',
    headerSubtitle: 'We typically reply within minutes',
  ),
)

Web Embedding (via Script Tag) #

For web applications, you can read configuration from HTML script tags:

<script
  src="https://cdn.beon.chat/widget.js"
  data-api-key="your-api-key"
  data-color="#6366F1"
  data-position="bottom-right">
</script>

// In your Flutter web app
BeonChatWidget.fromScriptTag()

Configuration Options #

Widget Positions #

BeonPosition.bottomRight  // Default
BeonPosition.bottomLeft
BeonPosition.topRight
BeonPosition.topLeft

Customization #

Custom Theme #

BeonChatWidget(
  config: BeonConfig(
    apiKey: 'your-api-key',
    primaryColor: const Color(0xFF6366F1),
    headerTitle: 'Beon Support',
    headerSubtitle: 'How can we help you?',
  ),
)

RTL Support #

BeonChatWidget(
  config: BeonConfig(
    apiKey: 'your-api-key',
    textDirection: TextDirection.rtl,
    locale: 'ar',
  ),
)

Disable Pre-chat Form #

BeonChatWidget(
  config: BeonConfig(
    apiKey: 'your-api-key',
    preChatFormEnabled: false,
  ),
)

Architecture #

The SDK uses:

• Flutter Riverpod for state management
• Dio for HTTP networking
• WebSocket (Laravel Reverb) for real-time messaging
• SharedPreferences for local storage

Requirements #

• Flutter SDK >= 3.22.0
• Dart SDK >= 3.8.1

License #

MIT License - see LICENSE file.