Portfolio Case • Standalone Web Component

Estimate your automation project cost and timeline before booking a call

Calculate an upfront, transparent investment range and realistic delivery timeline based on your project scope, urgency, and number of workflows. Review your estimate and share your requirements when you are ready for a scoped proposal.

The Scoping Bottleneck

Custom B2B workflow integrations often stall before they begin because neither client nor agency knows if budgets align until several discovery meetings are scheduled.

Self-Serve Budget Clarity

An embeddable estimator gives prospective clients instant budget transparency while qualifying inbound inquiries with concrete technical scope parameters before anyone schedules a call.

Interactive Demonstration: Adjust sliders to see live price and schedule projections. Try the proposal form to see how a project estimate becomes an inquiry for the agency. No actual emails or SMS notifications will be dispatched.
Technical Architecture & Integration Details

Web Component Architecture

Encapsulated as a standard Custom Element (<quote-calculator>) with open Shadow DOM. All styling is compiled via Tailwind CSS and inlined into the single distributed script (dist/quote-calculator.js). It has zero external runtime dependencies and does not leak styles to or from the host document.

Intake API Payload Contract

Submissions emit a composed custom event (quote-submit) designed to forward to the AgencyAutomation intake worker endpoint (POST /api/leads):

  • name: string (1–100 chars, trimmed)
  • phone: string (validated international phone number)
  • email: string (RFC-compliant email, lowercased)
  • jobDetails: string (structured project scope notes, max 1000 chars)
  • reviewConsent: false (strict contract default)

Idempotency & State Protection

Each submission produces a deterministic SHA-256 Idempotency-Key (idemp_...) matching identical payloads, preventing duplicate lead creation across network retries.

Multi-Instance Test Fixture

To inspect multiple concurrent calculators with isolated internal states and independent scope configurations, view the Multi-Instance Verification Fixture.