# 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](https://app.ruut.chat/hc/ruut-help-desk/articles/1722550328-setting-up-the-website-workspace-on-ruut).

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: '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'; // 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.