How do you build a UTM link builder?

We built the free UTM Link Builder in a single Claude chat, then uploaded it to Toolcrow and had it live a few minutes later. No servers, no build tools, no deploy pipeline. This post is the whole story, including the exact prompt, so you can build your own the same way.

We build our free tools in the open. When we ship one, we also show you how it was made. This is the first post in that series.

What we set out to build

The job was small and specific: turn a plain web address into a trackable campaign link. You paste a URL, fill in your source, medium and campaign, and the tool builds the tagged link live as you type. One click copies it.

The harder requirement was what it should not do. No ads, no account wall, no cookie banner, and nothing sent to a server. Every character had to be handled in your browser. That constraint shaped the whole build.

We built it in one Claude chat

There was no special setup here. We opened a normal conversation with Claude and described the tool in plain English, the same way you would brief a developer. Claude wrote it as a single self-contained HTML file with the CSS and JavaScript inline, and we refined it in the chat until it behaved exactly right.

The clearer the brief, the less back-and-forth afterwards. Here is the prompt we used. We cleaned up the wording slightly for readability, but the substance is exactly what we asked for. Copy it and adapt it for your own tool:

Build a single-file UTM link builder as one self-contained HTML file with
inline CSS and JavaScript. No external scripts, no fonts, no network calls,
no build step.

Inputs: a website URL (required), and five UTM fields: source, medium and
campaign (required), term and content (optional). Show a short hint under each
field explaining what it maps to.

Behaviour:
- Build the final URL live as the user types, and show it in a read-only output box.
- Keep any query parameters and anchor that are already on the pasted URL.
- If the URL has no protocol, assume https://.
- A "Force lowercase" checkbox, on by default, that lowercases every UTM value
  (UTM tags are case-sensitive).
- A Copy button that copies the finished link, with a "Copied!" confirmation.
- A Clear button.
- If a required tag is missing, show a gentle note telling the user which one to
  add, without blocking the rest.

Constraints: everything runs client-side, nothing is stored or sent anywhere.
Clean, calm design, mobile friendly, one column on small screens.

The decisions behind the prompt

A prompt is really a list of decisions. A few of ours made the difference between a tool that demos well and one that behaves on real links:

• Keep existing parameters. Real campaign URLs often already carry a parameter or an anchor. The builder adds the UTM tags and leaves everything else intact, so it never quietly breaks a link.
• Lowercase by default. In analytics, Email and email are two different channels. Defaulting to lowercase stops people splitting one channel into two.
• Guide, do not block. If a required tag is missing, the tool still shows the link and just notes what to add. Nagging popups are the fastest way to ruin a simple tool.
• No server, on purpose. One file, no network calls. There is nothing to log because there is nowhere for the data to go, so you can trust it with links for unreleased products.

Putting it live on Toolcrow

Once the file worked in the chat, going live was almost boring, which is the point. We copied the HTML, pasted it into a new Toolcrow drop, and Toolcrow detected the code type and published it to its own live URL straight away. We set it to open so anyone can use it, added the explainer and FAQ you see on the tool page, and that was it.

No server to rent, no deploy step, and no expiry date on the link. It stays up until we turn it off.

Try it, then build your own

Start with the UTM Link Builder. If it saves you time, the bigger takeaway is that the tool itself is no longer the hard part. A clear prompt in a Claude chat gets you the code, and Toolcrow gets you the live link.

If you have already built something in a Claude chat, here is how to share a Claude artifact as a live link of your own.