0.5.2 • Published 10 months ago

@chative.io/react-native-widget v0.5.2

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

Chative.IO Widget for React Native

Chative.IO Widget is a React Native component that provides an easy-to-use chat widget for your mobile applications. It allows you to integrate a customizable chat interface with minimal setup.

Features

  • Customizable chat interface
  • Easy to show/hide programmatically
  • Supports custom header components
  • Supports filling user information into live chat. (v0.5 or higher)
  • Adjustable insets for different device sizes
  • TypeScript support

Screenshot

Installation

npm install @chative.io/react-native-widget
# or
yarn add @chative.io/react-native-widget

This library depends on react-native-webview and async-storage. Please follow the instructions provided in the docs.

Usage

Here's a basic example of how to use the ChativeWidget in your React Native application:

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import ChativeWidget from '@chative.io/react-native-widget';

export default function App() {
  const widgetRef = useRef(null);

  const handleOpenChat = () => {
    widgetRef.current?.show();
  };

  const handleCloseChat = () => {
    // widgetRef.current?.hide();
  };

  const user = {
    user_id: 'UNIQUE_USER_ID',
     user: {
        email: 'acme@example.com', // Your user's email address
        first_name: 'John',
        last_name: 'Doe',
        phone: '+1234567890',
        custom_field: 'CUSTOMER_FIELD_VALUE' // Replace key and value with your custom field
    },
  }

  return (
    <View style={{ flex: 1 }}>
      <Button title="Open Chat" onPress={handleOpenChat} />
      <ChativeWidget
        ref={widgetRef}
        channelId="your-channel-id"
        user={user} // v0.5 or higher
        onClosed={() => console.log('Widget closed')}
        onLoaded={() => console.log('Widget loaded')}
        onNewMessage={(message) => console.log('New message:', message)}
        onError={(message) => console.log('Error', message)}
      />
    </View>
  );
}

Props

PropTypeRequiredDescription
channelIdstringYesThe ID of the chat channel
userChativeWidgetUserNoInformation about the user, used for booting into live chat.
headerComponentReactElementNoCustom header component
containerStyleViewStyleNoCustom style for the container
insetTopnumberNoTop inset (default: 50 for iOS, 20 for Android)
insetBottomnumberNoBottom inset (default: 50 for iOS, 20 for Android)
onClosed() => voidNoCallback when the widget is closed
onLoaded() => voidNoCallback when the widget is loaded
onNewMessage() => voidNoCallback when a new message is received
onError(error:string) => voidNoCallback function triggered when an error occurs.

Methods

The following methods are available via the ref:

  • show(): Display the chat widget
  • hide(): Hide the chat widget
  • reload(): Reload the widget

Customization

You can customize the appearance of the widget by providing a custom header component and container style:

<ChativeWidget
  ref={widgetRef}
  channelId="your-channel-id"
  headerComponent={<YourCustomHeader />}
  containerStyle={{ backgroundColor: 'lightgray' }}
/>

TypeScript Support

This module includes TypeScript declarations. You can import types like this:

import ChativeWidget, { ChativeWidgetRef, ChativeWidgetUser } from '@chative.io/react-native-widget';

ChativeWidgetUser Interface

FieldTypeRequiredDescription
user_idstringYesA unique identifier for the user. This is used to track the user's session in the chat.
user.emailstringNoThe user's email address. Optional, but recommended for better user identification.
user.first_namestringNoThe user's first name. Optional, useful for personalized interactions.
user.last_namestringNoThe user's last name. Optional, useful for personalized interactions.
user.phonestringNoThe user's phone number. Optional, can be used for follow-up contact.
user.key: string: anyanyNoAny additional information about the user, represented as key-value pairs. This can be used for custom data.

License

MIT License

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.