Installation
Install Chat Widget
Install and embed the @aelio/chat browser widget.
The chat widget runs in your frontend and connects customers to the Aelio server.
npm install
npm install @aelio/chatCurrent version: 0.1.3.
Option 1: npm import (React, Next.js, Vite)
import { mountAelioChat } from '@aelio/chat';
mountAelioChat({
serverUrl: 'https://your-aelio-server.com',
customerId: currentUser.id,
authToken: currentUser.chatToken,
email: currentUser.email,
});Option 2: Script tag (any website)
<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>No build step required. The server serves widget.js at /widget.js.
Serve widget from your backend
If you don't want customers hitting the Aelio server directly for the JS bundle:
// Express example
app.get('/widget.js', (req, res) => {
res.sendFile(path.join(__dirname, 'node_modules/@aelio/chat/dist/widget.js'));
});Origin allowlist
Add your app's origin to the server config:
channels:
web:
enabled: true
allowed_origins:
- "http://localhost:3000"
- "https://your-app.com"
localhostand127.0.0.1are distinct origins. Add both for local dev.
Frontend environment variable
# Safe to expose in frontend
NEXT_PUBLIC_AELIO_SERVER_URL=https://your-aelio-server.com
VITE_AELIO_SERVER_URL=https://your-aelio-server.comOnly expose the server HTTP URL. Never expose
AELIO_SDK_SECRET.