Free link in bio HTML template: copy, edit, and publish

Q: Can I use a photo instead of my initials?

Yes. Replace the line SR with an tag whose src is the photo's full https:// address, as item 2 of What to change shows. A photo saved only on your own computer won't show online. On Convika's Free plan, images from other sites load.

Q: Can I add a YouTube or Spotify player?

Yes. Paste the player's embed code, the with an https:// address, where you want it, for example under the big button. On Convika's Free plan, https: embeds such as YouTube, Spotify, and SoundCloud players run.

Search for a free link in bio template and most of what comes up lives inside a site builder: Canva, Webflow, Framer, Webstudio. You edit it in their editor, and it stays there. This one is a plain HTML file. You own it, you can open it in any text editor, and any host that serves files can put it online.

It's a single page for the link in your Instagram, TikTok, or X bio: your name, a line about you, one big button for the link you most want opened, and a list of the rest. The styles sit inside the file, so there's nothing to build, and it loads no fonts, scripts, or trackers from other sites.

Would you rather describe the page in words than edit code? The link-in-bio template has Convika's AI make a page of your links under headings, with the one you most want opened as a large button.

The template

Copy the whole block. Paste it into a text editor and save it as index.html, or paste it straight into the box above.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sam Rivera | Links</title>
<meta name="description" content="Sam Rivera's links: comics, the zine shop, the newsletter, and social media.">
<style>
/* Colors: change these to restyle the whole page */
:root {
  --bg: #ffffff;
  --surface: #f5f6f8;
  --ink: #15171c;
  --muted: #5a606b;
  --line: #e3e5e9;
  --accent: #1f5fd1;
  --accent-ink: #ffffff;
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 560px; margin: 0 auto; padding: 48px 20px; }
.top { text-align: center; }
.mark { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 24px; font-weight: 700; }
h1 { margin: 0; font-size: 24px; line-height: 1.3; }
.role { margin: 4px 0 0; color: var(--muted); }
.bio { margin: 12px 0 0; text-wrap: balance; }
.featured { display: block; margin-top: 32px; padding: 16px 20px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); text-align: center; text-decoration: none; }
.featured strong { display: block; font-size: 17px; }
.featured span { display: block; font-size: 14px; }
h2 { margin: 40px 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
li a { display: block; min-height: 56px; padding: 8px 32px 8px 4px; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; }
li a::after { content: "\2197"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); }
li a:hover { background: var(--surface); }
li strong { display: block; }
li span { display: block; font-size: 14px; color: var(--muted); }
/* "Say hello": a contact form goes here on Convika. Until a form fills it, the section stays hidden */
.contact:has([data-convika-form]:empty) { display: none; }
footer { margin-top: 48px; text-align: center; }
button { min-height: 48px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: var(--surface); }
.status { min-height: 24px; margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.small { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
</style>
</head>
<body>
<main class="wrap">
  <header class="top">
    <div class="mark" aria-hidden="true">SR</div>
    <h1>Sam Rivera</h1>
    <p class="role">Comics and zines</p>
    <p class="bio">I draw short comics about city birds. A new strip every Friday.</p>
  </header>

  <a class="featured" href="https://example.com/shop">
    <strong>Zine shop</strong>
    <span>Issue 4 is out now</span>
  </a>

  <section aria-labelledby="links">
    <h2 id="links">Links</h2>
    <ul>
      <li><a href="https://example.com/comics"><strong>Read the comics</strong><span>Every strip so far</span></a></li>
      <li><a href="https://example.com/newsletter"><strong>Newsletter</strong><span>One email a month, with the new strips</span></a></li>
      <li><a href="https://www.instagram.com/yourname"><strong>Instagram</strong><span>Sketches and works in progress</span></a></li>
      <li><a href="https://www.tiktok.com/@yourname"><strong>TikTok</strong><span>Drawing timelapses</span></a></li>
      <li><a href="mailto:you@example.com"><strong>Email me</strong><span>For commissions and collabs</span></a></li>
    </ul>
  </section>

  <section class="contact" aria-labelledby="hello">
    <h2 id="hello">Say hello</h2>
    <div data-convika-form></div>
  </section>

  <footer>
    <button type="button" id="copy">Copy this page's link</button>
    <p class="status" id="status" role="status"></p>
    <p class="small">&copy; 2026 Sam Rivera</p>
  </footer>
</main>
<script>
document.getElementById("copy").addEventListener("click", function () {
  var status = document.getElementById("status");
  var url = location.href.split("#")[0];
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(url).then(
      function () { status.textContent = "Link copied"; },
      function () { status.textContent = "Copy the address from your browser instead"; }
    );
  } else {
    status.textContent = "Copy the address from your browser instead";
  }
});
</script>
</body>
</html>

On a phone, it shows the name and the big button on the first screen, with the list below. On a computer, it stays one column, 560 pixels wide, in the middle of the screen. The copy button at the bottom is the only script.

What to change

The <title> and the description at the top: your name. The title shows on the browser tab and in search results.
The two letters in the circle: your initials. To show a photo instead, replace the whole <div class="mark" …>SR</div> line with <img src="https://…" alt="" width="72" height="72" style="border-radius:50%;object-fit:cover;display:block;margin:0 auto 16px">, using the address of a photo that's already online.
The name, the line under it, and the bio. Keep the bio to 1 or 2 sentences.
The big button: the one link you most want opened this month, such as a shop, a new video, or a booking page. Change its href and its two lines.
Each row of the list: its href, its name, and the short line under the name. To drop a link, delete its <li>…</li> line. To add one, copy a line and change it.
The colors: the 7 color lines under :root. --accent is the big button's color, and --accent-ink the text on it. Keep that text easy to read against the button.
The "Say hello" section: leave it for a contact form on Convika (see Add a contact form). On any other host it stays hidden, so it's safe to keep.
The © line at the bottom: your name.

Save the file and open it in your browser to check it. Images need full https:// addresses or have to go inside the file: a photo on your own computer, such as me.jpg, won't show once the page is online, unless you drop the template's folder, or a zip of it, into the upload box, which puts the photo inside the file.

Where to publish it free, compared

Any static host can serve the file. These four take it with no Git and no build step. Facts from each host's own docs and pricing pages, read on November 6, 2026.

	Account	What you upload	Address	Your own domain
Netlify Drop	Not to drop it. The link has a temporary password until you claim it with an account	A folder or a zip file	Ends in `netlify.app`	The Free plan lists "Add Custom domains with SSL"
Cloudflare Pages (direct upload)	Yes: you upload in the Cloudflare dashboard	A zip file or a folder, up to 1,000 files and 25 MiB a file	`<project>.pages.dev`	Yes. A bare domain such as `example.com` must be a zone on your Cloudflare account
GitHub Pages	Yes, with a repository, which must be public on GitHub Free	Files through Add file > Upload files, up to 25 MiB a file	`<user>.github.io`	Yes, `www` or the bare domain
Convika Free	Not for a preview link. A free account to publish	One HTML file up to 2 MB, or pasted code	`<name>.convika.page`	1 on Free. The page opens at `www`, and the bare domain sends visitors there

All four serve the template. The difference is what comes with the page. Convika counts taps on each link, fills the template's form spot with a form that stores entries, and needs no folder: the one file, or its code pasted into a box.

Publish the template on Convika in 5 steps

No account or credit card is needed for the preview. The Free plan includes 1 published page and 10,000 page views a month.

1. Paste the code into the box

In the box at the top of this page, switch to Paste code and paste the template with your changes. Or use Upload a file and drop your index.html. Click Get my preview link. The preview link works for 3 minutes, with scripts and forms turned off, so the copy button does nothing yet.

2. Keep the page

Click Keep this page — free, no card and sign up. The page moves into your account exactly as you pasted it, and its script now runs. From now on, a changed file goes under Update from an HTML file on the page's screen. Uploading the file again as a new page, through this box or Upload an HTML file in the dashboard, gives it a second address.

3. Add the contact form (optional)

On the page's screen, click Add a form to my page, pick the fields, and click Add form to my page. The form fills the template's "Say hello" spot. Details are in Add a contact form below.

4. Publish it free

On the page's screen, click Publish page. Under Who can open this page?, choose Public and click Next. The first time, click Publish free: the page goes live at once, with the Convika bar at the foot. Under that button, Publish without the Convika bar opens an order for Pro monthly (1 day free with a card, then $12 a month).

5. Name the address, then put it in your bio

In a new account, a page kept from the box gets an address of page- and 8 random letters and numbers, before .convika.page. Change it before you paste it anywhere: open Settings, and under This site's URL, click Change the URL. Type a name of 3 to 63 lowercase letters, numbers, and hyphens under New URL, click Change URL, then Switch URL. Anyone who opens the old address lands on the same page at the new one. Copy the new address and paste it into your bio.

Using your own domain? Connect it first (see Use your own domain), and put that address in your bio instead.

See which links people tap

A published Convika page records each tap on a link or a button, with the words on it. On the page's screen, click Open analytics. The Top buttons card lists each link by its words, here a row's name and the line under it, with how many times it was tapped. On the Free plan, you can look back 90 days.

That's why every row in the template has its own words. Two rows that both say "Click here" would show up as one.

Convika doesn't show who tapped. Your own taps count too, so expect a few extra from your tests. More on the numbers: what Convika's visitor stats show.

Add a contact form

The template has an empty spot for a form, <div data-convika-form></div>, inside the "Say hello" section. A rule in the styles hides the whole section while that spot is empty. On another host, visitors never see an empty heading.

On Convika, click Add a form to my page on the page's screen. Pick Email only, Name and email, or Name, email, and message, change the button text and the message people see after sending if you like, and click Add form to my page. Convika puts a working form in the spot, and the section appears. This makes a new preview version, and the live page doesn't change until you publish.

Open the preview and send a test entry: Convika checks it but doesn't save it. Once the page is live, each entry is emailed to you and listed under Forms on the page's screen. Click View entries to read them. The Free plan shows 50 entries a month, and entries past that are kept and show once you're on Pro. For other ways to receive form entries, see making a form on an HTML page work without a backend.

Use your own domain

A link on your own domain, such as www.samrivera.com, keeps working if you ever move the page to another host: you point the domain at the new host, and the link in your bio stays the same. Link in bio on a custom domain, free compares which link-in-bio tools and free hosts let you connect one, and on which plan.

Convika's Free plan connects 1 custom domain. On the page's screen, click Connect my domain under Custom domain, type the name, and add the records Convika shows at the company where you bought the domain. The domain itself is bought separately. The DNS records, the bare domain, and what to do on Cloudflare are in the custom domain guide.

Or let AI make one in your style

Editing HTML isn't for everyone. Convika has two templates for the same page that start from words instead:

Link-in-bio page on your own domain: write your name and your links, and the AI makes a page of them under headings, such as work, things you made, and social media, with the first link as a large button.
A profile that looks like you: add a vibe, such as "pastel and a bit silly" or "black and red, band kid", and the AI picks the colors, the type, and the shapes.

Making a page on either template's page is free and uses no AI credits. Keeping and publishing it works the same way as steps 2 to 5 above. If you'd rather have ChatGPT, Claude, or Gemini write the page, AI link in bio has a prompt to paste and the steps to put it online.

What Free doesn't do

The Convika bar. A Free page shows the Convika bar at its foot. Pro ($12 a month) publishes without it.
A cookie notice for some visitors. Visitors from the EEA, the UK, Switzerland, and nearby places see a small notice asking whether to allow analytics cookies.
A page-view limit. Free includes 10,000 page views a month across your pages. After they run out, the page stops. See pricing for the details.
Only public pages. Anyone with the link can open a Free page, and it can show up in search. A private link or a password needs Pro.
No analytics tags. Google Analytics and the other analytics tools Convika supports work on Pro. On Free, a page's scripts can't send data to other sites. The template's own copy button runs on Free, and so do https: embeds such as a YouTube, Spotify, or SoundCloud player.
The domain costs money. Connecting it is free; you buy the domain itself from a domain registrar.

Frequently asked questions

Is this link in bio template free?

Yes. Copy it, change it, and publish it on any host: Netlify Drop, Cloudflare Pages, GitHub Pages, or Convika. It loads nothing from other sites and has no tracking code in it. If you publish it on Convika, Convika adds its own counts of visits and taps to the live page.

Can I use a photo instead of my initials?

Yes. Replace the line <div class="mark" aria-hidden="true">SR</div> with an <img> tag whose src is the photo's full https:// address, as item 2 of What to change shows. A photo saved only on your own computer won't show online. On Convika's Free plan, images from other sites load.

Can I add a YouTube or Spotify player?

Yes. Paste the player's embed code, the <iframe> with an https:// address, where you want it, for example under the big button. On Convika's Free plan, https: embeds such as YouTube, Spotify, and SoundCloud players run.

Why doesn't my Google Analytics tag work on Convika's Free plan?

An analytics tag works by sending data to its own servers, and on the Free plan a page's scripts can't send data to other sites. Google Analytics and the other analytics tools Convika supports work on Pro. Convika's own stats work on Free: visits, where people came from, and which links they tapped, for the last 90 days.

How do I change my links later without changing the URL?

Edit the file and upload it as the next version of the same page. On the page's screen, under Update from an HTML file, click Upload a new version, drop the new file, and click Upload as a new version. Check the preview, then publish it. The address in your bio stays the same. Pasting the file into the box above again, or using Upload an HTML file, would make it a second page at a second address instead. The steps: updating a page without changing its URL.

Does the page work without JavaScript?

Yes. The links, the layout, and the colors are plain HTML and CSS. JavaScript runs only the "Copy this page's link" button.

Sources

Netlify Docs: Netlify Drop quickstart (read November 6, 2026)
Netlify: Pricing (read November 6, 2026)
Cloudflare Pages: Direct Upload (read November 6, 2026)
Cloudflare Pages: Custom domains (read November 6, 2026)
GitHub Docs: Creating a GitHub Pages site (read November 6, 2026)
GitHub Docs: Adding a file to a repository (read November 6, 2026)
GitHub Docs: About custom domains and GitHub Pages (read November 6, 2026)

Free link in bio HTML template (copy, edit, and publish)