Skip to main content

Sharing

Widgets

Put a live visitor count on your own site — a badge in the footer, or a card with the last thirty minutes.

A widget is a small piece of your dashboard that lives on your own site. You copy one snippet, and it stays current on its own.

There are four, and they answer different questions:

Realtime

One line of text with a pulsing dot — 3 people are reading this right now. Sits in a footer or beside a headline.

Chart

A card with the last thirty minutes as bars or an area, and the countries those readers came from.

Preview

A compact card: today's figure, the shape of the day, and revenue if you want it shown.

Revenue

One figure and its trend — whichever number your site counts as revenue, over a period you choose.

Widgets are on every plan, and there is no limit on how many pages you embed one into.

Turning it on

Open the site's widget settings

Settings → Widgets. The widget starts switched off, and while it is off the tab shows only the switch: the preview, the controls and the snippet appear once you turn it on.

Switched off. The preview, the controls and the snippet appear once it is on.

Turn it on

Nothing is reachable until you do — the address returns nothing before then. Turning it on is also what reveals the rest of the tab.

Pick a type and style it

The preview above the controls is the real widget with your real numbers, not a mock-up. Every change you make appears in it immediately.

Copy the snippet into your page

Choose HTML or JSX and paste it wherever you want the widget to appear — in a footer, mid-article, or in a hero.

HTML gives you an iframe; JSX the same thing as a React element. The title attribute carries your site's name for screen readers.

What you can change

SettingApplies toWhat it does
CountRealtime, Chart, PreviewWhether the figure counts visitors, page views, or who is online now
ChartChartBars or an area
Primary colorAll fourThe pulse, the bars, the line
Revenue colorPreview, RevenueThe revenue series
PeriodRevenue7, 30 or 90 days, or all time
Publish this revenuePreview, RevenueWhether earnings appear at all — off until you switch it on
Card styleChart, Preview, RevenuePlain, Glass, Dome or Panel — see below
Preview themeAll fourLight, Dark, or System
Text sizeAll fourThe size of the headline figure
WordingRealtimeYour own sentence, with {count} where the number goes
AlignmentRealtimeWhere the badge sits in its box, horizontally and vertically

The Revenue widget

It shows one figure and its trend — whichever number your site counts as revenue. Change that setting and this widget follows it, so the number on your home page and the number on your dashboard are always the same one.

MRR cannot be published as a widget. It is a single figure about today rather than a value per day, so there is no trend line to draw — a widget would be an empty chart under a number. Sites set to MRR see this explained in the panel; Revenue and Goals your code sends both work.

Two things have to be true for it to appear:

The widget is on

The same switch as every other type.

Publish this revenue is ticked

Separate on purpose. Publishing visitor counts and publishing turnover are different decisions, and this one is off until you make it. A Revenue widget without it shows nothing at all rather than an empty card.

Revenue chosen and published. The card is one figure over its period and a bar for each day something was paid; the Period select and the snippet sit below it.

The period lives in the snippet, not in the settings. Pick it in the panel and it is written into the code you copy — so one published widget can appear in your footer over seven days and on your about page over ninety, by pasting two snippets.

Currency is not yet carried with the figure, so amounts render in US dollars whatever your account uses. If you sell in another currency, that is a known gap and the number itself is correct.

The count is a window, not just a number

The three counts do not measure the same period, and the difference matters when you put two widgets on one page:

  • Online now is the last 10 minutes. This is the figure the dashboard's live view shows, and it is what most people mean by "reading right now".

  • Visitors and Page views are the last 30 minutes.

Online now is offered on the Realtime badge only. On a card it would sit a ten-minute figure above a chart of a longer window, which reads as a contradiction.

Wording

The Realtime badge is a piece of your own copy, so you write it:

{count} people are reading this now
{count} shoppers browsing right now
Currently {count} on this page

{count} is where the number goes. Everything else is yours — "reading" is wrong on a shop and "browsing" is wrong on a documentation site, and we cannot guess which you are.

Card style

Four surfaces, on the Chart, Preview and Revenue cards. The Realtime badge takes none: it is a line of text in your own footer, and a card behind it would be our rectangle on your page.

StyleWhat it looks like
PlainA flat surface, the same one the dashboard puts around a chart
GlassFrosted, lit from one corner
DomeLit like a curved lens, bright along the top edge
PanelA softer sheet with a vertical settle
The same widget on its four surfaces. Plain is the dashboard's own card; the other three are lit differently, and nothing else changes.

Themes

System is the default and is what most sites want: the widget follows the colour scheme of the page it is embedded in. A dark page gets a dark widget, with no configuration.

Light and Dark pin it. Readers get that theme whatever the surrounding page is doing — useful when your page has a fixed look and you know which one the widget should match.

System follows your page if your page declares a colour scheme, and the reader's device otherwise. That is one behaviour rather than two: inside an embedded frame the browser reports the host page's scheme when it sets one, and there is no way for us to ask for the device's instead.

If your dark mode is applied with a class or a data attribute and no color-scheme, the widget cannot see it. Pin Dark in that case.

Sizing it

The snippet comes with the size that suits the type you picked. Three of them are fixed cards; the badge is not:

TypeSize in the snippet
RealtimeAs wide as its text, one line tall
Chart320 × 325
Preview330 × 200, or 330 × 218 with revenue shown — the extra line is the date axis
Revenue330 × 218

The corner radius and any border belong to your <iframe>, in the snippet you paste — not to the widget. That is deliberate: a rounded card drawn inside a square frame leaves the frame's own corners showing through as four bright notches. Style the frame and the whole thing rounds together.

What a widget shows, and what it never shows

A widget shows a count, a chart of a short window, and — on the Chart card — the countries readers came from. Revenue appears on the Preview card only if you switch it on.

It never shows individual visitors, paths, referrers, or anything that identifies a person. A widget is a public object on a public page, and it is built to be safe to leave there.

Revenue starts switched off. Having a Stripe connection is our fact; publishing what you earn is your decision, so it is never on by default.

It also never shows the state of your account. If your traffic goes past your plan and its grace band, the widget keeps rendering and simply reads zero — the same empty state a quiet week produces. It does not break, it does not show an error, and it does not tell the page's readers anything about your billing. Your numbers come back when your reports do.

That is a deliberate difference from a shared board, which stops answering altogether: a board is a page someone opens on purpose, while a widget is sitting inside your own site in front of your visitors, and a broken box there would be your problem rather than ours.

Every widget carries a small Powered by TrueStat line. It is always shown.

Turning it off

Turn off in the Widgets tab. The address stops answering immediately and any embed of it shows an empty box — so remove the snippet from your pages as well, rather than leaving a blank space.

Turning it back on restores the same address; you do not need to re-copy the snippet you already pasted.

Troubleshooting

Was this page helpful?

Last updated September 17, 2026