Flutter Chatbot SDK

Prerequisites

Flutter & Dart

iOS

Android

Installation

Add Dependency

In the host app's pubspec.yaml:

dependencies:
  dialogs_chatbot_flutter: ^1.0.0

  # Required peer dependency — add to host app
  flutter_inappwebview: ^6.1.5

Run:

flutter pub get

iOS Setup

In ios/Runner/Info.plist, add:

<key>NSCameraUsageDescription</key>
<string>Camera access is required to send photos and make video calls.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required for audio and video calls.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Photo library access is required to send images.</string>

In ios/Podfile, ensure minimum iOS version:

platform :ios, '12.0'

Android Setup

In android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.INTERNET" />

In android/app/build.gradle:

android {
    defaultConfig {
        minSdkVersion 21
    }
}

Pattern 1 — Simplest (Screen, no controller)

import 'package:dialogs_chatbot_flutter/dialogs_chatbot_flutter.dart';

Navigator.push(context, MaterialPageRoute(
  builder: (_) => EnxChatScreen(
    config: const EnxBotConfig(
      botId: 'YOUR_BOT_ID',
      host: 'https://dialogs.enablex.io',
    ),
  ),
));

Pattern 2 — Embedded Widget

Scaffold(
  body: EnxChatWidget(
    config: const EnxBotConfig(
      botId: 'YOUR_BOT_ID',
      host: 'https://dialogs.enablex.io',
    ),
    theme: EnxChatTheme.mobileClassic,
    onMessageReceived: (msg) => print(msg.text),
  ),
)

Pattern 3 — External Controller (full control)

class ChatPage extends StatefulWidget {
  const ChatPage({super.key});
  @override
  State createState() => _ChatPageState();
}

class _ChatPageState extends State {
  late final EnxChatController _controller;

