Installation
<script src="https://thetinybell.com/pixel/YOUR_PIXEL_KEY" defer></script>
defer attribute ensures the script loads after the HTML document is parsed, preventing any render-blocking.
How it loads
- Browser downloads the pixel script.
- Script initializes and reads the notification configuration embedded in the response.
- For each active notification, it evaluates trigger conditions.
- When a trigger fires, it renders the notification HTML/CSS dynamically.
- 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.
| 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.
