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

# How it works

> Understand the core concepts: properties, notifications, and the pixel.

## The basics

TinyBell works with 3 simple elements:

<Steps>
  <Step title="Property">
    A property is your hotel website. You add one property per domain. Each property gets a unique pixel code.
  </Step>

  <Step title="Pixel">
    A single line of JavaScript that loads on your website. It handles everything: displaying notifications, tracking impressions, and recording clicks. Lightweight (under 15KB) and non-blocking.
  </Step>

  <Step title="Notification">
    A visual widget that appears on your website. It can be a popup, a modal, a top bar, or a slide-in. You control the content, design, timing, and targeting.
  </Step>
</Steps>

## Notification types

| Type                | Best for              | Example                                         |
| ------------------- | --------------------- | ----------------------------------------------- |
| **Button Modal**    | Offers and promotions | "Book direct and save 15%" with a CTA button    |
| **Collector Modal** | Email capture         | "Get exclusive rates" with an email input field |
| **Coupon Bar**      | Discount codes        | Top bar showing "Use code DIRECT10 for 10% off" |
| **Collector Bar**   | Newsletter signup     | Top bar with email input for deals and updates  |

## Triggers

You decide when a notification appears:

* **Page load**: Show immediately when the page loads.
* **Exit intent**: Show when the visitor moves the cursor toward the browser close button.
* **Scroll depth**: Show after the visitor scrolls a percentage of the page.
* **Time on page**: Show after the visitor has been on the page for X seconds.

## Targeting

Control who sees your notifications:

* **Device**: Desktop, mobile, or both.
* **Page URL**: Show only on specific pages (e.g. rooms page, checkout).
* **Visitor type**: New vs. returning visitors.
* **Country**: Target guests from specific countries.

## A/B testing

TinyBell automatically splits traffic between notification variants. Create multiple versions of the same notification with different text, offers, or designs, and TinyBell tracks which one converts better.

## How the pixel works

```
Visitor loads your website
    |
    v
Pixel script loads (async, non-blocking)
    |
    v
Checks active notifications for this property
    |
    v
Evaluates triggers and targeting rules
    |
    v
Displays the matching notification
    |
    v
Tracks impression, click, or conversion
```

The pixel adds no visible latency to your website. It loads after your page content and runs independently.