  @override
  void initState() {
    super.initState();
    _controller = EnxChatController(
      config: const EnxBotConfig(
        botId: 'YOUR_BOT_ID',
        host: 'https://dialogs.enablex.io',
        callingEnabled: true,
      ),
    );
    _controller.onStatusChanged = (s) => setState(() {});
    _controller.onError = (msg, type) => _showError(msg);
    _controller.initialize();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => EnxChatWidget.withController(
    controller: _controller,
    showCallingOptions: true,
    onAudioCall: () => /* your call SDK */,
    onVideoCall: () => /* your call SDK */,
  );
}

Pattern 4 — BLoC / Stream Integration

// In your BLoC:
final _sub = controller.messageStream.listen((msg) => add(BotMessageEvent(msg)));
final _statusSub = controller.statusStream.listen((s) => add(ConnectionEvent(s)));

// In dispose:
await _sub.cancel();
await _statusSub.cancel();
controller.dispose();

Configuration Reference

EnxBotConfig Fields

Theme Customisation

const EnxChatTheme myTheme = EnxChatTheme(
  primaryColor: Color(0xFF1A73E8),          // Google Blue
  userBubbleColor: Color(0xFFE8F0FE),
  botBubbleColor: Colors.white,
  backgroundColor: Color(0xFFF5F5F5),
  userAvatarColor: Color(0xFF1A73E8),
  botAvatarColor: Color(0xFF34A853),
  useMobileClassicLayout: false,
);

For a WhatsApp-style layout:

theme: EnxChatTheme.mobileClassic

Message Types — Developer Reference

When onMessageReceived fires, check message.type to handle each case:

controller.onMessageReceived = (EnxMessage msg) {
  switch (msg.type) {
    case EnxMessageType.text:
      // msg.text — plain text
      // msg.actions — optional action buttons
      break;

    case EnxMessageType.suggestion:
      // msg.choices — List
      // msg.suggestionType — single or multiple
      break;

    case EnxMessageType.image:
      // msg.media?.url — CDN image URL
      break;

    case EnxMessageType.video:
      // msg.media?.url — video URL
      break;

    case EnxMessageType.file:
      // msg.media?.url, msg.media?.fileName, msg.media?.mimeType
      break;

    case EnxMessageType.system:
      // msg.handoverStatus — handover lifecycle phase
      break;

    case EnxMessageType.typing:
      // Handled internally — shows EnxTypingBubble
      break;

    default:
      break;
  }
};

Sending Messages Programmatically

// Plain text
await _controller.sendText('What are your hours?');

// Single suggestion chip (after user taps)
await _controller.sendChoice(EnxChoice(title: 'Yes', value: 'yes'));

// Multiple suggestion chips
await _controller.sendMultiChoice([
  EnxChoice(title: 'Option A', value: 'a', isSelected: true),
  EnxChoice(title: 'Option B', value: 'b', isSelected: true),
]);

// File upload
final bytes = await File(path).readAsBytes();
await _controller.sendFile(
  bytes: bytes,
  fileName: 'report.pdf',
  mimeType: 'application/pdf',
);

// Reset conversation
await _controller.resetConversation();

Mode A — Bot-Initiated (Automatic)

The bot sends a message with audioVideoAction = "start" and iFrameUrl. The plugin automatically shows EnxVideoCallOverlay. No host app code needed.

Mode B — Button-Initiated (Manual)

Set callingEnabled: true and provide callbacks:

EnxChatWidget(
  config: config,
  showCallingOptions: true,
  onAudioCall: () => YourCallSDK.startAudio(),
  onVideoCall: () => YourCallSDK.startVideo(),
)

Plugin Internal Architecture

JS Bridge Communication

The bridge uses Flutter's JavascriptChannel API (named "EnxChannel"). All messages are JSON strings with the shape:

{
  "event": "message",
  "data": { ... }
}

Events Received from JS

Commands Sent to JS

window.sendTextMessage(text)
window.sendSuggestion(value)
window.sendMultiSuggestions([value1, value2])
window.sendFileMessage(base64DataURI, fileName, mimeType)
window.resetConversation()
window.reconnect()
window.disconnect()

Platform-Specific WebView Setup

The plugin automatically applies platform-specific WebView configuration via enx_webview_media_config.dart:

Android

PlatformWebViewControllerCreationParams enxWebViewCreationParamsForMedia()
// Returns AndroidWebViewControllerCreationParams with:
// - allowFileAccess: true
// - javaScriptCanOpenWindowsAutomatically: true

void enxConfigureAndroidWebViewMediaPermissions(WebViewController controller)
// Configures:
// - mediaPlaybackRequiresUserGesture: false
// - onPermissionRequest: auto-grant camera/mic

iOS

// Returns WebKitWebViewControllerCreationParams with:
// - allowsInlineMediaPlayback: true
// - mediaTypesRequiringUserActionForPlayback: []

File Structure

lib/
├── dialogs_chatbot_flutter.dart          ← Single import barrel
└── src/
    ├── models/
    │   ├── enx_bot_config.dart            ← Bot configuration data object
    │   └── enx_message.dart               ← All message models + enums
    ├── controller/
    │   └── enx_chat_controller.dart       ← State, streams, send methods
    ├── bridge/
    │   └── enx_webview_bridge.dart        ← JS↔Dart bridge
    ├── utils/
    │   └── enx_webview_media_config.dart  ← Platform WebView config
    └── views/
        ├── enx_chat_widget.dart            ← Embeddable widget
        ├── enx_chat_screen.dart            ← Full-screen scaffold
        ├── enx_chat_list.dart              ← Scrollable message list
        ├── enx_message_cell.dart           ← Per-message renderer + theme
        ├── enx_input_bar.dart              ← Input + attachments + call buttons
        ├── enx_typing_bubble.dart          ← Animated 3-dot indicator
        └── enx_video_call_overlay.dart     ← Agent video WebView (InAppWebView)

Feature Support (v1.0.0)

Dependencies

Known Limitations

Troubleshooting

Chat Shows Blank / Spinner Never Resolves

• Check that botId and host are correct
• Confirm network connectivity to host
• Check onError callback for bridge errors

Images/Videos Don't Autoplay on Android

• Ensure enxConfigureAndroidWebViewMediaPermissions was called (done automatically via bridge)
• Check that minSdkVersion >= 21

MissingPluginException for flutter_inappwebview

• Add flutter_inappwebview: ^6.1.5 to the host app's pubspec.yaml
• Run flutter pub get and rebuild

File Upload Fails on iOS

• Add all three NS*UsageDescription keys to Info.plist
• Request permissions before calling sendFile

Black Screen in Video Overlay

• Confirm the iFrameUrl is HTTPS
• Add NSAppTransportSecurity exception if needed for development

License

This plugin is proprietary software owned by EnableX / VCloudX Infotech. All rights reserved. Redistribution requires written permission.

Support

• Dashboard: portal.enablex.io
• Docs: developer.enablex.io
• Issues: Contact EnableX support team