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

Note for legacy version (react native 0.72++)

npm install [email protected]

#or

yarn [email protected]

You need to install the following peer dependencies manually:

npm install @react-native-documents/picker [email protected] react-native-image-zoom-viewer react-native-device-info @react-native-community/netinfo

If you have a problem with @react-native-documents/picker,

* What went wrong:
A problem occurred configuring project ':react-native-documents_picker'.
> Could not determine the dependencies of null.
   > Could not resolve all task dependencies for configuration ':react-native-documents_picker:classpath'.
      > Could not find org.jetbrains.kotlin:kotlin-gradle-plugin:null.
        Searched in the following locations:
          - https://dl.google.com/dl/android/maven2/org/jetbrains/kotlin/kotlin-gradle-plugin/null/kotlin-gradle-plugin-null.pom
          - https://repo.maven.apache.org/maven2/org/jetbrains/kotlin/kotlin-gradle-plugin/null/kotlin-gradle-plugin-null.pom
        Required by:
            project :react-native-documents_picker

follow this solution: https://github.com/react-native-documents/document-picker/issues/777#issuecomment-2682848232

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',
  externalValue: 'YOUR_EXTERNAL_VALUE',
  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