Connect-X Live Chat SDK

An SDK for easily integrating the Connect-X Live Chat into your React Native 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

npm install connect-x-reactnative-livechat-sdk

#or

yarn add connect-x-reactnative-livechat-sdk

Additional Peer Dependencies

This library requires some peer dependencies. You need to install these libraries in your project as well:

npm install socket.io-client @react-native-documents/picker react-native-svg react-native-image-zoom-viewer react-native-device-info @react-native-community/netinfo

#or

yarn add socket.io-client @react-native-documents/picker react-native-svg react-native-image-zoom-viewer react-native-device-info @react-native-community/netinfo

🚀 Usage

1. Wrap Your App with ChatProvider

In your main application file (e.g., App.tsx or index.js), you must import ChatProvider and wrap your root component with it.

// App.tsx
import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { ChatProvider, LiveChat } from 'connect-x-reactnative-livechat-sdk';

const AppContent = () => {
  // ... Your app content
  return (
    <View style={styles.container}>
      <Button
        title="Open Live Chat"
        onPress={() => {
          LiveChat.show({
            token: 'YOUR_AUTH_TOKEN',
            orgId: 'YOUR_ORGANIZATION_ID',
            channelId: 'YOUR_CHANNEL_ID',
            externalValue: 'YOUR_EXTERNAL_VALUE',
          });
        }}
      />
    </View>
  );
};

const App = () => {
  return (
    <ChatProvider>
      <AppContent />
    </ChatProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

2. Showing the Chat Window

You can call LiveChat.show() from anywhere in your application to open the chat window.

import { LiveChat } from 'connect-x-reactnative-livechat-sdk';

LiveChat.show({
  token: 'YOUR_AUTH_TOKEN',
  orgId: 'YOUR_ORGANIZATION_ID',
  channelId: 'YOUR_CHANNEL_ID',
  customer: {
    cx_Name: 'CUSTOMER_NAME',
    cx_firstName: 'CUSTOMER_FIRST_NAME',
    cx_lastName: 'CUSTOMER_LAST_NAME',
    // You can add any customer field here
    // Note: The customer object must contain at least one field configured as an Upsert Key in Connect-X.
  },
  customHeader: <YourCustomHeaderComponent />, // Optional
});

3. Hiding the Chat Window (If Needed)

You can programmatically call LiveChat.hide() to close the chat window (e.g., from a close button in a custom header).

import { LiveChat } from 'connect-x-reactnative-livechat-sdk';

LiveChat.hide();

📖 API Reference

LiveChat.show(config)

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. |

📄 License

Made with create-react-native-library