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

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:

Create a Website Channel:

Set up a website channel in the Ruut server by following the steps described here.
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: