> ## 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.

# Install the pixel

> Add the TinyBell pixel to your hotel website.

## What is the pixel?

The pixel is a single line of JavaScript that enables TinyBell on your website. It loads asynchronously, so it does not slow down your site.

## Get your pixel code

1. Log in to your [TinyBell dashboard](https://thetinybell.com/dashboard).
2. Go to **Hotels / Properties**.
3. Click on your property.
4. Copy the pixel code from the **Pixel Code** section.

Your pixel code looks like this:

```html theme={null}
<script src="https://thetinybell.com/pixel/abc123def456" defer></script>
```

## Install on your website

Paste the pixel code inside the `<head>` tag of every page where you want notifications to appear.

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hotel</title>
      <!-- TinyBell Pixel -->
      <script src="https://thetinybell.com/pixel/YOUR_PIXEL_KEY" defer></script>
    </head>
    <body>
      ...
    </body>
    </html>
    ```
  </Tab>

  <Tab title="WordPress">
    **Option 1: Plugin (recommended)**

    1. Install the **WPCode** or **Insert Headers and Footers** plugin.
    2. Go to the plugin settings.
    3. Paste the pixel code in the **Header** section.
    4. Save.

    **Option 2: Theme file**

    1. Go to Appearance > Theme File Editor.
    2. Open `header.php`.
    3. Paste the pixel code before `</head>`.
    4. Save.
  </Tab>

  <Tab title="Google Tag Manager">
    1. Log in to [Google Tag Manager](https://tagmanager.google.com/).
    2. Click **New Tag** > **Custom HTML**.
    3. Paste the pixel code.
    4. Set trigger to **All Pages**.
    5. Publish.
  </Tab>

  <Tab title="Shopify">
    1. Go to Online Store > Themes > Edit Code.
    2. Open `theme.liquid`.
    3. Paste the pixel code before `</head>`.
    4. Save.
  </Tab>
</Tabs>

## Verify the installation

1. Visit your website.
2. Open browser Developer Tools (F12 or right-click > Inspect).
3. Go to the **Network** tab.
4. Search for `pixel`. You should see a request to `thetinybell.com/pixel/...` with status 200.

<Check>
  If you see the request with status 200, the pixel is installed correctly.
</Check>

## Troubleshooting

| Problem                         | Solution                                                                       |
| ------------------------------- | ------------------------------------------------------------------------------ |
| Pixel not loading               | Check that the script tag is inside `<head>` and the URL is correct            |
| Notifications not showing       | Make sure the property is enabled and at least one notification is active      |
| Pixel loads but nothing appears | Check your notification trigger settings (exit intent won't show on page load) |
| Conflict with other scripts     | Add `defer` to the script tag if not already present                           |
