React Native

Add OneChat live chat widget to react native app and talk to your visitors in real time. OneChat helps you to chat with your visitors and provide exceptional support in real time. To use OneChat in your react native app, follow the steps described below.

1. Create a website inbox in OneChat

Refer to Website Channel document.

2. Add the plugin to your project

yarn add @OneChat/react-native-widget

or

npm install --save @OneChat/react-native-widget --save

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

iOS Installation

If you're using React Native versions > 60.0, it's relatively straightforward.

cd ios && pod install

3. How to use

Replace websiteToken and baseUrl with approriate values.

import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import OneChatWidget from '@OneChat/react-native-widget';

const App = () => {
  const [showWidget, toggleWidget] = useState(false);
  const user = {
    identifier: 'john@gmail.com',
    name: 'John Samuel',
    avatar_url: '',
    email: 'john@gmail.com',
    identifier_hash: '',
  };
  const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' };
  const websiteToken = 'WEBSITE_TOKEN';
  const baseUrl = 'OneChat_INSTALLATION_URL';
  const locale = 'en';

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}>
          <Text style={styles.buttonText}>Open widget</Text>
        </TouchableOpacity>
      </View>
      {
        showWidget&&
          <OneChatWidget
            websiteToken={websiteToken}
            locale={locale}
            baseUrl={baseUrl}
            closeModal={() => toggleWidget(false)}
            isModalVisible={showWidget}
            user={user}
            customAttributes={customAttributes}
          />
      }

    </SafeAreaView>
  );
};

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

  button: {
    height: 48,
    marginTop: 32,
    paddingTop: 8,
    paddingBottom: 8,
    backgroundColor: '#1F93FF',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#fff',
    justifyContent: 'center',
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',
    paddingLeft: 10,
    fontWeight: '600',
    fontSize: 16,
    paddingRight: 10,
  },
});

export default App;

Horray! You're done!

The whole example can be found here.

Props

baseUrl : String | OneChat Installation URL
websiteToken : String | Website Channel Token
locale : en String | Locale to be used in the widget. OneChat support 25+ language. See Langauge Config to see the supported ISO 639-1 codes
isModalVisible : false | Boolean | Flag used to set the display of the widget modal
closeModal : Function | Handler method for the callback when the modal is closed
user : {} | Object | Pass the information about the user like email, name and avatar_url
customAttributes : {} | Object | If you want to set additional information about user, pass the key value pair here

Updated on: 23/03/2023