About the Timeline Widget
Zyff's timeline widget lays out a sequence of events on any website, free — a company history, a project roadmap, a process, a set of milestones. Each entry carries a date label, a title, a description and an optional image or link, and any entry can be emphasised. Choose an alternating spine with entries either side of a centre line, a single left spine, a compact list, or a horizontal row that scrolls. Dates are free text, so "2019", "March 2021", "Q3" and "Day one" all work, and the order on the page is the order you arrange them in. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.
How to add a timeline to your website
Add your entries
Give each one a date label and a title, plus a description if it needs one. Reorder them to change the order shown — nothing is sorted for you.
Pick a layout
The alternating spine is the classic company-story shape, the left spine reads better on narrow pages, the compact list suits a long history, and the horizontal row scrolls sideways under a heading.
Choose the marker
A filled dot, a ring, a diamond or numbered steps. Numbers turn a history into a process, which is the right choice when the sequence itself is the point.
Copy the embed code
Paste the container div and script tag where the timeline should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.
What the Timeline Widget does
Dates that are labels, not dates
The date field is free text, so "2019", "Q3", "Day one" and "Now" all work — and because nothing is sorted, a timeline can run newest-first or oldest-first purely by how you arrange it.
Alternating that collapses properly
Two columns of prose either side of a centre line is unreadable on a phone, so the alternating layout becomes a single left spine below 720px automatically rather than squeezing.
Markers that mean something
A dot for a history, numbered markers for a process. Any entry can be emphasised with an accent border, for a launch or a funding round.
Four layouts
Alternating spine, left spine, compact list, and a horizontal row that scrolls sideways without pushing your page wide.
Images and links per entry
Any entry can carry an image and a link with your own wording, so a milestone can point at the announcement that went with it.
Nothing to slow your page
The whole timeline runs in the visitor's browser from the settings in your snippet, so it makes no request to Zyff when your page loads.
At a glance
| Entries | Up to 40, each with a date, title, description, image and link |
|---|---|
| Date format | Free text — no parsing, no sorting, no locale |
| Layouts | 4 templates: alternating spine, left spine, compact list, horizontal |
| Markers | Filled dot, ring, diamond, or numbered |
| Responsive | The alternating layout becomes a left spine below 720px |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add a timeline to my website?
Add your entries in Zyff's builder, pick a layout, then copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.
What date format should I use?
Whatever reads best — the field is free text and nothing parses it. "2019", "March 2021", "Q3 2024", "Day one" and "Now" are all fine, and mixing them in one timeline is fine too. A real date type would force one format and then have to guess a locale to display it.
Does it sort the entries by date?
No, deliberately. The order shown is the order you arrange them in, which means a timeline can run oldest-first for a company history or newest-first for a changelog without any setting — and it means a free-text date cannot break the ordering.
Does the alternating layout work on a phone?
It becomes a single left spine below 720px. Two columns of text either side of a centre line is genuinely unreadable at phone widths, so squeezing it rather than collapsing it would be the wrong answer.
Can I use it for a process rather than a history?
Yes — set the marker to numbered and the timeline reads as an ordered set of steps rather than a set of dates. Leave the date field empty on each entry if the sequence is the only thing that matters.
Can I highlight one entry?
Yes. Emphasising an entry gives it an accent border, which is worth reserving for the one or two moments that matter most — a launch, a funding round. Emphasising everything emphasises nothing.
Where do I paste the timeline embed code?
Wherever the story should appear — an about page, a company history page, or a product roadmap. Put the container div in that spot and keep the script tag with it.
Is the timeline widget really free?
Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "Timeline by Zyff" link, which is how the tool stays free. The left spine and compact list are free, and the left spine is deliberately the one that reads correctly on a phone with no paid styling. A paid plan adds the alternating and horizontal layouts, full colour control and removes the attribution link.