Stat card
The stat card puts a compact summary of your traffic on your own pages: views and unique views for a date range, with a small chart underneath.
Each site has its own private card link, separate from your embed code and your public stats page. Nobody can load your card until you paste its code somewhere, and you do not need to switch public stats on. Once the code is on a page, anyone reading that page can see the numbers, which is the point. If you change your mind, Reset link in the builder gives the card a new link, and every copy you pasted before stops showing your stats within a few minutes. If your public stats page is open, the site name on the card links to it.
These cards are live, drawn from the same demo site as the dashboard on the homepage:
Default
range=7d&chart=bars&interactive
show=uniques&accent=059669
transparent&chart=none
The quickest way to set one up is the Stat card builder under Settings → Sharing. It shows a live preview and gives you both snippets below, ready to copy.
With the script
If your site already runs the Tinylytics script, add stats to it and place an element where the card should appear. data-card holds your card link, which the builder fills in:
<script defer src="https://tinylytics.app/embed/YOUR_EMBED_CODE.js?stats"></script>
<div class="tinylytics_stats" data-card="YOUR_CARD_ID"></div>
The script puts the card inside the element and keeps its height in step with the content, so nothing jumps or scrolls. The card fills the element’s width, so size the element to taste. When no theme is set, the script reads the element’s text colour and picks a light or dark card to match your site.
Options go on the element as data attributes:
<div class="tinylytics_stats" data-card="YOUR_CARD_ID" data-range="7d" data-chart="bars" data-interactive></div>
As an iframe
Where a script is not allowed, embed the card directly. The options become query parameters on the URL:
<iframe src="https://tinylytics.app/stats/YOUR_CARD_ID?range=7d"
title="Site stats" loading="lazy"
style="width:100%;height:170px;border:0;color-scheme:normal"></iframe>
An iframe cannot resize itself, so its height is fixed. The builder measures the card for the options you choose and writes that height into the snippet. color-scheme:normal keeps the card background from turning opaque on sites that declare a dark colour scheme.
Options
| Option | Values | Default |
|---|---|---|
range |
7d, 30d, 12m |
30d |
show |
views, uniques |
Both |
style |
terminal, synthwave, win95, receipt |
The classic card. See make it your own |
theme |
light, dark |
Matches your site with the script, or the visitor’s system setting in an iframe |
chart |
line, bars, none |
The chart type on your dashboard |
accent |
A hex colour, such as f59e0b |
Your site’s accent colour, or the look’s own |
interactive |
No value | Off |
transparent |
No value | Off |
show picks one number when you only care about one. With show=uniques, the chart counts unique views too. Sites that do not count unique hits always show views.
interactive adds range tabs to the card and lets visitors hover the chart, or step through it with the arrow keys, to read each point. transparent drops the card’s background and border so it sits directly on your page. Pair it with a theme if your site’s text colour is not a reliable guide.
Make it your own
The card runs in its own frame, so the CSS on your site can’t reach inside it. Styling goes through options instead: pick one of the built-in looks with style, or set the colours, font, and corners yourself.
style=terminal&interactive
style=synthwave
style=win95&chart=bars&interactive
style=receipt&chart=bars
| Look | Feels like |
|---|---|
terminal |
A green-screen terminal from the 80s, with scan lines and a blinking cursor |
synthwave |
80s neon: glowing numbers over a horizon grid |
win95 |
A Windows 95 dialog, bevelled buttons and all |
receipt |
A till receipt with a torn edge |
Looks bring their own colours and frames, so theme and transparent do not change them. An accent you set still recolours the chart. The terminal takes its glow from text, so style=terminal&text=ffb000&accent=ffb000 turns it into an amber screen. The other looks keep their signature colours, and the options below work best on the classic card.
To build your own look, set the colours and type directly:
| Option | Values |
|---|---|
bg |
Background, as a hex colour |
text |
Text, as a hex colour |
border |
Border, as a hex colour |
font |
sans, serif, mono, rounded |
radius |
Corner radius in pixels, 0 to 32 |
<div class="tinylytics_stats" data-card="YOUR_CARD_ID" data-bg="fef3c7" data-text="78350f" data-border="f59e0b" data-accent="d97706" data-font="serif" data-radius="2"></div>
bg, text, border, accent, font, radius
style=terminal&text=ffb000&accent=ffb000
Set bg and text together, because the card cannot pick a readable text colour for a background it has not seen. The labels and range tabs are mixed from those two. Fonts come from the visitor’s own system, so nothing extra downloads.
What it shows
Views and unique views count the same hits as your dashboard, after ignore rules and ignored paths. Unique views only appear when unique hits are switched on for the site. If you use delayed public stats, the card is delayed by the same 30 days. Hide detailed stats removes the chart and keeps the totals.
The numbers are cached for up to 15 minutes, so a card on a busy page does not add load for each visitor. The Tinylytics link at the bottom follows the Remove Tinylytics branding setting, which paid plans can switch on.