# Countries

A row of flags is a quietly lovely thing to have in a footer: proof that a small site written in one room has been read in forty places. This widget lists every country that appears in your hits, as emoji flags, in alphabetical order.

```html
<script defer src="https://tinylytics.app/embed/YOUR_EMBED_CODE.js?countries"></script>
<span class="tinylytics_countries"></span>
```

The script replaces whatever is inside the element, so leave it empty. You can combine it with the other parameters on the same URL, as in `?hits&countries`.

Flags sit tightly next to each other by default. A little letter spacing makes a long row much easier to read:

```css
.tinylytics_countries {
  letter-spacing: 0.15em;
}
```

## Styles

Add `countries_style` to swap the row of flags for something to look at:

```html
<script defer src="https://tinylytics.app/embed/YOUR_EMBED_CODE.js?countries&countries_style=stamps"></script>
```

| Style | Looks like |
| --- | --- |
| `map` | A dotted world map with a flag on every country you have reached |
| `stamps` | A passport page, with an ink stamp for every country |

The flags and stamps arrive one after another when the widget first scrolls into view, not while it is still down in your footer. Visitors who have asked their system for reduced motion see them all at once. Screen readers hear "Read in 42 countries" followed by the names.

Each stamp's tilt and ink colour come from its country code, so your passport looks the same on every visit. The map is as wide as the element it sits in, up to about 40 characters of text, so give it a block element with some room.

Both styles scale with `font-size`. `--tinylytics-countries-land` colours the map's dots, and `--tinylytics-countries-ink` puts every stamp in one ink:

```css
.tinylytics_countries {
  --tinylytics-countries-ink: #1e3a8a;
}
```

The styles are a separate file that loads only when `countries_style` is set. The map also fetches a small outline of the world. An unknown style name is ignored and you get the flags.

## Where the data comes from

This is the same data as the Countries table on Overview: resolved from the visitor's IP address, which is discarded immediately after the lookup. The widget is simply the friendly version of it.