> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thetinybell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom website

> Install TinyBell on any HTML website or custom CMS.

## Basic installation

Add the pixel code inside the `<head>` tag of your website:

```html theme={null}
<head>
  <!-- your existing meta tags and stylesheets -->
  <script src="https://thetinybell.com/pixel/YOUR_PIXEL_KEY" defer></script>
</head>
```

That's it. The pixel handles everything else automatically.

## Single-page applications (SPA)

If your website is built with React, Vue, Next.js, or another SPA framework, add the pixel to your main HTML template (usually `index.html` or `_document.js`).

The pixel detects page navigation automatically and re-evaluates notification triggers on each route change.

## Multiple domains

If your hotel group has multiple websites, create a separate property in TinyBell for each domain. Each property gets its own pixel code.

Do not use the same pixel code on different domains.

## Content Security Policy (CSP)

If your website uses a Content Security Policy, add TinyBell's domain to the `script-src` directive:

```
Content-Security-Policy: script-src 'self' https://thetinybell.com;
```

## Subresource Integrity (SRI)

The pixel URL changes dynamically based on your notification configuration, so SRI hashes are not supported. Use CSP for security instead.
