Integration Ruut React Native Widget
Overview
The Ruut React Native Widget allows you to integrate a Ruut chat widget into your React Native application. This
documentation will guide you through the installation, usage, and customization of the widget.
Installation
You can install the Ruut React Native Widget library using either yarn or npm:
yarn add @ruut/react-native-client
or
npm install --save @ruut/react-native-client
Dependencies
This library requires react-native-webview and async-storage. Please refer to their respective documentation for
installation instructions.
iOS Installation
For React Native versions > 60.0, follow these steps to complete the installation:
cd ios && pod install
Usage
To use the Ruut Widget, follow these steps:
1. Create a Website Channel:
Set up a website channel in the Ruut server by following the steps described here.
2. Replace websiteToken Prop:
Use the token obtained from the above step to replace the placeholder in the example code below.
Example Code
import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import RuutWidget from '@ruut/react-native-client';
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'; // Replace with your actual website token
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 &&
<RuutWidget
websiteToken={websiteToken}
locale={locale}
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;
Props
Here is a list of props you can use with the RuutWidget component:
- websiteToken
- Type: String
- Default: -
- Description: Website channel token.
- colorScheme
- Type: String
- Default: light
- Description: Widget color scheme. Options are light, dark, or auto.
- locale
- Type: String
- Default: en
- Description: Locale setting for the widget.
- isModalVisible
- Type: Boolean
- Default: false
- Description: Determines if the widget is visible or not.
- closeModal
- Type: Function
- Default: -
- Description: Function to handle the widget close event.
- user
- Type: Object
- Default: {}
- Description: User information such as email, username, and avatar URL.
- customAttributes
- Type: Object
- Default: {}
- Description: Additional information about the customer.
https://www.npmjs.com/package/@ruut/react-native-client
For detailed support, contact our support team.
