Embeds
Ullr embeds put your live mountain conditions on your own website. Each one is a custom HTML element: add a script tag, drop the element on the page, and it renders current trail, lift and terrain park status straight from Ullr.
There is no build step, no npm package and no framework requirement. They work in WordPress, Squarespace, Webflow, a hand-written HTML page, or a React app.
The four embeds
The full experience — map plus browsable features, trails, lifts and reports.
Conditions widgetJust the map, with the layers you choose.
Interactive mapA sortable trail status table. Also runs full-screen on a TV.
Trail listA sortable lift status table.
Lift listHow they work
<script type="module" src="https://widget.ullr.ski/web-components/ullr-trail-list.js"></script>
<ullr-trail-list
apiKey="1a2b3c4d5e6f.yourPublishableKey"
areaId="your-area-id"
sport="SNOW"
></ullr-trail-list>The script defines the custom element. The element fetches from the Ullr Public API using your publishable key and renders itself inside a shadow DOM, so your site’s CSS cannot leak in and the embed’s CSS cannot leak out. Nothing you write can accidentally restyle it, and it cannot accidentally restyle you.
Each embed is a separate script. Use two embeds on a page, include two scripts — shared code downloads only once.
Before you start
You need two things:
- An area id. Ask Ullr support, or read it out of the dashboard URL.
- A publishable API key with the right scopes, restricted to your domain. See Keys & domains.
The fastest route to both is the Ullr dashboard: Integrations → pick an embed → configure it visually → copy the generated snippet. These pages document what that snippet contains and every option the configurator does not expose.
Rules that apply to all four
Attribute names are camelCase with no hyphens. areaId works, areaid
works (HTML lowercases attributes), but area-id does not — the element
will behave as though you passed nothing at all. This trips up everyone who
expects the usual custom-element convention.
type="module"is required on the script tag. The bundles are ES modules.- Booleans are the strings
"true"and"false"—showTrails="true". Attribute presence alone is not enough. - Attributes are read once, when the element is added to the page. Changing an attribute afterwards does nothing. To change a setting at runtime, remove the element and add a fresh one.
- The map-based embeds need a height. The conditions widget and interactive
map fill their container and collapse to nothing without one — give them
style="display:block;position:relative;height:600px"or an equivalent CSS rule. The two list embeds size themselves.