Skip to Content
EmbedsTVs & kiosks

TVs & kiosks

A screen in the base lodge showing what is open is one of the most useful things you can do with Ullr. Both list embeds are built for it: they can scroll themselves, scale up for distance reading, and run for a season without anyone touching them.

Two ways to do it — a hosted page, or your own.

The hosted page (easiest)

Ullr hosts a full-screen trail list. Point a browser at a URL and you are done — no HTML, no hosting, no deploy.

https://app.ullr.ski/embed/v1/trail-list?apiKey=1a2b3c4d5e6f.yourKey&areaId=your-area-id&autoScroll=true&scale=2
Screenshot pending — The hosted full-screen trail list running on a TV
public/img/embeds/kiosk-trail-list.png
The hosted trail list page, scaled up and auto-scrolling for a lodge display.

The page reloads itself every five minutes, so a TV left on all season keeps showing current status even if the tab is never touched.

Query parameters

The hosted page accepts the same options as the element, as query parameters:

ParameterRequiredDefault
apiKeyYes—
areaIdYes—
sportNoSNOW
visibleColumnsNoall columns
sortableColumnsNoall sortable
sortColumnsNostatus:asc,name:asc
unitsNoimperial
autoScrollNofalse
autoScrollSpeedNo30
autoScrollPageDurationNo10000
scaleNo1
themeNosport default
timestampNolive
enableEventsTrailSelectionNofalse

See Trail list for what each one does.

Parameter names are case-sensitive camelCase here — autoScroll works, autoscroll is silently ignored. Anything not on this list is dropped, and empty values are treated as absent. Missing apiKey or areaId shows an “Embed misconfigured” screen rather than a blank page.

The URL contains your API key, so the page tells search engines not to index it. Do not link to it from your public site — and do use a domain-restricted publishable key.

Your own page

If you want two lists on one screen, your own branding, or a layout of your own, build a page with the elements directly:

lodge-display.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Conditions</title>
    <!-- Reload every 5 minutes so an unattended screen stays current. -->
    <meta http-equiv="refresh" content="300" />
    <script type="module" src="https://widget.ullr.ski/web-components/ullr-trail-list.js"></script>
    <script type="module" src="https://widget.ullr.ski/web-components/ullr-lift-list.js"></script>
    <style>
      body { margin: 0; display: grid; grid-template-columns: 1fr 1fr; height: 100vh; }
    </style>
  </head>
  <body>
    <ullr-trail-list
      apiKey="1a2b3c4d5e6f.yourKey"
      areaId="your-area-id"
      sport="SNOW"
      visibleColumns="status,name,surface"
      sortableColumns=""
      autoScroll="true"
      autoScrollSpeed="30"
      scale="2"
    ></ullr-trail-list>
 
    <ullr-lift-list
      apiKey="1a2b3c4d5e6f.yourKey"
      areaId="your-area-id"
      sport="SNOW"
      visibleColumns="status,name,liftType"
      sortableColumns=""
      autoScroll="true"
      scale="2"
    ></ullr-lift-list>
  </body>
</html>

Settings that matter on a big screen

  • scale — 2 or 3. This is a visual zoom on the whole list; pick the value that is readable from where people stand, not from your desk.
  • autoScroll="true" with autoScrollSpeed (pixels per second, default 30) and autoScrollPageDuration (pause per screenful in milliseconds, default 10000). Slower is easier to read than you expect — try 20.
  • sortableColumns="" — makes the table read-only so nobody can leave it sorted oddly. Worth doing on any touchscreen.
  • visibleColumns — fewer columns, bigger text. status,name is often enough at distance.
  • Refresh. The hosted page reloads every 5 minutes. On your own page, add <meta http-equiv="refresh" content="300" />.

Data is cached for up to 15 minutes at the edge, so refreshing faster than that will not make status appear sooner. Five minutes is a good balance.

Lift listTroubleshooting