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>
Reservation calendar
Year-at-a-glance heatmap of how full each day has been, built from the permanent archive: calendar.html. Fills in as the season progresses; next season it will show last year's pattern on future dates.
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.
6. 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>