Install the library using either yarn or npm like so:
yarn add @chatwoot/react-native-widget
OR
npm install --save @chatwoot/react-native-widget
This library depends on react-native-webview and async-storage. Please follow the instructions provided in the docs.
If you're using React Native versions > 60.0, it's relatively straightforward.
cd ios && pod install
websiteToken
prop and baseUrl
import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import ChatWootWidget from '@chatwoot/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 = 'CHATWOOT_INSTALLATION_URL';
const locale = 'en';
const colorScheme='dark'
return (
<SafeAreaView style={styles.container}>
<View>
<TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}>
<Text style={styles.buttonText}>Open widget</Text>
</TouchableOpacity>
</View>
{
showWidget&&
<ChatWootWidget
websiteToken={websiteToken}
locale={locale}
baseUrl={baseUrl}
closeModal={() => toggleWidget(false)}
isModalVisible={showWidget}
user={user}
customAttributes={customAttributes}
colorScheme={colorScheme}
/>
}
</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;
You're done!
The whole example is in the /example
folder.
Name | Default | Type | Description |
---|---|---|---|
baseUrl | - | String | Chatwoot installation URL |
websiteToken | - | String | Website channel token |
colorScheme | light | String | Widget color scheme (light/dark/auto) |
locale | en | String | Locale |
isModalVisible | false | Boolean | Widget is visible or not |
closeModal | - | Function | Close event |
user | {} | Object | User information about the user like email, username and avatar_url |
customAttributes | {} | Object | Additional information about the customer |
Feel free to send us feedback on Twitter or file an issue.
If there's anything you'd like to chat about, please feel free to join our Discord chat!
Chatwoot © 2017-2023, Chatwoot Inc - Released under the MIT License.