Skip to Content
EmbedsTroubleshooting

Troubleshooting

Almost every embed problem is one of six things. Open your browser’s developer tools — the console and the network tab tell you which straight away.

The embed is completely blank

Check the console first

The element logs a plain-English error when a required attribute is missing:

"apiKey" is a required attribute

If you see that, the attribute is either absent or spelled with a hyphen.

Ullr embed attributes are camelCase: apiKey, areaId, showTrails. The hyphenated form usual for custom elements — api-key, area-id — is not recognised, and the element behaves as though you passed nothing. This is the single most common cause of a blank embed.

areaid and apikey (all lowercase) do work, because HTML lowercases attribute names. It is only the hyphens that break.

Check the script tag

<script type="module" src="https://widget.ullr.ski/web-components/ullr-trail-list.js"></script>
  • type="module" must be present. Without it the bundle will not execute.
  • The filename must match the element: ullr-widget.js for <ullr-widget>, ullr-map.js, ullr-trail-list.js, ullr-lift-list.js.
  • One script per element type you use.

Check the height

The conditions widget and interactive map fill their container. With no height, that container is zero pixels tall and the embed is invisible though present in the DOM. Give it style="display:block;position:relative;height:600px".

The two list embeds size themselves and do not need this.

The embed loads but shows no data

Look at the network tab for requests to api.ullr.ski.

401 Unauthorized

The key is missing, mistyped, revoked or expired.

  • A key is {id}.{secret} — both halves, including the dot. A truncated paste is the usual culprit.
  • Check the key still exists and is not revoked in Integrations → API keys.

403 Forbidden

The key is real but not allowed to do this.

  • Missing scope. Compare what the endpoint needs against the scopes on the key — see Keys & domains. A map with showLifts="true" needs lifts:read, and so on.
  • Domain not allowed. If the key has allowed domains set, your site’s hostname must match one of them. Remember *.example.com does not match the bare example.com.
  • Missing module. Lifts need the GIS module on the area’s subscription; trail history needs Trail Management. Ask support if you are unsure.

Empty list, no error

The key is fine and the request succeeded — there is simply nothing to show. A trail list is empty when no trails are published for that sport at that area. Check the sport attribute: SNOW and BIKE have entirely separate data, and a winter area queried with sport="BIKE" legitimately returns nothing.

Changing an attribute does nothing

Attributes are read once, when the element is added to the page. There is no attributeChangedCallback, so setting element.setAttribute('units', 'metric') afterwards has no effect.

To change a setting at runtime, replace the element:

const old = document.querySelector('ullr-trail-list');
const next = old.cloneNode();
next.setAttribute('units', 'metric');
old.replaceWith(next);

In React, change the element’s key so it remounts:

<ullr-trail-list key={units} units={units} … />

The data looks out of date

Responses are cached at the edge for up to 15 minutes, so a status change made in the field can take that long to appear. Refreshing the page more often does not help — the cached response is what gets served.

If genuinely fresher data matters for your use case, get in touch; the cache lifetime is a server-side setting.

The embed looks wrong on my site

Embeds render inside a shadow DOM, which means your site’s CSS cannot reach inside them — and that is deliberate. If an embed looks broken, the cause is almost always layout rather than styling: the container is too narrow, too short, or inside a parent with overflow: hidden.

To change the embed’s own appearance, use theme="#RRGGBB" (all four embeds accept it) and the column and layer attributes.

Nothing above matches

Send us the page URL, the element and its attributes (redact the key’s second half), and whatever the console and network tab show: info@ullr.ski.

TVs & kiosks