Quote Configurator
FRAMER COMPONENT
PRODUCT CONFIGURATOR · LITE
Pick the options. See the price. Ask for a quote.
A configurator for Framer sites: swatches, chips or thumbnails in up to four groups, a picture that changes with every choice, a live price with tax, a link that reopens the same choices and a quote request sent to your webhook or inbox.
Corva Pendant
Spun steel shade on a fabric cord, made to order in three weeks.
Estimate. We confirm the final price by email.
Matte powder coat, warm white inside.
Brushed solid brass canopy, socket and rim.
For a bedside or a small table.
- Base price
- $290
- Shade · Chalk
- —
- Finish · Brass
- +$45
- Size · Ø 30 cm
- —
- Cord · Black fabric
- —
- Total
- $335
Corva Pendant is a made-up product. Eleven small SVG layers draw all 36 looks; with the three sizes that makes 108 configurations. Try the arrow keys on the swatches, then copy the link and open it in a new tab.
TWO PICTURE MODES
Stack transparent layers, or swap whole pictures.
LAYERS — THE DEMO ABOVE
One transparent image per option
Every option can carry a transparent PNG or SVG. The base image sits at the bottom and the chosen layers stack on top in group order, cross-fading as they change. Draw each part once and every combination exists: four shades, three finishes and three cords make 36 lamps from eleven files.
REPLACE — THE ONE ON THE RIGHT
One complete picture per option
For photographed products: the chosen option’s picture takes the place of the main one. Pick which group drives it; the other groups only change the price. This copy uses thumbnails, euros in Italian number format, 22% VAT included and the quote form always open.
Corva Pendant
Pick a colour: the whole picture changes.
PROPERTIES
Everything is set in the properties panel.
No code to touch. Drop the component on a page, fill in the groups and connect where requests should go.
01
Product and picture
Name, tagline, base price and base image. Replace or Layers, ratio and fit. Until you add images, a sample lamp is drawn in the colours you choose.
02
Option groups
Up to four groups, each with a title and a style: Swatch, Chip or Image. Up to twelve options per group, each with a label, colour, image, price difference and short note.
03
Price and tax
Any currency and number format, 0–2 decimals. Tax included in the prices or added on top, with its own name, rate and line, plus a note under the price.
04
Summary and link
A line for every choice with its price. The choices live in the page address, so the copy button gives a link that reopens the same configuration.
05
Quote request
Name, email and message inside the component. Sent as JSON to your webhook, or opened as a pre-filled email when no webhook is set. A hidden field stops simple bots.
06
Style and access
Fonts, colours, radii, spacing; side or stacked layout that wraps by itself on small screens. Each group is a radio group with arrow keys, visible focus and a live price.
FOR DEVELOPERS
What your webhook receives
A POST with the request as JSON, sent as text/plain so the browser makes a simple request with no CORS preflight. Pick “Check reply” if your endpoint answers with CORS headers, or “Send only” if it doesn’t. Nothing secret lives in the browser.
No webhook? Set an email address and the button opens the visitor’s email app with the configuration, the total and their message already written.
{ "product": "Corva Pendant", "basePrice": 290, "options": [ { "group": "Shade", "option": "Terracotta", "priceDelta": 20 }, { "group": "Finish", "option": "Brass", "priceDelta": 45 }, { "group": "Size", "option": "Ø 40 cm", "priceDelta": 60 }, { "group": "Cord", "option": "Rust fabric", "priceDelta": 10 } ], "total": 425, "currency": "USD", "vat": { "mode": "none", "rate": 0, "amount": 0, "net": 425 }, "contact": { "name": "…", "email": "…", "message": "…" }, "page": "https://…/?config=…", "createdAt": "2026-11-03T12:00:00.000Z"}
Need a custom 3D or AR configurator? Litchi Solutions builds them.
Corva Pendant is a fictional product and every drawing on this page is original. The demo sends nothing anywhere: its quote button opens an email to example.com.