Chat Widget
Widget Installation
Install @aelio/chat and serve the widget bundle.
npm install
npm install @aelio/chatCurrent version: ^0.1.3
Serve the widget bundle
The widget is distributed as a prebuilt widget.js file. You can serve it from:
- The Aelio server — automatically served at
/widget.js - Your own server — copy from the build output
Build from source
In the Aelio monorepo:
pnpm --filter @aelio/chat buildOutput: chat/dist/widget.js (also copied to server/public/widget.js)
Serve from your backend
From the Shopping Testbed demo:
const WIDGET_FILE = process.env.AELIO_WIDGET_FILE || '../Aelio-Convox/server/public/widget.js';
// Serve at /vendor/aelio-chat/widget.js
app.get('/vendor/aelio-chat/widget.js', (req, res) => {
res.sendFile(WIDGET_FILE);
});Origin allowlist
The server checks the page origin against channels.web.allowed_origins in config.yaml. Add your app's origin:
channels:
web:
enabled: true
allowed_origins:
- "http://127.0.0.1:4173"
- "http://localhost:3000"
- "https://your-app.com"For local dev, you can use "*" to allow all origins.
Origins are matched exactly —
localhostand127.0.0.1are distinct.
WebSocket proxy (optional)
If your widget connects to your app server (not directly to Aelio), proxy WebSocket connections:
import { WebSocketServer } from 'ws';
const wss = new WebSocketServer({ noServer: true });
server.on('upgrade', (request, socket, head) => {
if (new URL(request.url, 'http://localhost').pathname !== '/widget/ws') return;
wss.handleUpgrade(request, socket, head, (client) => {
const upstream = new WebSocket(AELIO_RUNTIME_URL + '/widget/ws');
// Relay messages between client and upstream
});
});The widget connects to serverUrl/widget/ws — if serverUrl is your app, proxy to the Aelio runtime.