FormHandler Widget Demo

This page demonstrates the embeddable inquiry widget running against your local development environment.

Connecting to local PocketBase…

How It Works

The floating chat bubble in the bottom-right corner is the FormHandler widget. Click it to start an interactive inquiry conversation. Your responses are submitted to the local PocketBase backend and can be viewed in the dashboard.

Conversational UI Questions appear one at a time in a chat-like interface.
Shadow DOM Widget styles are fully isolated from the host page.
Mobile Ready Full-screen on mobile, floating window on desktop.
Lightweight ~9 KB gzipped. No external dependencies on the host page.

Embed Code

To embed this widget on any page, add the following snippet before </body>:

<script>
  window.FormHandler = {
    widgetId: "YOUR_WIDGET_ID",
    apiBase:  "http://127.0.0.1:8090"
  };
</script>
<script src="widget.js"></script>

View in Dashboard

After submitting an inquiry through the widget, log into the dashboard with the demo account below to see it.

Open Dashboard View Widget Inquiries

Test Scenarios

Try these interactions to test the widget end-to-end:

  1. Click the blue bubble → greeting message appears
  2. Answer each question (text input & single-select)
  3. Submit the inquiry → success confirmation
  4. Check the dashboard at localhost:3000/dashboard → new inquiry appears
  5. Close and reopen the widget → state resets
Prerequisites: PocketBase must be running at 127.0.0.1:8090 and the Next.js frontend at localhost:3000. Start them with ./pocketbase serve and npm run dev respectively.