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);
📖 API Reference
A method to open the chat window. It accepts a config object with the following properties:
| 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. |
📄 License
Made with create-react-native-library