# 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](/docs/account/public-stats). 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:

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:

```html
<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:

```html
<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:

```html
<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](#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.

| 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` |

```html
<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>
```

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.