How the Library Works: embed codes

Staff notes. Paste any of these into a code block on a trlibrary.com page. The model loads lazily and sizes itself to the page column. Full-screen version: lbcsystems.labs.trlibrary.com.

All systems (overview with tabs)

<div id="trpl-lbcsystems"></div>
<script src="https://lbcsystems.labs.trlibrary.com/embed.js" defer></script>

One system only

Use data-layer with energy, water or carbon. Add data-lock="on" to hide the other tabs.

<div id="trpl-lbc-water"></div>
<script src="https://lbcsystems.labs.trlibrary.com/embed.js" data-target="#trpl-lbc-water" data-layer="water" data-lock="on" defer></script>

Open on a specific stop

Stops are numbered as they appear in the panel. Example: the geothermal wells (Energy, stop 2).

<div id="trpl-lbc-wells"></div>
<script src="https://lbcsystems.labs.trlibrary.com/embed.js" data-target="#trpl-lbc-wells" data-layer="energy" data-stop="2" data-lock="on" defer></script>

Model only (no text panel)

For a hero area or a page that carries its own copy. Pair with data-height.

<div id="trpl-lbc-hero"></div>
<script src="https://lbcsystems.labs.trlibrary.com/embed.js" data-target="#trpl-lbc-hero" data-layer="carbon" data-panel="off" data-height="560" defer></script>

Direct links

Stop numbers: Energy 1–6, Water 1–9, Carbon 1–7. Content lives in assets/content.js.