Integrate Hoory with React Native App
If you have a react native app, you can add Hoory live chat widget to it and talk to your visitors in real time.
Hoory lets you chat with your visitors and provide exceptional support in real time. To use Hoory in your react native app, follow the steps described below.
1. Create a Website Channel in Hooryβ
As a first step, you will need a website channel configured in your Hoory account. To learn how to do this step-by-step, refer to theΒ Website Channel
Β document.
2. Add the Plugin to Your Projectβ
Add one of the following plugins to your project:
yarn add @hoory/react-native-widget
or
npm install --save @hoory/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. Use It Like Thisβ
Replace websiteToken
and baseUrl
with appropriate values.
import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import HooryWidget from '@hoory/react-native-widget';
const App = () => {
const [showWidget, toggleWidget] = useState(false);
const user = {
identifier: '[email protected]',
name: 'John Samuel',
avatar_url: '',
email: '[email protected]',
identifier_hash: '',
};
const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' };
const websiteToken = 'WEBSITE_TOKEN';
const baseUrl = 'HOORY_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&&
<HooryWidget
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;
Hooray! You're done.
Propsβ
Name | Default | Type | Description |
---|---|---|---|
baseUrl | - | String | Hoory Installation URL |
websiteToken | - | String | Website Channel Token |
locale | en | String | Locale to be used in the widget. Hoory support 25+ language. |
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 |