This is the same code that ships inside the Noir Clinic Conversion Pack. Resize your window, try keyboard controls, scroll down.
Pick a treatment and a tier. The price updates in real time, formatted to the currency you configure in a single JS object. Removes price anxiety before the booking form.
Try it: click any treatment chip, then switch tiers.
Transparent starting prices. Final quote after your in-clinic assessment.
Inclusive of initial consultation. Personalized pricing confirmed after assessment.
Book your consultation →Drag to compare. Pointer + keyboard support. Meets ARIA slider standards. Shows real outcomes without needing a full portfolio build.
Try it: drag the handle, or click the slider and use ← / →.
'/%3E%3Crect width='800' height='600' fill='url(%23b2)'/%3E%3Ctext x='40' y='560' font-family='Georgia,serif' font-size='28' font-style='italic' fill='%23B7B7C2' opacity='0.6'%3EDemo · before%3C/text%3E%3C/svg%3E)
'/%3E%3Crect width='800' height='600' fill='url(%23a2)'/%3E%3Ctext x='40' y='560' font-family='Georgia,serif' font-size='28' font-style='italic' fill='%23E8DCC8' opacity='0.7'%3EDemo · after%3C/text%3E%3C/svg%3E)
Demo imagery is intentionally abstract. Live clinic sites use only consented patient photos.
Scroll-gated, unobtrusive, always-reachable. Docks to the bottom on mobile after the hero scrolls past. Opens a pre-filled WhatsApp message to your clinic number.
Try it: keep scrolling — the bar appears at the bottom.
Everything you just used — plus copy, sections, page outlines, setup video script, and Framer React components — ships as a single ZIP.
Get Noir Clinic Pack — $59Extra scroll space so you can confirm the sticky bar shows up on scroll and hides when you're at the top. It disappears again if you scroll all the way back to the hero.
Every widget is independently configurable through a plain JS CONFIG object or a Framer Property Control — no code edits required.