Shipping a Framer template + 3 booking widgets in a weekend — launch-day postmortem

Most clinic websites cost $2k+ and convert like a Canva kit. I got tired of looking at them, so I built the opposite — a Framer template plus three drop-in booking widgets built specifically for aesthetic / derm clinics, shipped as a single ZIP. This is the honest launch-day postmortem.

The product

Noir Clinic Conversion Pack — a 10-section Framer template (dark-luxe, Fraunces + Inter) plus three booking widgets shipped as both vanilla JS and Framer TSX:

• Pricing Estimator — real-time price calc, service + area + tier, because "contact us for pricing" is a conversion killer.
• Before/After Slider — touch-draggable comparison, replaces static portfolio grids.
• Sticky WhatsApp Booking Bar — region-aware, falls back to phone on desktop.

All three widgets are plain-text config. No node_modules, no build step for the JS versions. The Framer bundle is the main event; the vanilla widgets work anywhere you can paste three files.

Stack

• Site: static HTML + vanilla CSS on Netlify (noir-style.netlify.app). No React on the landing page — I wanted < 100kb total and FCP under 800ms.
• Checkout: Payhip (5% fee, clean product page, supports coupons). Core $59, Pro $169.
• Widgets: two versions each — vanilla JS (~4kb) and Framer TSX with property controls.
• SEO infra: sitemap.xml, robots.txt, canonical tags, og:image, twitter:card, Product JSON-LD (Core + Pro variants), meta description, GA4 snippet. All verified 200 before launch.

What went right

SEO v2 before traffic. I treated the site like it had to survive indexing before I touched any social channel. Submitted sitemap to Google Search Console, archived homepage + sitemap + robots in the Wayback Machine as a trust signal, verified every secondary page (privacy, terms, refund, thank-you, demo) returned 200. All eight gates green before the first tweet.

Plain-text config over admin UIs. Every configurable thing in the product is a const config = { ... } block with inline comments. No dashboard. No database. No login. Customers can install the whole pack without ever opening Framer if they don't want to. First install time in testing: 12 minutes.

Self-serve pricing that doesn't hide the number. The #1 friction I've seen on clinic sites is "contact us for a quote." The estimator widget quotes instantly. This is a conversion decision, not a design decision.

What I'd do differently

Gumroad mirror should have been day 0, not day 2. Payhip-only launch means I'm dependent on one checkout path. Mirroring to Gumroad at a slightly higher list price ($79 vs $59 direct) protects the direct channel and gives discovery through Gumroad's organic search — should've been ready before the first tweet.

One distribution channel at a time. I had five channels queued (X, Reddit, IndieHackers, Instagram, Dev.to). I posted X first, then immediately started thinking about the next channel instead of watching what the first post actually produced. You learn more from 24h of data on one channel than from scatter-posting five variants simultaneously.

The first tweet needed a thread, not a single tweet. A product link without a thread of substance gets treated as an ad by the algorithm. A thread with actual content ("here's what I learned about clinic-site conversion," then the product) performs 3-5x better. Lesson for next launch.

The numbers I'm watching

• Sessions → order conversion rate (target: ≥ 2% to validate price)
• Pro vs Core mix (tells me whether agencies or solo clinics bought)
• Refund rate (target: < 5%; anything higher means the page overpromised)
• Traffic source attribution via UTMs on every link

Decision rule at 10 sales: if ≥ 5 came in the first 7 days, scale (Gumroad, marketplaces, Estate Pack). If 3-4, iterate on page variants. If 0-2, diagnose — sessions low means fix traffic, sessions high means fix the page.

If you're shipping a niche SaaS-style template

1. Pick a vertical where the current websites are objectively bad (aesthetic clinics, dental, boutique fitness — massive opportunity).
2. Ship the SEO/indexing surfaces before the social push. Once Google starts crawling, you want every meta tag and structured-data block correct.
3. Write the product description like someone's about to buy it in 30 seconds — above-the-fold specificity, not adjectives.
4. Config-driven > dashboard-driven for small creators. You do not want to maintain an admin panel for a $59 product.

Live demo + buy page: noir-style.netlify.app

Happy to answer anything in the comments — especially on the widget architecture, the Framer TSX property-controls setup, or the SEO pre-launch checklist.