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:

<!-- 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
    }
    
    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:

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).

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

npm install <package-name>

Replace <package-name> with:

• cuoral-react-native

• or cuoral-react-native-expo

---

Step 2: Usage

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

const App = () => {
  const currentUser = { 
    email: "[email protected]", 
    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:

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.