Chat Widget

The Chat SDK (@aelio/chat) is an embeddable browser chat widget that connects to your Aelio server. It handles WebSocket connection, auto-reconnect, connection status UI, chat history hydration, and write-action confirmations.

This is separate from @aelio/sdk, which belongs in your backend.

Two ways to embed

Method	Best for
npm import	React, Next.js, Vite apps
Script tag	Any website, zero build step

Quick embed (script tag)

<script
  src="https://your-aelio-server.com/widget.js"
  data-server-url="https://your-aelio-server.com"
  data-customer-id="user_abc123"
  data-email="user@example.com"
></script>

Quick embed (npm)

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

mountAelioChat({
  serverUrl: 'https://your-aelio-server.com',
  customerId: currentUser.id,
  authToken: currentUser.aelioChatToken,
  email: currentUser.email,
});

Connection status

The widget surfaces its connection state in the panel:

Connecting / Reconnecting — establishing WebSocket, auto-reconnects on drop
Connected — ready to send messages
Connection failed — shows reason and a Retry button

Chat history

On connect, the widget receives prior messages from the server (in the ready frame's history field) and renders them automatically.

Security

Never put AELIO_SDK_SECRET in frontend code. The widget uses a separate short-lived session token issued by your backend via the magic link flow.