Drop one script tag on any page, then use the elements. Styling via CSS variables on the element (--tg-accent etc.).
<script type="module" src="https://embed.23groups.com/v1/groups.js"></script> <tg-leaderboard board="bgc.points" scope="property" window="week" limit="10" tabs></tg-leaderboard> <tg-leaderboard board="bgc.points" scope="groups" window="month"></tg-leaderboard> <tg-leaderboard board="bgc.points" scope="group:grp_…" live></tg-leaderboard> <tg-group-badge group="grp_…"></tg-group-badge> <tg-awards sub="…" compact></tg-awards> <tg-awards group="grp_…"></tg-awards> <tg-join-button group="grp_…" label="Join Team X"></tg-join-button> <tg-qr code="…" size="200" label="Scan to join"></tg-qr>
Signed-in context on a property page: your backend calls POST /v1/embed-token (service account) and passes the result as token="…"; the leaderboard then highlights the viewer. Iframe fallback: https://23groups.com/embed/leaderboard?board=bgc.points&scope=property&window=week.