React Native Integration
Learn how to integrate the Chatwik live chat widget into your React Native mobile application.
If you have a React Native mobile application, you can integrate the Chatwik live chat widget to talk to your users in real time. This can be done in 3 simple steps using the @chatwik/react-native-widget library.
Installation & Setup
Create a Website Inbox in Chatwik
Before integrating into your mobile application, ensure you have created a website inbox in Chatwik. Refer to the Website Live Chat Setup guide for instructions on creating an inbox and retrieving your websiteToken.
Add the Plugin to Your Project
Install the React Native widget library in your project root:
yarn add @chatwik/react-native-widgetnpm install --save @chatwik/react-native-widgetpnpm add @chatwik/react-native-widgetThis library depends on react-native-webview and @react-native-async-storage/async-storage. Ensure these dependencies are installed in your React Native project.
iOS Installation
If you're using React Native v0.60.0+, run pod install for iOS:
cd ios && pod installImplement the Widget Component
Import ChatWikWidget and render it inside your component tree. Replace websiteToken with your actual website inbox token and baseUrl with your Chatwik installation URL (https://app.chatwik.com).
import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import ChatWikWidget from '@chatwik/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 = 'YOUR_WEBSITE_TOKEN';
const baseUrl = 'https://app.chatwik.com';
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;