Overview
This play produces a private editor form and a customer-facing view page — no backend required. The rep fills in account details, hits submit, and gets a shareable link. The customer opens that link, enters a password, and sees a polished read-only page showing only what was filled in.
Three pieces:
- 1.The editor — private form the rep fills out to produce a link.
- 2.The view page — what the customer opens; password-gated, then shows the account layout.
- 3.The display layout — reusable component shared by the view page and a demo page.
How it works: account data is encoded directly into the URL. The password is never stored — only a one-way hash of it travels in the link, and the view page uses that hash to verify entries.
> Security note: This is soft protection for convenient sharing, not hardened security. Anyone with the full link could attempt offline cracking. Use for low-sensitivity information only. Always send the link and password through separate channels.
Before You Start
- •A Flint site you can add pages to.
- •A field list — the information you want to collect per account. Sketch this first; it drives every prompt below.
- •Your branding: logo URL and company name.
Field types available: short text, long notes, tag pickers (preset options + custom), repeatable rows (contacts, links, identifiers), logo (URL or upload), password.
Suggested groupings: Account & contract / Products & usage / People / Value & proof / Documents / Access. Only company name is required; everything else is optional and hidden when blank.
Prompt 1 — Create or Adapt the Hub Template
Check whether a customer hub page template already exists in the project. If one does, review it and adapt it to the target shape below — don't rebuild from scratch; keep the existing brand, styling, and reusable components. If no template exists, create one from scratch using the existing brand.
Target shape:
- Header: company logo + headline "Everything about your [Company] relationship."
- Short intro block: a mostly-static explainer of what your company does and its main products.
- Five content sections, in order, each able to render or hide based on whether it has data:
1. Your contract
2. Your products and usage
3. Your people and [Company] contacts
4. Value and proof
5. Your documents
- Accepts its data as a single account object (not a backend fetch).
Output as a reusable component that takes an account object as input. Data, password gate, and hide-when-blank logic come in later steps.Prompt 2 — The Editor Form
Replace the field list below with your own fields. All fields are optional except company name and password.
Build the responsive account form using the existing brand and components. Hold values in form state. Repeatable fields use add/remove rows. Single column on mobile, multi-column on wider screens.
Account & contract:
- Company name (text); Company logo (image upload as data URL OR paste a URL)
- Status: Customer | Prospect (toggle)
- Subscription cost (text/number with currency hint)
- Contract term (text); Renewal date (date picker)
- Champion (name + role + optional email); Economic buyer (name + role)
Products & usage:
- Products used (multi-select + custom): [your product list here]
- Use cases (textarea)
- Orgs/instances + how to request access (repeatable: identifier + access instructions)
- Usage level (textarea)
- Managing quota, usage & spend (textarea)
- Integrations in place (multi-select/tags + custom)
People:
- Who at the company uses the product (repeatable: names/teams)
- [Company] account team contacts (repeatable: name + role + email)
- [Company] exec sponsors (repeatable: name + role)
Value & proof:
- How [Company] helped / KPIs (textarea)
- POC doc link; Exec summary link; "Questions asked and answered before buying" link (URLs)
Documents (repeatable label + URL lists):
- Contracts & MSAs; Invoices & POs; Partner agreements & financials; TPRAs; Trust center
Page access:
- Password field with a "Generate" button.
- Note: checked in-browser only — soft protection, not strong security.Prompt 3 — Submit to Shareable Link
Replace https://your-site.com/view with your actual deployed URL before using this prompt.
Wire up form submission.
On submit:
1. Hash the password (SHA-256) and store it as passwordHash.
2. Save the account to localStorage so the rep can find and edit it later.
3. Encode the full account (including passwordHash) as base64 and build the shareable link as an absolute URL: https://your-site.com/view#<payload>. Do not use local/relative links — they won't work once the site is deployed.
4. Show a confirmation screen: shareable link (read-only + Copy), password (Copy + reminder to send it separately), "Preview page" button, and a note that this is browser-only soft protection.
Only company name and password are required; everything else is optional.Prompt 4 — The Customer Landing Page
Build the customer-facing landing page at /view using the adapted hub template from Prompt 1.
1. Decode the account from the URL hash. If missing or invalid, show a friendly "this link isn't valid" message.
2. Password gate: company logo + password prompt. Verify against the decoded hash. Wrong password reveals nothing.
3. Once unlocked, pass the decoded account into the hub template.
Section mapping:
1. Your contract — status, cost, term, renewal date, champion, economic buyer.
2. Your products and usage — products, use cases, orgs/instances + access instructions, usage level, quota/spend management, integrations.
3. Your people and contacts — who uses the product, account team, exec sponsors.
4. Value and proof — KPIs, POC doc, exec summary, "questions asked and answered" links.
5. Your documents — grouped link lists: contracts & MSAs, invoices & POs, partner agreements, TPRAs, trust center.
Rules: hide entire sections when all fields are empty; hide individual blank fields/rows; external links open in a new tab; fully responsive.Prompt 5 — Role Filter (Optional)
Add a sticky role filter to the top of the unlocked landing page.
- Roles: All · Engineering · Finance · Legal/Security · Leadership.
- Selecting a role smooth-scrolls to and briefly highlights the most relevant sections:
- Engineering → Your products and usage; Your people and contacts
- Finance → Your contract; Your documents
- Legal/Security → Your documents
- Leadership → Value and proof; Your contract
- All shows everything. Skip any role whose target sections are all hidden.
- Responsive and on-brand.Make It Yours
- •Swap branding — replace the logo, company name, colors, and page title in the display layout and editor.
- •Change the field list — re-run Prompts 1 and 2 with an updated description; the agent rebuilds the template and form to match.
- •Adjust the role filter — add or remove roles and update the section mappings in Prompt 5.
- •Reconsider sensitivity — soft password protection suits account summaries and renewal dates, not financial data, credentials, or PII beyond basic contact details.
Troubleshooting
Link is very long — An uploaded logo is embedded as a base64 string. Use a hosted image URL instead.
Password won't unlock — Passwords are exact and case-sensitive. Regenerate and re-share if unsure.
"Link isn't valid" — The link was truncated on copy. Copy the full URL from the confirmation screen.
A section is missing — Expected behavior: that section had no content. Go back to the editor, fill in the missing fields, and regenerate the link.
Unlock not remembered after closing the tab — Session memory is tab-scoped by design. Reopening the link requires the password again.
