React / Next.js Integration

npm install @aelio/chat

import { mountAelioChat, unmountAelioChat } from '@aelio/chat';

'use client';

import { useEffect, useRef } from 'react';
import { mountAelioChat, unmountAelioChat } from '@aelio/chat';

export function AelioChatWidget({ user }: { user: { id: string; email: string; chatToken?: string } }) {
  const handleRef = useRef<ReturnType<typeof mountAelioChat>>(null);

  useEffect(() => {
    handleRef.current = mountAelioChat({
      serverUrl: process.env.NEXT_PUBLIC_AELIO_SERVER_URL!,
      customerId: user.id,
      authToken: user.chatToken,
      email: user.email,
      title: 'Chat with us',
      launcherLabel: 'Help',
    });

    return () => {
      if (handleRef.current) unmountAelioChat(handleRef.current);
    };
  }, [user.id, user.email, user.chatToken]);

  return null; // Widget renders as a floating overlay
}

// app/layout.tsx or app/support/page.tsx
import { AelioChatWidget } from '@/components/aelio-chat';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <AelioChatWidget user={currentUser} />
    </>
  );
}

# .env.local
NEXT_PUBLIC_AELIO_SERVER_URL=https://your-aelio-server.com

type AelioChatOptions = {
  serverUrl: string;           // Required — Aelio server HTTP URL
  customerId: string;          // Required — your user ID
  authToken?: string;          // Short-lived session token (production)
  email?: string;              // Customer email
  target?: HTMLElement | string; // Mount target (default: auto-created div)
  title?: string;              // Panel header (default: "Chat with us")
  launcherLabel?: string;      // Button label (default: "Chat")
  initialMessage?: string;     // Empty-state hint
};