# Widget Setup

Connect **Cuoral** to your website or mobile app. Choose your platform below:

* Web (HTML/JS)
* Flutter
* React Native
* Ionic (Capacitor)

***

## Web Integration (HTML / JavaScript)

This single script tag connects the Cuoral widget to your website.

We recommend placing this snippet on every page where the widget should appear, **right before the closing `</body>` tag**.

### 🔑 Your Public Key

```
<your public key>
```

***

### Integration Code

Place this code just before the closing `</body>` tag:

```javascript
<!-- Place it just before the closing </body> tag. -->
<script>
  (() => {
    // Create the script element
    const s = document.createElement('script');
    
    // Set the source URL and defer loading
    s.src = 'https://js.cuoral.com/inline.js'; 
    s.defer = true;
    
    s.dataset.cuoralKey = "<your public key>";

    // Pass User Details (for personalized support)
    try {
      const tm = JSON.parse(localStorage.getItem("user") || "{}");
      
      if (tm.email) {
        s.dataset.email = tm.email;
        s.dataset.first_name = tm.first_name || "";
        s.dataset.last_name = tm.last_name || "";
      }
    } catch (e) { 
      // Handle parsing error silently
    }
    
    
    // Add custom positioning (optional - adjust values as needed):
    // s.dataset.marginBottom = "20";  // in px (or use s.dataset.margin_bottom)
    // s.dataset.marginRight = "20";   // in px (or use s.dataset.margin_right)
    // s.dataset.marginLeft = "";      // in px (or use s.dataset.margin_left)
    // s.dataset.marginTop = "";       // in px (or use s.dataset.margin_top)
    
    document.head.appendChild(s);
  })();
</script>
```

#### Optional: Passing User Details

To personalize support conversations, pass the currently logged-in user’s information. Replace the `localStorage` logic with however your app retrieves authenticated user data.

***

Need help with integration? Contact our support team.

***

## Flutter App Integration

Use the official `cuoral_flutter` package to embed the chat widget directly into your Flutter application.

### Step 1: Add Dependency

Open your `pubspec.yaml` file and add:

```yaml
dependencies:
  flutter:
    sdk: flutter
  cuoral_flutter: ^0.0.3 # Check pub.dev for the latest version
```

***

### Step 2: Initialize CuoralLauncher

Import the library and place the `CuoralLauncher` widget where you want the floating button to appear (typically inside a `Stack` or `Scaffold`).

```dart
import 'package:cuoral_flutter/cuoral_flutter.dart';
import 'package:flutter/material.dart';

CuoralLauncher(
  publicKey: '<your public key>', // REQUIRED
  
  // Optional Configuration
  backgroundColor: Colors.indigoAccent,
  icon: Icon(Icons.chat_bubble, color: Colors.white),
  isVisible: true,
  position: Alignment.bottomRight,
);
```

For more details, visit pub.dev and search for `cuoral_flutter`.

***

Need help with integration? Contact our support team.

***

## React Native & Expo Integration

We support:

* **Standard React Native (CLI)** → `cuoral-react-native`
* **Expo Projects** → `cuoral-react-native-expo`

***

### Step 1: Install Package

```javascript
npm install <package-name>
```

Replace `<package-name>` with:

* `cuoral-react-native`
* or `cuoral-react-native-expo`

***

### Step 2: Usage

```javascript
import CuoralWidget from 'cuoral-react-native';
import { View } from 'react-native';

const App = () => {
  const currentUser = { 
    email: "user@example.com", 
    firstName: "Alex" 
  }; 

  return (
    <View style={{ flex: 1 }}>
      <CuoralWidget
        publicKey="<your public key>"
        user={{ 
          email: currentUser.email,
          firstName: currentUser.firstName,
        }} 
      />
    </View>
  );
};

export default App;
```

***

Need help with integration? Contact our support team.

***

## Ionic & Capacitor Integration

Easily add Cuoral support to your Ionic application using our npm package.

***

### Step 1: Install the Package

```
npm install cuoral-ionic
```

If using Capacitor:

```
npx cap sync
```

***

### Step 2: Initialize Cuoral

In your `app.component.ts`:

```javascript
import { Cuoral } from 'cuoral-ionic';

private cuoral: Cuoral;

constructor() {
  this.cuoral = new Cuoral({
    publicKey: '<your public key>',
    showFloatingButton: true,
    useModal: true
  });
}

async ngOnInit() {
  await this.cuoral.initialize();
}

ngOnDestroy() {
  this.cuoral.destroy();
}
```

For more details, visit npm and search for `cuoral-ionic`.