Live demo
The four things you asked about, working.
This is a small live site built the same way the real one would be. Plain HTML on Cloudflare Pages, HubSpot for the form, Google Analytics for tracking. Click through the four steps below.
Every agent gets their own link
Open one and the page greets the borrower with the agent's name and assigns their loan officer. The headline, the badge, and the Text and Call buttons all change.
- /start?agent=jane&lo=mikeJane referred, Mike handles it
- /start?agent=marco&lo=sarahMarco referred, Sarah handles it
A wrong link never shows a broken page
A misspelled or missing name falls back to the generic page and the default loan officer. The misspelling is still recorded, so attribution survives a typo.
- /start?agent=nobody&lo=mikeunknown agent
- /start?agent=janeno loan officer given, default used
- /startno link at all
Short links and old addresses redirect
A short link like /jane fits on a business card. Addresses from the previous site forward permanently to the new pages so search rankings carry over. Watch the address bar change.
- /janeshort link for Jane
- /marcoshort link for Marco
- /apply-now.htmlold address, forwards to the new page
- /nonexistenta page that doesn't exist
Every submission and click is attributed
The form carries two hidden fields that record which agent and loan officer the borrower came through. HubSpot stores them on the contact. Every button click and form submission also sends an event to Google Analytics with the same two names, so you can report conversions per agent.
This part is invisible on the page. Here is what HubSpot records for a submission from the first link above.
| Contact | the borrower's name and email |
|---|---|
| agent_slug | jane |
| lo_slug | mike |
How it's built
No framework and no build step. Plain HTML, CSS, and JavaScript. The list of agents and loan officers lives in one small data file, so adding a person is a one-line edit with no code changes. The same patterns carry straight into the full site.