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

# Pixel JavaScript

> Technical details about the TinyBell pixel script.

## Installation

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

The `defer` attribute ensures the script loads after the HTML document is parsed, preventing any render-blocking.

## How it loads

1. Browser downloads the pixel script.
2. Script initializes and reads the notification configuration embedded in the response.
3. For each active notification, it evaluates trigger conditions.
4. When a trigger fires, it renders the notification HTML/CSS dynamically.
5. User interactions (clicks, closes) are tracked via the event endpoint.

## Global object

The pixel creates a global `altumcode` object on the page. This is used internally for state management.

<Warning>
  Do not modify or override the `altumcode` global object. This will break notification rendering.
</Warning>

## CSS isolation

Notification styles are scoped with the `.altumcode-` prefix to avoid conflicts with your website's CSS. The pixel injects its own stylesheet dynamically.

## Performance

| Metric       | Value                                                 |
| ------------ | ----------------------------------------------------- |
| Script size  | Under 15KB (gzipped)                                  |
| Load method  | Async, non-blocking                                   |
| DOM impact   | Appends to `<body>`, no layout shifts                 |
| Cookie usage | 1 cookie for visitor tracking (`altumcode_pixel_key`) |

## Disabling the pixel

To temporarily disable TinyBell on your website without removing the code, disable the property in the TinyBell dashboard. The pixel will still load but will not render any notifications.

To fully remove TinyBell, delete the `<script>` tag from your website.
