# Embedding the Script on Your Site

Every site you create on Tinylytics has its own unique embed code. It is tied to your configured domain and only loads on that domain.

> **Note:** If you have a domain like `example.com` and your site loads on `www.example.com` without redirecting to `example.com`, we will automatically track this regardless of your "Allow on any domain" setting for your site. This is for convenience and to ensure you don't miss any hits.

## Getting Your Embed Code

When you create your site, you'll be presented with your embed code:

![Embed Code Screenshot](docs/embed-code.png)

Click on the code to copy it to your clipboard.

## Adding the Script to Your Site

Depending on your website and provider, add this script below the footer of your site (or before the closing body tag). We'll add specific guides for different providers at a later stage.

### Using the Minified Version

For improved performance, you can use a minified version of the script by adding `/min` to the URL:

```html
<script defer src="https://tinylytics.app/embed/YOUR_UNIQUE_SITE_CODE/min.js"></script>
```

The minified version is functionally identical, but it can load faster and improve page performance.

### Using the SPA Version

If you're using a Single Page Application (SPA) framework like React, Vue, or Angular, you can get the SPA-optimized script by adding the `?spa` parameter:

```html
<script defer src="https://tinylytics.app/embed/YOUR_UNIQUE_SITE_CODE.js?spa"></script>
```

You can also combine it with the minified version:

```html
<script defer src="https://tinylytics.app/embed/YOUR_UNIQUE_SITE_CODE/min.js?spa"></script>
```

The SPA version is optimized for applications that handle navigation client-side and may have different tracking requirements compared to traditional multi-page applications.

## Script Parameters

You can customize the script behavior by adding query parameters to the embed URL. Multiple parameters can be combined with `&`.

### Widget Parameters

| Parameter | Description |
|-----------|-------------|
| `?hits` | Display a hit counter widget (use class `tinylytics_hits`) |
| `?hits=unique` | Display unique hits instead of total hits (paid plans only) |
| `?kudos` | Display a kudos button with default 👋 emoji |
| `?kudos=❤️` | Display kudos with a custom emoji |
| `?kudos=custom` | Return only the count (for custom styling) |
| `?uptime` | Display uptime percentage (requires uptime monitoring) |
| `?countries` | Display visitor country flags |
| `?webring` | Display a random webring member link |
| `?webring=avatars` | Display webring member with avatar |

### Tracking Parameters

| Parameter | Description |
|-----------|-------------|
| `?events` | Enable event tracking via `data-tinylytics-event` attributes |
| `?beacon` | Use beacon API for event tracking (better for page unload events) |
| `?spa` | Enable SPA mode for client-side navigation |
| `?ignore` | Ignore hits from this page load |

### Example: Multiple Features

```html
<script defer src="https://tinylytics.app/embed/YOUR_CODE.js?hits&kudos&countries"></script>
```

For detailed usage of each widget, see the specific documentation pages:
- [Hit Counter](/docs/show_hit_counter)
- [Kudos](/docs/showing_kudos)
- [Countries](/docs/showing_countries)
- [Uptime](/docs/showing_uptime)
- [Webring](/docs/showing_webring)
- [Event Tracking](/docs/event_tracking)

### Alternative JavaScript Approach

If your provider doesn't allow direct script tags (for example Write.as), you can use this JavaScript approach instead:

```javascript
let script = document.createElement("script")
script.type = "text/javascript"
script.defer = true
script.src = "https://tinylytics.app/embed/YOUR_UNIQUE_SITE_CODE.js"
// Use the line below for the minified version instead
// script.src = "https://tinylytics.app/embed/YOUR_UNIQUE_SITE_CODE/min.js"
document.body.appendChild(script)
```

Just replace `YOUR_UNIQUE_SITE_CODE` with the code found on your site's page.

## Important Notes

- If you're using a development domain that doesn't match your site's configured domain, no hits will be recorded
- We recommend creating a separate site for testing purposes with your test URL
- Once you load the site, it'll start collecting hits automatically
- If it's not working, double-check the domain configuration
- Still having issues? Don't hesitate to reach out for help 

### Best Practices
- Place the script tag before the closing `</body>` tag or use the `defer` attribute in the `<head>`
- Consider using the [ignore feature](/docs/ignore_your_hits) during development
- Use the minified version of the script for better performance