connect_x_flutter_livechat_sdk 1.2.1

Live Chat SDK for Flutter

Connect-X Live Chat SDK

An SDK for easily integrating the Connect-X Live Chat into your Flutter application for Connect-X ticket. You need to config Live Chat connector from Connect-X by navigating to: Organization Settings → Connector → Live Chat.

✨ Features

• Displays a chat window as a modal over the main screen.
• Supports sending text messages, images, and document.
• Displays chat history with date partitions.
• Customizable styles and colors from from Connect-X by navigating to: Organization Settings → Connector → Live Chat → Style.
• Supports custom header components.
• Image preview with zoom capabilities.

🔧 Installation

flutter pub add connect_x_flutter_livechat_sdk

🚀 Usage

import 'package:connect_x_flutter_livechat_sdk/connect_x_flutter_livechat_sdk.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await ChatController.instance.initialize(
    token: 'YOUR_TOKEN', // Replace with your actual token
    orgId: 'YOUR_ORG_ID', // Replace with your actual org ID
    channelId: 'YOUR_CHANNEL_ID', // Replace with your actual channel ID
    externalValue: 'YOUR_EXTERNAL_VALUE', // Replace with a unique user identifier
  );
  runApp(const MyApp());
}

// Open Chat Screen
ElevatedButton(
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => ChatScreen(
        onClose: () => Navigator.pop(context),
         // You can also pass a custom header if needed:
        customHeader: AppBar(
          title: const Text("Support Chat"),
          backgroundColor: Colors.teal,
        ),
      ),
    ),
  );
},
child: const Text("Open Chat UI"),
),

// Send message to chat
ChatController.instance.sendMessage(text: text);

// Listen to new messages (e.g., for Custom UI Notifications)
ChatController.instance.onNewMessage.listen((message) {
  if (message.sender == 'agent') {
    // Show active in-app banner or custom notification
  }
});

// Handling Unread Message Indicator / Notification Bell (Persisted Offline)
ValueListenableBuilder<bool>(
  valueListenable: ChatController.instance.hasUnreadMessagesNotifier,
  builder: (context, hasUnread, child) {
    return Stack(
      children: [
        IconButton(
          icon: const Icon(Icons.notifications),
          onPressed: () {
            // 1. Clear the red dot
            ChatController.instance.markAsRead();
            // 2. Open Chat Screen
          },
        ),
        if (hasUnread)
          Positioned(
            right: 12,
            top: 12,
            child: Container(
              width: 12,
              height: 12,
              decoration: const BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle,
              ),
            ),
          ),
      ],
    );
  },
);

📖 API Reference

ChatScreen Configuration

Prop	Type	Required	Description
token	string	Yes	Authorization token for authentication from Connect-X by navigating to: Organization Settings → SDK Tracking.
orgId	string	Yes	Your organization's ID.
channelId	string	Yes	The ID of the Live Chat channel.
externalValue	string	Yes	A value to identify the customer(Should be unique), You can setup external key from Connect-X by navigating to: Organization Settings → Connector → Live Chat → Drop Form → Upsert Key.
customHeader	React.ReactNode	No	A React Component to render as a replacement for the default chat header.
isHideCloseButton	bool	No	Set to true to hide the default close (✕) button on the top right of the chat header.

ChatController Methods & Properties

Name	Type	Description
initialize(...)	Future<void>	Initializes SDK configuration, establishes connection, and loads chat history.
sendMessage({required String text})	Future<void>	Sends a text message in the chat background.
markAsRead()	Future<void>	Clears the unread status and persists the last read message timestamp on the device.
hasUnreadMessagesNotifier	ValueNotifier<bool>	A ValueNotifier indicating if there are unread messages from agent (persisted offline).
onNewMessage	Stream<Message>	A broadcast stream that emits whenever a new message is received.

---

📄 License

---

Made with create-react-native-library