# Dental clinic website with real online booking

Larchmere Dental — a family clinic site with a four-step booking flow, live open/closed status, an insurance share estimator and calendar export, in about 11.7 KB of gzipped code.

> healthcare · 2026-09-29T15:04:57.660Z

Project overview

Larchmere Dental is a fictional family and cosmetic clinic we built as a showcase for healthcare practices. The brief we set ourselves: answer the three questions patients actually call about — are you open, what will it cost, and can I get in this week — without a phone call. The site does all three on one calm, readable page.

[Open the live Larchmere Dental demo](/demos/maple-dental/index.html)

Client context

  - Industry: Healthcare / dental

  - Client size / environment: Single-location clinic — showcase build, fictional brand

  - Primary stakeholders: Front desk, dentists, patients booking from a phone

Challenge

Clinic sites tend to be either generic templates or heavy booking plug-ins that load slowly and look nothing like the practice. We wanted a site that feels like a real neighbourhood clinic, works one-handed on a phone, and still has a proper booking flow with validation — with no third-party scripts.

Scope delivered

  - Four-step booking: visit type, day and time, patient details with validation, confirmation with a downloadable calendar (.ics) file

  - Live “open now / opens at” badge computed from the clinic hours, with today highlighted in the hours table

  - Insurance share estimator — pick a treatment and coverage percentage, see the patient portion

  - Filterable services grid (family, cosmetic, urgent), first-visit steps, team and FAQ accordion

  - Transparent fee table, accessibility details and an inline SVG map (no map API, no tracking)

  - Self-hosted fonts and a strict Content-Security-Policy-compatible build

Before / after

  - Before: A typical clinic template: a phone number, a stock hero and a “request appointment” form that goes to an inbox.

  - After: Patients see whether the clinic is open, what a visit costs, their likely share after insurance, and book a real time slot — then add it to their calendar. About 11.7 KB of gzipped HTML, CSS and JavaScript.

Mobile — 390px layout and the open navigation menu
Desktop — live open status, clear call to action and the arched hero photo

Visual proof placeholders

  - 13 automated browser checks — booking steps, validation, slot selection, calendar export, filters, estimator, mobile menu

  - No horizontal overflow at 390px; zero JavaScript errors on desktop and mobile

  - Runs under the same strict Content Security Policy as this website

Delivery timeline

  - Phase 1: Content structure, typography and photography around real patient questions

  - Phase 2: Booking flow, hours logic, estimator and filters

  - Phase 3: Mobile pass, accessibility, automated QA and screenshots

Outcome

A clinic website that removes the most common phone calls and gives patients a booking experience that feels built for the practice. The booking step is ready to connect to a practice-management system or a simple secure API.

Technology stack

HTML5, CSS Grid/Flexbox, vanilla JavaScript, self-hosted variable fonts, WebP images, Playwright automated browser QA.

Visual evidence

Booking — visit type, then day and time, then details and confirmation
Fees — plain table plus an insurance share estimator
Services — filter by family, cosmetic or urgent care
First visit — five clear steps with the front desk photo
FAQ — the questions nervous patients actually ask
Visit — SVG map, address and hours with today highlighted

---
Source page: https://amensecurity.ca/en/projects/dental-clinic-website-online-booking
Markdown version for AI agents · Amen Security
Email: info@amensecurity.ca
Phone: +1 (204) 514-3536