Chat Widget
Script Tag Embed
Embed the chat widget with a single script tag — no build step required.
Basic embed
<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>The widget auto-mounts on load and creates a floating chat bubble in the bottom-right corner.
All data attributes
| Attribute | Required | Default | Description |
|---|---|---|---|
data-server-url | Yes | — | Aelio server HTTP URL |
data-customer-id | Yes | — | Your SaaS user ID |
data-email | No | — | Customer email (used for channel address) |
data-auth-token | No* | — | Short-lived session token (production) |
data-title | No | "Chat with us" | Panel header title |
data-launcher-label | No | "Chat" | Floating button label |
data-initial-message | No | hint text | Shown when no messages yet |
data-auto-mount | No | true | Set "false" to skip auto-mount |
*Required in production when identity.allow_anonymous: false.
Programmatic mount
Set data-auto-mount="false" and mount programmatically:
<script src="/vendor/aelio-chat/widget.js" data-auto-mount="false"></script>
<script>
const script = document.createElement('script');
script.src = '/vendor/aelio-chat/widget.js';
script.dataset.customerId = 'user_abc123';
script.dataset.email = 'user@example.com';
script.dataset.serverUrl = 'http://127.0.0.1:4173';
document.body.appendChild(script);
</script>Or use the global API:
const handle = window.AelioChat.mount({
serverUrl: 'https://your-aelio-server.com',
customerId: 'user_abc123',
email: 'user@example.com',
});
// Later: window.AelioChat.unmount(handle);Demo project pattern
The Aelio Shopping Testbed (/chat page) uses this pattern:
- Load widget script with
data-auto-mount="false" - Fetch chat config from your backend API
- Create a new script tag with customer identity
- Widget auto-mounts with the identity fields
async function mountWidget({ customerId, email, serverUrl }) {
const script = document.createElement('script');
script.src = '/vendor/aelio-chat/widget.js';
script.dataset.customerId = customerId;
script.dataset.email = email;
script.dataset.serverUrl = serverUrl;
document.body.appendChild(script);
}Your backend exposes a config endpoint (no secrets):
// GET /api/aelio/chat-config
{
"serverUrl": "http://127.0.0.1:4173",
"defaultCustomerId": "demo-shopper",
"defaultEmail": "user@example.com"
}