‌‌‌‌​​‌‌​‍‌​‌​‌‌‍‍‌​‍‌‌​​‌​​‌‌​‍ One script tag · Free tier · Auto-detects headings

Every reader, guided.

Waypoint adds the four content-UX features readers actually want — a reading progress bar, an estimated read time, an auto-built table of contents, and a smooth scroll-to-top — in one lightweight script. It scans your headings and word count automatically. No config, no four conflicting plugins.

Waypoint reading view
7 min read
On this page
  • Introduction
  • The core idea
  • Worked example
  • Conclusion
Features

Four content-UX wins, one tiny script.

Reading progress bar

A thin bar tracks how far through the article a reader is — updated on every scroll burst, throttled with one requestAnimationFrame so it never janks. Color, height, and top/bottom position are customizable on a license.

Estimated read time

Waypoint counts the words in your article and divides by reading speed — 238 WPM by default, the average adult pace — to inject an honest "min read" line near the top. Set the WPM to match your audience on a license.

Auto table of contents

Waypoint scans the page's h2 and h3 headings and builds a table of contents from them — no manual list, no anchors to maintain. Float it to the side or inline it at the top; the current section highlights as you read.

Smooth scroll-to-top

A floating button fades in once a reader scrolls past the fold and smoothly returns them to the top in one tap. It lives in a Shadow-DOM bubble so it can't be styled — or broken — by your theme's CSS.

Reading-complete event

When a reader hits ~98% of the article, Waypoint fires a waypoint:complete DOM event with the read minutes and word count — a clean hook for analytics, gamification, or a "you finished it" nudge.

One script tag, any site

Pure HTML/CSS/JS, zero dependencies, no build step, rAF-throttled and prefers-reduced-motion-aware. The floating chrome lives in a Shadow DOM. Drop it on WordPress, a static site, Webflow — anything that renders a <script> tag.

How it works

Drop it in. It figures out the rest.

1

Drop in the script.

One <script> tag with defer, plus optional data-* attributes for theme color, bar position, and your license key. No build step, no config required.

2

Waypoint scans your page.

It finds your article container automatically (articlemain → common post-content classes), then reads its h2/h3 headings and word count — no markup to add.

3

Readers get the experience.

A progress bar tracks their scroll, a "min read" estimate shows near the top, the auto table of contents follows along, and the scroll-to-top button is one tap away.

4

Customize & hook in (paid).

Tune the bar's color, data-bar-position, and height, override the WPM, and listen for the waypoint:complete event to feed your analytics.

What's included

The progress bar and read time are free. The rest is paid.

Free gives every reader a progress bar and an honest read-time estimate. A license adds the auto ToC, scroll-to-top, customization, and the reading-complete event.

Reading progress bar
Free
Estimated read time
Free
Auto content detection
Free
Shadow-DOM isolation
Free
Reduced-motion support
Free
JS API + SPA refresh
Free
Auto table of contents
Paid
Smooth scroll-to-top
Paid
Bar color / position / height
Paid
WPM override
Paid
Reading-complete event
Paid
Multi-site license
Paid
Pricing

Free forever for the bar and read time. Paid when you want the whole reading experience.

Monthly Annual Save 15%
Free
Free
Progress bar + read time for one site
$0forever
No credit card
  • Reading progress bar
  • Estimated read time
  • Auto content detection
  • Shadow-DOM isolation
  • Table of contents (locked)
  • Scroll-to-top (locked)
Get Free
Agency
Agency
For studios managing many sites
$39.95/month
billed monthly
$39.95/mo$33.95/month
$407.40 billed annually
  • Everything in Single
  • 10 domains + subdomains
  • Per-domain customization
  • Inline + floating ToC modes
  • Email support
  • Priority support
Unlimited
Unlimited
For high-volume studios & enterprises
$99/month
billed monthly
$99/mo$84.15/month
$1,009.80 billed annually
  • Everything in Agency
  • Unlimited domains
  • Priority support (<24hr)
  • White-glove onboarding
  • Early access to new plugins
  • Volume pricing on full Suite
FAQ

Questions

How does it find my headings automatically?

Waypoint locates your article container by trying articlemain[role="main"] → common post-content classes → <body>, then scans that container for h2 and h3 elements to build the table of contents and counts its words for the read-time estimate. No anchors, no manual list, no markup to add. If your theme uses a different wrapper, point it at the right one with data-content-selector.

Will it conflict with my theme or other plugins?

No. The floating chrome — the progress bar, scroll-to-top button, and floating ToC — lives in a Shadow DOM, so its styles are completely isolated from your page and your page's CSS can't reach in and break it. The read-time line and the inline ToC are injected into the light DOM on purpose, so they inherit your article's typography and flow with the content. It's vanilla JS with zero dependencies, so there's nothing to clash with.

Does the free tier expire?

No. The free tier renders a reading progress bar and an estimated read time forever — those two always render, no key required. A license adds the auto table of contents, the scroll-to-top button, bar customization, the WPM override, and the waypoint:complete event.

How accurate is the read-time estimate?

Read time is words divided by reading speed, defaulting to 238 words per minute — the average adult pace — with a one-minute floor. It's an honest estimate, not a guarantee, because everyone reads differently. On a license you can override the WPM (clamped 80–1000) to match a slower or more technical audience.

Will it slow my site down or jank when scrolling?

It's pure vanilla JS, no dependencies, served from Cloudflare's edge. The scroll handler is requestAnimationFrame-throttled with passive listeners — one frame per scroll burst updates the bar, the scroll-top visibility, and the active heading together. It also respects prefers-reduced-motion, turning smooth scrolls into instant jumps and killing transitions for readers who ask for that.

Does it work with single-page apps and route changes?

Yes. window.Waypoint exposes a JS API — Waypoint.refresh() re-scans headings and recomputes the read time after a client-side route change, and calls made before the script loads are queued and flushed on init. There's also Waypoint.scrollTop() and Waypoint.getReadTime().

Get started

Guide every reader through.

Add the free progress bar and read time to one site. See how much further readers get when the page tells them where they are and how far there is to go.