type: deliverable

name: Talking Widget v3 — Production-ready demo + embed

project: ReceptionistAI

status: built

description: Complete overhaul of the ReceptionistAI talking widget demo and embed system. Three deliverables built: demo-v3.html (premium demo page), embed-snippet.html (snippet generator for clients), deploy.sh (Netlify deploy automation).


type: feature

description: ?business=BunkerFNQ param personalises hero headline, sub-copy, widget title, and business banner. ?trade=plumber pre-selects trade dropdown in both forms. Implemented via URLSearchParams in vanilla JS on DOMContentLoaded.


description: Post-call lead capture form appears after Telnyx widget fires call-ended event. Listens for: telnyx-call-ended, telnyx-session-ended, call-hangup, call-ended, session-ended — both on document and on widget element directly. 800ms delay for UX smoothness. Form submits to n8n webhook with source=demo-v3-post-call.


description: Interactive ROI calculator with 4 range sliders: calls/week (5-200), miss rate (5-80%), job value ($100-$5000), conversion rate (10-90%). Computes: missed leads/month, lost revenue, recovered revenue (90% capture rate), net ROI (recovered minus $197 starter plan cost). Updates live on input.


description: Self-contained HTML page that generates customised Telnyx AI Agent embed snippets. Configurables: business-name, assistant-id, primary-color, position (bottom-right/bottom-left/inline), greeting. Generates copy-paste snippet + direct demo URL with params. No server required.


description: Netlify CLI deploy automation. Modes: --prod (live to widget.sunaivadigital.com), --preview (draft URL), --status. Auto-generates netlify.toml with: CORS headers (microphone permission), security headers, cache rules, redirects (/ -> demo-v3.html, /embed -> embed-snippet.html).


widget.js does not exist

description: Embed code points to https://widget.sunaiva.ai/v1/widget.js which returns nothing. Customers cannot install anything. Fix: use Telnyx managed web component via CDN instead of custom widget.js.

No customer authentication

description: Zero auth layer. No Supabase Auth, no Clerk, no NextAuth. Customers cannot log in, manage their assistants, or view call logs.

No Stripe checkout

description: No payment system. Plans shown in demo have no purchase path. No subscription management.

No Telnyx webhook receiver

description: Telnyx fires webhooks for call events (start, end, transfer, DTMF). No endpoint exists to receive these. No call logging, no usage metering, no lead enrichment from call data.

No production deployment

description: widget.sunaivadigital.com domain exists but no files deployed. deploy.sh now exists to fix this.


learning: demo-v3.html already existed at 1,239 lines with substantial work done. Following Rule 16 (CHECK-EXISTING FIRST) saved rebuilding from scratch. Identified specific gaps and added only missing features: URL params, animated background, glassmorphism, post-call form, ROI calculator, correct assistant-id attribute.

axiom: Always check if the file exists before building. 70% of the time there is prior work. Add to it, don't replace it.


learning: demo-v2.html used deprecated agent-id attribute. Correct attribute is assistant-id. This is a breaking difference — wrong attribute = widget loads but connects to wrong assistant or fails silently.

axiom: Always check Telnyx docs for current attribute names. As of 2026-02 the correct attribute is assistant-id not agent-id.