Widget embed
import { Aside } from “@astrojs/starlight/components”;
Add this single line to your website’s footer (replace {customer-fa-host} with your Function App hostname, visible in the dashboard footer):
<script src="https://{customer-fa-host}/api/widget.js" data-customer-endpoint="https://{customer-fa-host}" async></script>A small chat bubble appears in the bottom-right corner. Click it; the widget opens.
Script tag attributes
| Attribute | Required | Default | What it does |
|---|---|---|---|
data-customer-endpoint | Yes | — | Base URL of your customer Function App. The widget sends chat traffic to {endpoint}/api/chat/stream. |
data-title | No | Chat with us | Header text + accessible label of the chat panel. |
data-color | No | #0078d4 | Accent color for the launcher bubble, header, and send button. Must be a plain CSS color literal (#hex, rgb(), rgba(), or hsl()); anything else falls back to the default. |
Example with all attributes:
<script src="https://{customer-fa-host}/api/widget.js" data-customer-endpoint="https://{customer-fa-host}" data-title="Acme support" data-color="#107C10" async></script>Allowed origins
The chat endpoints only accept browser calls from origins listed in your stack’s ALLOWED_ORIGINS setting (set during the wizard; default * = any origin). See Allowed origins for the format and the current procedure for changing the list after install.
Multiple domains
Embedding on several sites (say www.acme.com, support.acme.com, and docs.acme.com) works today:
- List every embedding origin in
ALLOWED_ORIGINSat deploy time — comma-separated, scheme + host, no paths. Format details in Allowed origins. - Paste the same script tag on each site. The widget bundle itself (
/api/widget.js) is served to any origin; only the chat endpoints are gated by the allowlist. - Vary
data-title/data-colorper page if you want per-site branding. These are the only per-site customization knobs in the current release.
All domains share one assistant configuration — the same system prompt, the same session store, the same Teams queue. There is no per-domain widget identity in the current release.
Telling chats apart
You can still see which domain a chat came from: each new session records the embedding page’s origin, stamped once at session creation — but only when the browser’s Origin header exactly matches a non-wildcard ALLOWED_ORIGINS entry. Under the * default nothing is recorded (an unverifiable value is worth less than none). The origin shows up read-only in the dashboard’s Top-sessions table and conversation search, on GET /api/sessions rows, in transcripts, and in the Teams agent session list; older sessions show —. It is display metadata only, never used for authentication or routing.
Full details — including the per-widget registry in the full PointOfContactAI runtime — in Multi-domain widgets.