A client asks how much their website will cost. Your answer depends on the number of pages, who writes the text, and how quickly they need it. An interactive quote lets them explore those choices and see the total change before you agree on the scope.
In this guide, we'll build a quote for Juniper Café, a fictional coffee shop, from Studio Fern, an imaginary freelance design studio. You can ask ChatGPT or Claude to generate the HTML, publish it with Pagelet, and add a password before sharing it with your client.
Try the café website quote
Choose a few extras or add pages. The estimate and service summary update together. Open the demo in a new tab to use Print / Save as PDF.
You can also save the demo as an HTML file from your browser to use as a starting point. It contains its own styling and JavaScript, with no external libraries.
1. Define your services and prices
Start with the decisions your client needs to make. Keep the base package clear and make each optional service easy to understand.
These are sample prices, not suggested market rates. Use your own costs and define how tax applies. Our demo displays a total before any applicable tax and excludes domain registration, paid services and ongoing maintenance.
Include a few conditions too: when delivery starts, how many revisions are included, and how long the quote remains valid. The example uses a two-week timeline after content is supplied and a 14-day validity period from the date the designer sends it.
2. Ask AI to build your interactive quote
Paste this prompt into ChatGPT or Claude. Replace the names, services and conditions before using the result for a real client.
Create an interactive website quote in a single, self-contained HTML file.
Include all CSS and JavaScript inline. Use no external libraries or services.
Designer: Studio Fern. Client: Juniper Café, a fictional coffee shop.
Use a warm cream background, dark readable text, muted green accents,
rounded cards and an elegant serif heading. Make it work on mobile.
Write all copy in English.
Base package: one-page responsive website for €600, including an
introduction, opening hours, location, contact links and two revision rounds.
Options:
- Additional pages: integer quantity from 0 to 10, €150 each.
- Copywriting for the base page: €200 checkbox.
- Styled online menu section, without ordering: €120 checkbox.
- Priority delivery: €180 checkbox.
Update the total and itemized scope summary immediately on every change.
Show prices in EUR. State that these are illustrative prices before any
applicable tax. Exclude domain registration, paid services and maintenance.
Normal delivery is two weeks after content is supplied; priority is one week.
The quote is valid for 14 days from the date the designer sends it.
Add Reset options and Print / Save as PDF buttons, plus readable print styles.
Use visible input labels, keyboard-accessible controls and an accessible
live region for the updated total. Validate and clamp page quantities.
This is a planning estimate, subject to final scope and price confirmation.
Do not add an acceptance, payment or submission button. Do not send or
store selections. Clearly explain that printing does not submit the quote.
Return the complete HTML file.
If you already use Pagelet with Claude, you can follow our Claude MCP publishing guide to publish from the chat. The manual file upload below works with HTML generated by either AI app.
3. Check the calculations and the mobile layout
Save the generated code as index.html and open it in your browser. Test the quote before uploading it. AI-generated code can contain calculation mistakes or buttons that look finished but do nothing.
For this example, check these combinations:
- No extras: €600.
- Two additional pages and copywriting: €1,100.
- Two additional pages and all three extras: €1,400.
- Ten additional pages and all extras: €2,600.
- Reset options: back to €600, with no extras selected.
Try an empty, negative or fractional page quantity too. It should resolve to a whole number between zero and ten. Check that the itemized summary agrees with the total.
Narrow the browser window and use the keyboard to reach each control. Then print a preview: the chosen services, total and conditions should be readable, without unnecessary buttons.
If the page needs work, ask the AI for a specific change:
Make the service labels easier to read on a phone. Keep all prices and calculations unchanged. Return the complete updated HTML.
4. Publish the HTML with Pagelet
Go to Pagelet, sign in so you can manage the site from your dashboard, and upload your index.html file. Pagelet gives the published page its own address on pagelet.host.
Open that address and repeat a calculation check. Keep a local copy of the HTML so you can revise the services and prices later. For the basic upload flow, see Getting started with HTML hosting.
For a client-specific quote, enable password protection before sharing the link. The initial upload is public until you add the password, so use placeholder details first if you need to avoid exposing client information during setup.
5. Protect your quote with a password
In your Pagelet dashboard, find the quote and open More actions → Password protection. Enter a password with at least eight characters, then select Save password. This feature is available on Free and Pro accounts for sites you own.
When your client opens the link, their browser asks for a username and password. They can enter any username, followed by the password you shared. They don't need a Pagelet account.
The protection covers the whole site, including its files and connected custom domains. Protected sites are removed from Pagelet's public showcase. You can change the password or remove protection from the same dashboard menu.
Anyone with the password can access the quote. Protection cannot revoke copies already downloaded or cached while the page was public. Our café demo stays public because it uses fictional details.
See How to password protect your Pagelet website for the full walkthrough.
6. Share the quote with your client
Send the link and explain what the client can do with it. For example:
Hi! Here's the website quote for Juniper Café: [your quote link]. You can choose extra pages and services to see how they affect the estimate. In the browser prompt, enter any username and the password I've shared. Please open Print / Save as PDF to keep your preferred package, then send me the PDF so we can confirm the scope and final price.
Each visitor starts with the base package. Their selections are held only in the current page and disappear when it reloads. You won't receive them automatically; the client needs to send you the saved PDF or describe their choices.
If you later want to collect responses, connect and test a form service or another backend. An HTML page alone doesn't provide submission storage, payments or a record of acceptance.
7. Adapt the quote to your work
The same approach works for a photographer choosing shoot hours and edited images, a consultant offering workshop sessions, or a marketing freelancer quoting a set of deliverables.
Change the service model first, then ask the AI to update both the controls and the calculation. Check every new combination against your own price list before sending the page to a client.