Top Countries widget

A ranked list of countries your visitors come from, with flags and either percentages or raw counts. Compact, scannable, slots into a sidebar or footer.

Ranked country list with flags

When to use it

Sidebars on personal blogs: "where readers are coming from"
About / colophon pages: concrete proof of a global audience
OSS project READMEs: free on GitHub Pages with the Hobby tier
Email newsletters with HTML support: works in modern email clients

Quick install

<script
  defer
  src="https://statable.com/js/tcw.js"
  data-hash="YOUR_PUBLIC_HASH">
</script>

Don't copy the snippet from this page. The real one lives in Site settings → Widget → Country, with data-hash already filled in and a one-click copy button.

Options

Attribute	Values	Default	Notes
`data-hash`	your public hash	(required)
`data-theme`	`light` / `dark` / `auto`	`auto`
`data-period`	`1d` / `7d` / `30d` / `90d`	`7d`	Time window
`data-format`	`percentages` / `numbers`	`percentages`	What to show next to each country
`data-limit`	`5` / `10`	`10`	How many countries to display
`data-tooltip`	`true` / `false`	`true`	Show country full name on hover
`data-width`	`auto` or pixels	`auto`
`data-height`	`auto` or pixels	`auto`
`data-primary-color`	hex	Statable blue	Used for the bar fill

The widget refreshes every 10 seconds.

Examples

Default, last 7 days, percentages, top 10:

<script defer
  src="https://statable.com/js/tcw.js"
  data-hash="03D3Cfb9eA">
</script>

Top 5 countries with raw numbers, dark mode, 30-day window:

<script defer
  src="https://statable.com/js/tcw.js"
  data-hash="03D3Cfb9eA"
  data-period="30d"
  data-format="numbers"
  data-limit="5"
  data-theme="dark">
</script>

Sidebar-sized, custom colour:

<aside style="width: 280px;">
  <h4>Where readers are reading from</h4>
  <script defer
    src="https://statable.com/js/tcw.js"
    data-hash="03D3Cfb9eA"
    data-limit="5"
    data-primary-color="#0061FE">
  </script>
</aside>

What the visitor sees

A vertically stacked list (one country per row)
Each row: country flag, country name, percentage or number, a thin progress bar showing share of total
Hover any row to see the full country name as a tooltip (e.g. US → United States)

Notes

Country detection: based on visitor IP. IPs are never stored alongside events.
Order: sorted by visitors (descending). Ties broken by country code alphabetically.
Hidden countries: if fewer than data-limit countries had traffic in the period, only the ones with data show.
Bundle size: ~6 KB gzipped.