@nuedesk/nuechat-react-native

Nuedesk Live Chat SDK for React Native applications. This SDK allows you to integrate a live chat widget into your React Native app, enabling real-time communication with your users.

Features

• Real-Time Messaging: Seamlessly communicate with your users in real-time.
• Customizable Widget: Easily configure the widget's appearance and behavior.
• User Management: Register and manage users for personalized chat experiences.
• Cross-Platform Support: Works on both iOS and Android platforms.
• Lightweight and Easy to Use: Simple API for quick integration.

Installation

Install the SDK using npm:

npm install @nuedesk/nuechat-react-native react-native-webview

Or using yarn:

yarn add @nuedesk/nuechat-react-native react-native-webview

Usage

1. Initialize the SDK

The NueChatSDK must be initialized globally in your app. This is typically done in the root component (App.tsx).

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { NueChatSDK } from '@nuedesk/nuechat-react-native';
import HomeScreen from './HomeScreen';
import SupportScreen from './SupportScreen';

const Stack = createStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Support" component={SupportScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  // Initialize the SDK with your API key
  NueChatSDK.initialize({
    apiKey: 'YOUR_API_KEY',
  });

  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}

2. Render the Chat Page

You can use NueChatSDK.Page to render the chat widget in a specific screen, such as a SupportScreen.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { NueChatSDK } from '@nuedesk/nuechat-react-native';

export default function SupportScreen() {
  return (
    <View style={styles.container}>
      {/* Render the chat widget */}
      <NueChatSDK.Page />
    </View>
  );
}

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

Configuration

SDK Initialization

The initialize method is used to configure the SDK globally.

Example:

NueChatSDK.initialize({
  apiKey: 'YOUR_API_KEY',
});

Parameters:

• apiKey (string, required): Your API key for authenticating with the Nuedesk server.
• user (optional): An object containing user information.

Example:

NueChatSDK.initialize({
  apiKey: 'YOUR_API_KEY',
  user: {
    id: 'user-123',
    email: '[email protected]',
    firstName: 'John',
    lastName: 'Doe',
  },
});

User Object:

• id (string, required): A unique identifier for the user.
• email (string, required): The user's email address.
• firstName (string, optional): The user's first name.
• lastName (string, optional): The user's last name.

Contributing

We welcome contributions! Please follow the guidelines below:

• Development workflow
• Sending a pull request
• Code of conduct

License

This project is licensed under the MIT License.

Support

If you encounter any issues or have questions, feel free to open an issue on the GitHub repository.

Acknowledgments

Special thanks to the Nuedesk team for their support and contributions to this project.