BookingPagePreview

What clients will see, drawn from the setup draft as it fills in: the studio's name as the page's hero, what it is and where, then today's free times as the live page offers them, its services and hours in a 3% ink wash, over the chat's composer. Parts not known yet hold their place. A picture of the page — nothing in it can be pressed, the composer included.

Playground

Atelier Mila

Nail studio@atelier.mila

Obchodná 12, Bratislava

Services

Manicure45 min · €25
Gel nails — new set90 min · €45
Pedicure60 min · €30

Hours

Mon–Fri 9:00–18:00
Sat 10:00–14:00

import { BookingPagePreview } from "@/components/shared/booking-page-preview";

<BookingPagePreview draft={draft} />

BookingPagePreview

Draft

Locale

Frame

Filling in as setup goes

Give it the same draft the cards edit, and it follows every saved change. On desktop it fills the rest of the screen beside the conversation, full height (frame="fill"); on a phone it opens as a card from a Preview button.

import { BookingPagePreview } from "@/components/shared/booking-page-preview";

<StudioCard studio={draft} onChange={saveDraft} />
<BookingPagePreview draft={draft} />

API reference

Prop	Type	Default	Description
draft	SetupDraft	—	The draft to draw; any part may be missing.
locale	string	"en"	For prices and day names.
labels	Partial<BookingPagePreviewLabels>	English	The placeholders, the crafts, the section names, and the composer's placeholder and send name.
frame	"card" \| "fill"	"card"	A card on the atmosphere, or a pane filled the way the landing shows its demo: on white, the gradient ball rising from its foot, the page a frosted chat card over it that scrolls inside when it runs long.
className	string	—	Layout only, on the frame.

Guidelines

Show the page as it will be, not more. If the real page doesn't show something, the preview doesn't promise it.
Placeholders say what will appear (“Your services will appear here”), never sample data that could pass for the owner's.