Add a timeline to your website
Your company history, a product roadmap, a project plan, an event agenda or your wedding story. Add the stories, pick a design, and paste one line of code. Each story slides in as visitors scroll down.
- Free plan
- No credit card
- Works on any website
yourwebsite.com
The real timeline, with a sample company. Scroll to see the stories come in.
How it works
How to add a timeline to your website
Add your stories, pick a design, paste the code.
Start from a ready timeline
Company history, startup journey, product roadmap, project milestones, event agenda, travel plan, wedding story, career, course plan and more.
Add your stories
A date, a title and a few words for each, with a photo, a video, an icon or a button if you want one. Star the big moments.
Paste the embed code
Add your website, copy the code and paste it once. New stories show on your site as soon as you save.
Features
A timeline people actually read
Five layouts
Down the middle, down one side, packed tight, sideways with arrows, or one story at a time under a row of dates.
Eight designs
Classic, flat, elegant, modern, clean, ribbon, minimal and frosted glass.
Stories that move
Slide, fade, rise, zoom, flip or come into focus as they scroll in, one after another, at the speed you pick.
Photos and video
A wide picture or a small one beside the words, or a YouTube or Vimeo video.
Big moments stand out
Mark a story as featured and it gets a tag and a stronger card.
Roadmaps that show progress
Done, now and next on each step, and a bar of how far along you are (paid plans).
Your look
Light, dark or a colour for every story, dots, rings, numbers, icons or photos on the line.
Neat on a phone
Every layout turns into one tidy column on a small screen.
Designs
Five ways to lay it out
The same stories, told the way that suits your page.
Alternate
Stories on both sides of a line down the middle.
One side
The line on the left, every story to its right.
Sideways
A row of stories under a line of dates, moved with arrows or a swipe.
Tabs
One story at a time, picked from a row of dates.
Everything included
Everything in the timeline widget
Every design and setting you can use. Most are on every plan; the few that need a paid plan say so.
Stories
- A date or a label like Step 1, a title and text
- A photo, a YouTube or Vimeo video, or an icon
- A button to any page
- Featured stories with a tag
- Done, now and next badges and a progress bar (paid plans)
Layouts and designs
- Alternate, one side, compact, sideways and tabs
- Classic, clean, minimal, flat, elegant, modern, ribbon and glass
- Every layout and design on every plan
Motion
- Slide, fade, rise, zoom, flip or focus
- Fast, normal or slow
- Stories one after another, or all together
- No motion for visitors who turn it off on their device
Your look
- Light, dark or a colour per story
- Dots, rings, numbers, icons or photos on the line
- A solid, dashed or dotted line
- Dates as a year, a month, a full date or short
- Nothing behind it, your colour, a gradient or a photo
Who it is for
Where a timeline fits
About us pages
How the business started, grew and where it is now, with photos from each year.
Roadmaps and projects
What is done, what is next, and the date for each step.
Events and weddings
The day's agenda, or how a couple met, from the first date to the big day.
Works everywhere
Add your timeline anywhere
Copy the embed code from your dashboard, then:
- WordPress
- Add a Custom HTML block and paste the code.
- Shopify
- Add a Custom Liquid section and paste the code.
- Wix
- Add an Embed Code element and paste the code.
- Squarespace
- Add a Code block and paste the code.
- Webflow
- Drag in an Embed element and paste the code.
- Any HTML site
- Paste the two lines where the timeline should appear.
Common problems
Timeline not working? Check these first
Most problems have a quick fix. Find yours below.
The stories don't move when I scroll
That device probably has Reduce motion turned on, so the stories simply appear. Everyone else sees the motion you picked.
My stories are in the wrong order
They follow the order in the editor, not the dates. Drag them into the order you want.
Nothing shows on my website
Add your website in the Install tab, under Allow your website, then open the live page (not your builder's editor). Still blank? Right-click the spot, choose Inspect, and look for a [widgetpop] line in the Console tab.
Still stuck? Email [email protected] and we usually reply within a day.
Help center
Timeline guides
Step by step, with screenshots of the dashboard.
FAQ
Timeline widget: questions
How do I add a timeline to my website?
Create a timeline widget, start from a ready one, add your stories and paste the embed code into your page.
Can it go sideways?
Yes. The sideways layout shows the stories in a row under a line of dates, moved with arrows or a swipe. On a phone it becomes one column.
Can I add videos?
Yes. Paste a YouTube or Vimeo link into a story and it plays right in the timeline.
Is it free?
Yes. The free plan has every layout and design, and up to 10 stories. Paid plans add roadmaps, filters, search, videos and more stories.
Will it slow down my website?
No. It loads after your page, and pictures load only when people scroll to them.
More widgets
One account, every widget
Use them together on the same site, from the same dashboard.
Pricing
Start free. Upgrade when it pays off.
No credit card to start. Cancel any time.
Starter
/month
- 1 website
- Unlimited widgets
- Unlimited views
- Remove “Powered by WidgetPop”
- Email support
Pro
/month
- 3 websites
- Unlimited widgets
- Unlimited views
- Remove “Powered by WidgetPop”
- Priority email support
Agency
/month
- 10 websites
- Unlimited widgets
- Unlimited views
- Remove “Powered by WidgetPop”
- Priority email + chat support
Pick any of our widgets on every plan. Analytics included.
Prices in US dollars. Tax, where it applies, is added at checkout.
Add a timeline to your site
Free plan, no credit card. Start from a ready timeline in a minute.
Create your free widget