# 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`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cuoral.com/integration/widget-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.