Back to home

Playground

Test the real widget locally

This page loads the same `/widget.js` bundle you embed on external sites. Change the mode, accent color, and URL context, then send messages against the local `/api/chat` endpoint.

Controls

Reload the same production widget bundle with a different embed configuration.

Mode

Theme

Clears the widget's saved local state before the preview reloads.

Inline previewhttps://donux.com/services/framer

Demo page

Framer design and build for SaaS teams

Use this area like a real client page. In inline mode the widget mounts in the panel below. In floating mode the bubble appears over the page in the configured corner.

Embedded widget zone

The local widget script mounts here when inline mode is enabled.

inline

Embed snippet

<script
  src="${window.location.origin}/widget.js"
  data-api-url="${window.location.origin}"
  data-inline="true"
  data-container="#donux-chat"
  data-page-url="https://donux.com/services/framer"
  data-accent="#18181b"
  data-bg="#ffffff"
  data-text="#27272a"
  data-muted="#71717a"
  data-border="#e4e4e7"
  data-assistant-bg="#f4f4f5"
  data-radius="12px"
></script>
All data-* attributes are optional — omit any to use the :host defaults from styles.css.

Suggested checks

  • Send a first message and confirm the SSE response streams back.
  • Try an email address and verify the conversation keeps state.
  • Switch between inline and floating to test both embed modes.
  • Toggle fresh session on if you want to clear persisted widget state.