How to install live chat on a React Native app
If you have a React Native app, you can add a VowChat live chat widget and talk to your app users in real time. This can
be done in 2 simple steps using VowChat's React Native widget.
Step 1. Create a website channel in VowChat
Please refer to this guide for detailed instructions on setting up a website channel in VowChat.
Step 2. Add the React Native widget to your project
Add @vowchat/react-native-widget to your React Native project.
yarn add @vowchat/react-native-widget
Step 3. Implement the widget in your app
import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import ChatwootWidget from '@vowchat/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 = 'https://app.vowchat.ai';
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 && (
<ChatwootWidget
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;
You can get your Website token and base URL from your Channel settings in your VowChat account.
