Plaats met één regel code een live weerkaart op elke website — je hoeft geen weer-backend te bouwen en er zijn geen API-sleutels zichtbaar in de browser. Perfect voor woningaanbod, reis- en evenementenpagina’s, locaties en dashboards.
Het probleem
Als je een website beheert, betekent het tonen van actueel lokaal weer meestal dat je je moet aanmelden voor een weer-API, servercode moet schrijven om dit te proxyen, reacties moet cachen om je quotum niet te overschrijden, en sleutels uit client-side code moet houden. Dat is een heel project. Terwijl je alleen maar een kaartje wilde.
Hoe het werkt
Sluit een custom element in en je bent klaar:
<script
src="https://app.weatherintouch.com/embed.js"
data-api-base="https://api.weatherintouch.com"
></script>
<wx-weather-card
lat="50.08"
lon="14.44"
lang="en"
theme="auto"
></wx-weather-card>
De kaart wordt gerenderd in een Shadow DOM, waardoor de stijlen nooit botsen met de CSS van je site. Het toont de huidige weersomstandigheden en, optioneel, een korte weersverwachting. Liever een iframe? Er is een variant die de hoogte automatisch aanpast via postMessage. De configuratie verloopt volledig via attributen — coördinaten, taal, thema en je API-sleutel.
Waarom het anders is
- Gedeelde cache. Je widget leest uit dezelfde cache voor weersverwachtingen als de hoofdapp. Een kaart op jouw site en het tabblad van de hoofdapp van een bezoeker op dezelfde coördinaten kosten één upstream call — geen twee.
- Geen uitgelekte sleutels. Het batch-endpoint van de backend levert de data; je API-sleutel is afgebakend en domeingebonden (origin-restricted), nooit een ruwe provider-sleutel in de pagina.
- Geen style bleed. Door de isolatie van de Shadow DOM ziet de kaart er op elke site hetzelfde uit.
- Origin allow-list per tenant. Je bepaalt precies welke domeinen jouw kaart mogen renderen.
Prijzen
De insluitbare widget is een Pro-functie — het bevat een API-sleutel per tenant en een origin allow-list, zodat je het op al je websites kunt implementeren.
FAQ
Hoe sluit ik het in? Voeg de script-tag en een <wx-weather-card>-element met je coördinaten toe — of gebruik de iframe-variant.
Custom element of iframe? Het custom element integreert naadlozer (thema’s, lay-out); het iframe is het meest geïsoleerd en de eenvoudigste drop-in.
Kan ik het thema aanpassen? Ja — theme="auto|light|dark" en de kaart neemt waar mogelijk je accentkleur over.
Wat zijn de rate limits? Het batch-endpoint is gelimiteerd (throttled) en cache-first; normaal insluiten blijft ruim binnen de limieten omdat identieke coördinaten worden ontdubbeld.
Moet ik Weather InTouch vermelden? Ja — de kaart bevat een kleine bronvermelding, in overeenstemming met de voorwaarden van onze dataleveranciers.