Chat Widget Demo

This page demonstrates embedding the remote chat widget served by your Next.js application. The widget script performs a trusted-domain check based on the referer header. Ensure this page's host is listed in trusted-domains.json on the server.

Setup Notes:
  1. Run your Next.js project: pnpm dev
  2. Confirm trusted-domains.json includes localhost (already provided).
  3. Open this file in a separate static server or just from disk. If opened from file:// the referer may be missing and the widget could be disabled.
  4. If hosting this snippet on another domain, add that domain (without protocol) to the trusted domains file.

Configuration

Set window.__CHAT_WIDGET_ORIGIN BEFORE the embed script tag if the API lives on a different origin.

Styling

The widget injects minimal scoped CSS. Override with stronger selectors or use :root { --chat-widget-accent: #9333ea; }.

Security

The server validates the referer/origin host against the trusted domains list before serving an active widget.

API Contract

POST /api/chat with JSON { message: string } returns { reply: string }. Adjust logic server-side as needed.