Private / Incognito mode detected — auto-save is disabled. Your progress will NOT be saved if you close this page. Switch to a normal browser window to enable auto-save.
Fill out the 15-step wizard. The generator produces a complete, branded, ready-to-deploy portal ZIP — 38 files, every token swapped, full setup documentation included. Drag it onto Netlify and you're live.
Cloudflare R2NetlifyNo Coding Required~2 Hours to Deploy
What the portal actually does.
This is the same portal system powering real boudoir studios — a password-protected, mobile-optimized client experience that handles everything from gallery delivery to the ordering appointment to the cinematic in-studio reveal.
🖼 Private Gallery Delivery
Password-protected gallery from your Cloudflare R2 storage. Clients heart favorites, export lists, view fullscreen. Auto-expires after your set number of days.
✦ Ordering Appointment
Full ordering flow — collection selection, upgrade path, payment plan calculator, album cover chooser. Orders fire a webhook to GHL on submission.
🎬 Cinematic Reveal Studio
Full-screen slideshow for in-studio reveals on your TV. Background music, smooth transitions, AirPlay support. Clients see their images here before ordering.
📋 Session Prep & Arrival
Prep guide with outfit tips, HMU instructions, what to bring, and a session day timeline. Arrival page with parking, directions, and a "lost or nervous" reassurance block.
👗 Client Closet
Browsable inventory filterable by size. Clients heart their favorites before their session. You add your own pieces after deploying.
🔔 Push Notifications
Web push to notify clients when their gallery is ready. You get a push on your phone when a client submits their order.
📊 Photographer Dashboard
Password-protected studio side — view all active clients, order status, gallery timelines, and order details. Includes the reveal studio control panel.
📄 Paperwork & Questionnaire
Model release, style questionnaire, body love workbook, undertone quiz, post-session survey — all in one place before and after their session.
What you need before starting.
Cloudflare — cloudflare.com — free account. Client gallery images live here (R2 Storage) and the portal backend code runs here (Workers). The wizard includes step-by-step Cloudflare setup docs in your ZIP.
Netlify — netlify.com — free account. This is where your portal HTML files get hosted. Deploying is drag and drop.
Everything else — your studio name, colors, pricing, session details, arrival instructions, portfolio images — you fill in during the wizard. Your answers save automatically as you go so you can come back and finish later.
Time estimate: Generator wizard ~30 min. Cloudflare setup ~30 min. Netlify deploy ~5 min. Image replacement ~45 min. Most photographers have their portal live in a single afternoon.
✦
✦ The Generator — 15 Steps ✦
Fill it out. Download your portal.
Your answers save automatically. You can stop and come back — as long as you're in the same browser and not in private/incognito mode.
✦ Step 1 of 15 — Studio Identity
Who You Are.
Your studio name, photographer name, and contact info. Appears in headings, footers, emails, PDFs, and nav bars throughout every page.
Studio Name
Exactly as it should appear everywhere — nav, footers, legal docs, order PDFs.
Photographer
Your first name is used throughout client-facing copy — "Message [name]," "Text [name]," "A letter from [name]." Your full name appears on contracts and order PDFs.
Contact Info
Logo
A publicly accessible URL — GHL Media Library, Cloudflare R2, or Filesafe. This is the main logo used in the portal nav, gallery header, reveal studio, emails, and all PDFs.
✦ How to get your logo URL
GHL → Media Library → upload your logo → click it → copy the URL. PNG with transparent background recommended, minimum 400px wide.
✦ Step 2 of 15 — Studio Address
Where You Are.
Physical address and tax rate. Appears in portal footers, order PDFs, arrival directions, and the after-session guide.
Mailing Address
GPS / Navigation Address
What clients type into Google Maps. May differ from mailing if you are in a building or suite.
Sales Tax
✦ Step 3 of 15 — Brand Colors
Your Colors.
Three colors running through every border, button, accent, and background across all 39 portal files.
Primary / Gold Color
Borders, highlights, nav logo, dividers, price text. Replaces #C9A96E and #C9A24D — 99 occurrences total.
Main dark background. The portal is built for dark mode. Replaces #080605 — 30 occurrences.
Keep it very dark. Anything lighter than #1a1510 breaks text contrast, borders, and overlay effects throughout the portal.
✦ Step 4 of 15 — Social Media
Your Social Handles.
These appear in the images-ready email template and select portal footer sections.
Handles
Username only — no @ symbol, no full URL. Leave blank if you don't use that platform.
✦ Step 5 of 15 — Session Experience
How Your Session Works.
Timing, structure, what's included. Feeds the prep guide, basics page, dashboard, and questionnaire.
Session Timing
Hair & Makeup
Hair & makeup is included with every session
Image Delivery
Reveal & Ordering
Studio
Refreshments
I offer drinks / refreshments during the session
Client Closet
I have a client closet available to borrow fromIf you do not have a client closet, toggle this off and the closet page will show a "coming soon" state instead of your inventory.
✦ Step 6 of 15 — Arrival & Parking
Getting There.
Everything on the Arrival page — parking, directions, what to bring, and the "I'm lost" reassurance message.
Parking Instructions
Directions
Step-by-step from nearby cities or highways.
What To Bring
The checklist shown on the prep and arrival pages.
If They Get Lost or Anxious
Use [phone] and it will be auto-replaced with your studio phone number.
✦ Step 7 of 15 — Session Day Timeline
The Flow of the Day.
The walkthrough shown on the prep and arrival pages. Pre-filled with the defaults — edit to match your session exactly.
Timeline Steps
Each step has a label (the heading) and a description (the copy clients read).
✦ Step 8 of 15 — Collections & Pricing
What They Buy.
The packages shown during the ordering appointment. Pre-filled with defaults — edit to match your pricing.
Digital Collections
Product Collections
✦ Step 9 of 15 — Add-Ons & Extras
The Upgrades.
Optional upgrades offered during the ordering appointment after a client chooses their base collection.
Acrylic USB Drive
I offer a custom Acrylic USB for digital files
Metal Print Add-On
I offer standalone metal print upgrades
Album Add-On
I offer a standalone album upgrade for digital orders
✦ Step 10 of 15 — Payment Settings
How They Pay.
Deposit percentage, payment plan structure, and your direct payment handles for the after-session guide.
Payment Plan
Payment Handles
Appear in the after-session guide. Enter just the handle — no $ or @ prefix.
✦ Step 11 of 15 — Hair & Makeup Artist
Your HMU Artist.
Her name and tip payment handles appear in session prep, the arrival page, and the after-session guide so clients know how to tip her.
HMU Artist
I work with a dedicated hair & makeup artistToggle off if clients handle their own HMU before arriving.
Tip Payment Handles
✦ Step 12 of 15 — Gallery & Reveal
After the Session.
Gallery delivery, the reveal experience, the TV welcome screen, and the music that plays during the reveal.
Gallery Delivery
TV Welcome Screen
The message that fades in on the TV screen while the client is getting settled before the reveal begins.
Keep it under 60 characters — it needs to be readable at TV distance. Default was "Deanna will be with you in a few minutes for your paperwork."
Reveal Studio
I have a cinematic in-studio reveal experienceThe full-screen slideshow mode with music and transitions.
I have a TV / AirPlay setup for the reveal
Background Music
The audio file that plays during the TV welcome screen slideshow. Must be a publicly accessible MP3 URL — upload to GHL Media Library or Cloudflare R2.
GHL → Media Library → upload an .mp3 → click it → copy the URL. The original portal uses a soft ambient background track. Replace with your preferred music or leave blank to remove music from the welcome screen.
✦ Step 13 of 15 — Portfolio Images
Your Work.
The portal uses your portfolio images in 4 places — the TV welcome slideshow, the gallery and ordering page backgrounds, the collection showcase page, and the hero image used across reveal and ordering pages. All currently show the original studio's images.
TV Welcome Slideshow — 15 Images
The photos that cycle on the TV screen while a client gets settled before their reveal. Replace all 15 with your best portfolio shots — horizontal orientation works best.
✦ Image requirements
Landscape/horizontal orientation preferred. Upload to GHL Media Library or Cloudflare R2 and paste the public URL. All 15 slots should be filled for a smooth slideshow.
Hero / Background Image
A single hero image used as a background on the gallery page, ordering page, and reveal page. Should be a strong, evocative portrait — dark or moody works best against the dark portal backgrounds.
Collection Showcase — 3 Images
Three portrait images shown on the Collection page — the "what your photos could look like" preview shown alongside collection pricing. Currently pulling from a third-party hosting URL that will break for any new studio.
Image 1
Image 2
Image 3
Prep Page Section Headers — 6 Images
Section header images used in the prep guide tabs — Clothing, Hair & Makeup, What To Bring, Session Day, After Your Session. These are currently in the original studio's GHL account and will show as broken images until you replace them.
Arrival Page Studio Photo
One photo shown on the arrival page — typically your studio exterior or entrance so clients recognize where they are going.
⚠ Client Closet — 101 Images
Every piece in the client closet needs its own photo. These cannot be collected in this wizard — there are 101 items. The generator will strip out the original inventory images and leave you a clean empty closet template. After deploying, upload your own photos and add them through a simple find-and-replace in the closet.html file — or use the Closet Manager (coming soon to the Vault).
The generator removes the original 101 closet photos and replaces them with a "closet coming soon" state. You add your own inventory after deploying. Your ZIP includes a step-by-step closet setup guide.
Print Lab
The ordering page includes album cover swatch photos from Miller's Lab. If you use a different lab, these need to be replaced.
I use Miller's Lab for album printingIf yes, the album cover swatches stay as-is. If no, you'll replace them after deploying with your own lab's swatch images.
Good — the 47 Miller's Lab album swatch images in the ordering page stay in place.
You will need to replace 47 album swatch images in ordering.html after deploying. Your ZIP includes a guide listing every image that needs replacing and where to find your lab's swatch photos.
✦ Step 14 of 15 — Infrastructure
The Plumbing.
Cloudflare R2 storage, Worker URL, push notification keys, and GHL connection. If you haven't set up Cloudflare yet, leave these blank and fill them in after deploying.
Cloudflare R2 Storage
Cloudflare Worker
VAPID Keys — Push Notifications
✦ Generate VAPID keys
Go to web-push-codelab.glitch.me → Generate. Public key goes in your portal HTML. Private key is an encrypted Worker secret only.
GoHighLevel
The GHL Location ID appears 260 times throughout the portal. Getting this right matters more than any other single field — it controls every gallery image URL, media path, and webhook endpoint.
Portal Domain
The full URL your portal will be deployed to. Used in CORS headers and push notification service worker.
✦ Step 15 of 15 — Generate
Ready to Build.
Every token being replaced across all 39 portal files. Review the table then generate your complete, deployable ZIP.
Building review...
Token Replacement Summary
Category
Original
Replaced With
Count
Portfolio Images Being Swapped
Loading...
⚠ What Requires Manual Completion After Deploying
The generator handles everything it can automatically. These items need your attention after the portal is live.