Make it
your studio’s.
Framework-free web component. No external library, API subscription or database. Serve over HTTP/HTTPS; opening index.html directly as a file will not load its configuration.
1. Preview
From this folder run python -m http.server 8774, then open http://localhost:8774. Alternatively use any static website host. No external messages are sent automatically.
2. Configure
Edit photographer.json: your brand, real email, currency, packages, included/max hours, extra hourly rate, travel zones and add-ons. Set demo=false only after replacing sample prices and terms. All prices are integer minor units: 24000 means US$240.00. Supported currencies all use two decimal places; switching currency does not convert prices.
leadDays sets minimum notice, horizonDays the enquiry window. closedWeekdays uses 0=Sunday through 6=Saturday. blockedDates accepts YYYY-MM-DD strings. Date bounds use the visitor’s local calendar date. These are configured closures, not real-time availability. Update closures yourself and confirm every appointment manually. No booking is created.
depositPercent shows an indicative deposit, not a charge. State taxes, cancellation, image usage rights, travel exclusions and the final payment arrangement in your own terms.
3. Embed
Upload widget.mjs, pricing.mjs, widget.css and photographer.json together in a public folder such as /photo-quote/. Then add:
<script type="module" src="/photo-quote/widget.mjs"></script> <wgt-photo-quote config="/photo-quote/photographer.json"></wgt-photo-quote>
The host must serve .mjs as JavaScript and JSON over HTTP/HTTPS. Test your CMS's custom-HTML restrictions; some strip scripts. No WordPress-specific plugin installer is included. Shadow DOM isolates the widget’s styles. You can place multiple widgets with separate configuration files on a page.
4. Change the appearance
wgt-photo-quote {
--wgt-accent: #994d32;
--wgt-bg: #fffdf7;
--wgt-ink: #302d26;
--wgt-line: #dedbcf;
--wgt-muted: #716e65;
}All source is editable. Check colour contrast when changing the palette.
5. Handover & limits
Clients prepare a message, then copy, download a text file or open an email draft. The visitor must send it themselves. Email draft length limits depend on the email app; for a long brief use copy or the downloaded file. No form backend, email delivery, payment gateway, calendar sync or customer database is included. All prices and rules are public and editable in the browser; always independently confirm quotes before accepting a booking or payment.
Details are held on the current page only; this widget does not deliberately persist customer data. The browser may offer its own autofill or restoration. No analytics or external fonts are included. Configuration files must never contain secrets.
中文快速說明
這是可嵌入網站的攝影報價/檔期詢問小工具,不是自動預約系統。修改 JSON 設定即可改套餐和價格。客人選日期不會佔用檔期;你收到客人自行發出的訊息後,再確認日期和報價。初始價格都是示例,與此插件售價無關。
本機可先用靜態伺服器預覽,也可部署到現有靜態主機。若網站建站工具禁止 script,需先確認能否嵌入,不保證所有 CMS 即插即用。
改配色、加功能或需要整合真實行事曆,可向 @QiDaxiaojie88888 另行詢價。
Version 1.0 · US$79 source purchase · one commercial website licence. See LICENSE.txt. Installation, hosting and customisation are separate.