Skip to content

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

AttributeRequiredDefaultWhat it does
data-customer-endpointYesBase URL of your customer Function App. The widget sends chat traffic to {endpoint}/api/chat/stream.
data-titleNoChat with usHeader text + accessible label of the chat panel.
data-colorNo#0078d4Accent 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:

  1. List every embedding origin in ALLOWED_ORIGINS at deploy time — comma-separated, scheme + host, no paths. Format details in Allowed origins.
  2. 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.
  3. Vary data-title / data-color per 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.