1. Sell-out alert banner
<div data-trpl-widget="alert"></div>
2. Time-slot availability
<div data-trpl-widget="timeslots"></div>
3. Visit planner (week ahead)
<div data-trpl-widget="planner"></div>
4. Check your date (live + forecast)
Dates within the next 8 days show live slot availability. Later dates get an outlook from recent day-of-week sell-out behavior ("Saturdays have been selling out…").
<div data-trpl-widget="datecheck"></div>
5. Month outlook (text embed)
A server-written narrative — what this month has looked like and what to expect —
regenerated every 15 minutes from live sales. Optional data-hide-heading and
data-hide-cta.
<div data-trpl-widget="outlook"></div>
6. Reservation calendar (embed or page)
Year-at-a-glance heatmap from the permanent archive; fills in as the season progresses, and next season shows last year's pattern on future dates. Also standalone at calendar.html.
<div data-trpl-widget="calendar"></div>
Embed on trlibrary.com
Add the script once per page (footer is fine), then place any of the containers above:
<script src="https://ticketing.labs.trlibrary.com/widgets/trpl-tickets.js" defer></script>
These are the exact production embed codes.
Brand fonts resolve automatically where the site loads them; colors/fonts overridable via
--trpl-tw-* CSS variables (see README). Staff: see the sell-out monitor.
7. Floating banner (via Google Tag Manager)
Docks lower-left sitewide; shows only on medium+ risk days; dismiss hides it for the
rest of the day across pages. Loaded on this demo — look at the corner (clear the dismissal in
DevTools with localStorage.removeItem('trplFloatDismissed')).
<script>window.TRPL_FLOAT = { minRisk: "medium" };</script>
<script src="https://ticketing.labs.trlibrary.com/widgets/trpl-float.js" async></script>