Articles on: OneHash Chat | Integration

Integrate OneHash Chat with React Native

React Native


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


1. Create a website inbox in OneHash Chat


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 OneHash Chat Widget 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



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

Updated on: 27/09/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!