Skip to main content

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.

​
Installation

<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.
Do not modify or override the altumcode global object. This will break notification rendering.

​
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

MetricValue
Script sizeUnder 15KB (gzipped)
Load methodAsync, non-blocking
DOM impactAppends to <body>, no layout shifts
Cookie usage1 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.