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.

1

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.

2

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.

3

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.

4

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.

Contactthe borrower's name and email
agent_slugjane
lo_slugmike

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.