Link-in-Bio Kit documentation

Ten link pages in plain HTML. This guide takes you from the download to a page on your own address.

Quick start

Open index.html in your browser and pick a template.
Copy that template's folder from templates to a new place. It contains one file, index.html.
Open the file in a text editor (VS Code, Sublime Text, even Notepad) and search for EDIT. Each match marks something to change: page title, initials or photo, name, bio, links, social profiles.
Upload the folder to a web host and put the address in your bio.

Link-in-Bio-Kit/
  index.html              gallery of all templates
  documentation.html      this guide
  README.md               short version of this guide
  LICENSE.txt
  CHANGELOG.md
  previews/               images used by the gallery
  templates/
    01-noir/index.html      black and gold: musicians, filmmakers
    02-blossom/index.html   soft blush: beauty, lifestyle
    03-glass/index.html     frosted glass: founders, developers
    04-studio/index.html    editorial: photographers, designers
    05-neon/index.html      terminal: streamers, gamers
    06-terra/index.html     earth tones: food, wellness
    07-pearl/index.html     white and gold: coaches, consultants
    08-volt/index.html      lime and black: fitness, athletes
    09-carbon/index.html    dark agency: designers, developers
    10-aurora/index.html    gradient: illustrators, artists

Editing your page

Links

Each link is one block that starts with <a and ends with </a>. Put your address in place of the # and change the words inside.

<a href="https://yourshop.com" class="link-item">
  ...
  <span class="link-label">Shop my favourites</span>
  <span class="link-sub">Products I use daily</span>
  ...
</a>

Add a link: copy a whole block and paste it under the last one.
Remove a link: delete the whole block.
Reorder: cut a block and paste it higher or lower.
Email or phone: use href="mailto:you@site.com" or href="tel:+15550100".

The class names differ a little between templates. Keep the ones that are already in the file you chose.

Icons

Where a template shows an emoji next to a link, replace it with any other emoji. No icon files are needed.

Stats, badges and extra blocks

Follower counts, the "live now" bar, testimonials and featured cards are plain HTML. Edit the text, or delete the block if you do not want it.

Photo avatar

Templates show initials by default. To use a photo, put the image file in the same folder as index.html, then replace the initials with an image tag:

<!-- before -->
<div class="avatar">AV</div>

<!-- after -->
<div class="avatar"><img class="avatar-photo" src="photo.jpg" alt="Ava Reeves"></div>

The photo is cropped to the shape of the avatar automatically. A square image of about 400 by 400 pixels is plenty. Keep the outer <div> exactly as it is in your template; its class name may be avatar-inner, avatar-box or monogram.

Settings

Near the bottom of each file there is a short block called LINK-IN-BIO SETTINGS. Everything in it is optional.

Setting	Default	What it does
`shareButton`	`true`	Shows the round share button. `false` removes it.
`sharePosition`	varies	`"top-right"` or `"bottom-right"`.
`openInNewTab`	`true`	Links to other sites open in a new tab.
`utmSource`	`""`	Adds campaign tags to outgoing links. See Click tracking.
`utmMedium`	`"bio"`	The `utm_medium` value used with `utmSource`.
`trackClicks`	`true`	Reports link clicks to your analytics tool, if you have one on the page.
`contact`	`null`	Your details for the Save contact link.
`shareUrl`	page address	Address to share, if different from the page.
`textCopied`	`"Link copied"`	Message shown after the link is copied.
`textShare`	`"Share this page"`	Label read by screen readers for the share button.
`onClick`	none	A function called on every link click. Receives the link name, the address and the element.

If you do not want any script at all, delete both <script> blocks at the bottom of the file. The page still works as plain links.

Timed links

Add a date to any link, or to any other block, and it shows only during that time.

<!-- visible until the end of 30 November -->
<a href="https://yourshop.com/sale" class="link-item" data-until="2026-11-30"> ... </a>

<!-- appears on 1 December -->
<a href="https://yoursite.com/album" class="link-item" data-from="2026-12-01"> ... </a>

<!-- both: a two-week window -->
<a href="#" class="link-item" data-from="2026-12-01" data-until="2026-12-14"> ... </a>

Dates use the visitor's own clock. For an exact moment, include a time and offset: data-from="2026-12-01T09:00:00+05:00".

This hides the link, it does not protect it. Someone who reads the page source can still find the address. Do not use it for anything secret.

Click tracking

The kit does not collect any data. If you add an analytics tool to the page, link clicks are sent to it automatically.

Copy the snippet your analytics tool gives you and paste it just before </head>.
That is all. Each click is reported with the text of the link.

Tool	What you will see
Google Analytics 4	An event named `link_click` with `link_text` and `link_url`.
Plausible	A goal named `Link click` with the properties `link` and `url`. Add the goal in your Plausible settings.
Fathom	An event named `Link click: your link name`.
Umami	An event named `Link click` with `link` and `url`.

To report a different name for a link, add data-track="Any name" to it.

Campaign tags

Set utmSource: "instagram" and every link to another site gets ?utm_source=instagram&utm_medium=bio added. Your shop or site analytics then show these visits as coming from your bio. Links that already have a utm_source are left alone.

Tip: make a copy of the page for each platform, one with "instagram" and one with "tiktok", to compare them.

Save contact

Fill in contact in the settings block:

contact: {
  name: "Claire Laurent",
  title: "Executive Coach",
  org: "The Clarity Method",
  email: "hello@yoursite.com",
  phone: "+1 555 010 0199"
}

Then point any link at #save-contact:

<a href="#save-contact" class="social-link">Save contact</a>

Tapping it downloads a .vcf contact card, which phones offer to add to the address book. Only name is required. You can also add url and note. While contact is null, save-contact links are hidden.

The Pearl and Carbon templates include this link with sample details. Replace them with yours or set contact: null.

Colours and fonts

Colours are stored as variables at the top of the <style> block. Change them there and the whole page follows.

:root {
  --bg: #0a0a0a;
  --accent: #c9a96e;
  --text: #e8e2d9;
}

Fonts load from Google Fonts through the <link> in the head. Swap the family name in that link and in the --font variables. To avoid Google Fonts, delete the link and the page falls back to system fonts.

Putting it online

Netlify: open app.netlify.com/drop and drag in your template folder.
Cloudflare Pages: Workers and Pages, Create, Pages, Upload assets, then drag in the folder.
GitHub Pages: put index.html in a repository and switch on Pages in its settings.
Any other host: upload index.html (and your photo, if you use one) to the public folder.

Each of these gives you a free address straight away. All three also let you connect your own domain, such as links.yourname.com.

Troubleshooting

A link I added does not show

Check that it does not carry a data-from date in the future or a data-until date in the past.

The Save contact link is missing

It is hidden while contact is null or has no name.

The share button covers something

Set sharePosition to the other corner, or shareButton: false.

My photo is not showing

The file name in src must match the file exactly, including capital letters, and the image must be uploaded next to index.html.

Clicks are not in my analytics

The analytics snippet must be in the page, and ad blockers stop many analytics tools. Test in a private window without extensions.

License

One purchase lets you use the templates on unlimited pages, for yourself and for clients, including commercial work. You may not resell, share or redistribute the templates or their source. The full text is in LICENSE.txt.

Need help? Reply to your purchase receipt email.