Añade una tarjeta meteorológica en directo a cualquier sitio web con una sola línea de código: sin tener que crear un backend meteorológico ni exponer claves de API en el navegador. Ideal para anuncios inmobiliarios, páginas de viajes y eventos, recintos y paneles de control.
El problema
Si gestionas un sitio web, mostrar el tiempo local en directo suele implicar registrarse en una API meteorológica, escribir código de servidor para hacer de proxy, almacenar las respuestas en caché para no agotar tu cuota y mantener las claves fuera del código del cliente. Todo un proyecto. Y tú solo querías una tarjeta.
Cómo funciona
Incrusta un elemento personalizado y listo:
<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>
La tarjeta se renderiza dentro de un Shadow DOM, por lo que sus estilos nunca entran en conflicto con el CSS de tu sitio. Muestra las condiciones actuales y, opcionalmente, una previsión breve. ¿Prefieres un iframe? Hay una variante que ajusta automáticamente su altura mediante postMessage. Toda la configuración se hace por atributos: coordenadas, idioma, tema y tu clave de API.
Por qué es diferente
- Caché compartida. Tu widget lee de la misma caché de previsiones que la aplicación principal. Una tarjeta en tu sitio y la pestaña de la app principal de un visitante en las mismas coordenadas cuestan una sola llamada al servidor de origen, no dos.
- Sin filtración de claves. El endpoint por lotes del backend sirve los datos; tu clave de API tiene un alcance limitado y está restringida por origen, nunca es una clave de proveedor expuesta directamente en la página.
- Sin interferencia de estilos. El aislamiento del Shadow DOM hace que la tarjeta se vea igual en todos los sitios.
- Lista de orígenes permitidos por cuenta. Tú controlas exactamente qué dominios pueden renderizar tu tarjeta.
Precios
El widget integrable es una función Pro: incluye una clave de API por cuenta y una lista de orígenes permitidos para que puedas implementarlo en todas tus propiedades.
FAQ
¿Cómo lo integro? Añade la etiqueta script y un elemento <wx-weather-card> con tus coordenadas, o utiliza la variante iframe.
¿Elemento personalizado o iframe? El elemento personalizado se integra de forma más estrecha (temas, diseño); el iframe es la opción más aislada y la más fácil de implementar.
¿Puedo personalizar el tema? Sí: theme="auto|light|dark" y, además, la tarjeta respeta tu color de acento cuando corresponde.
¿Cuáles son los límites de uso? El endpoint por lotes tiene límite de velocidad y prioriza la caché; la integración normal se mantiene muy por debajo de los límites porque las coordenadas idénticas se deduplican.
¿Tengo que dar crédito a Weather InTouch? Sí: la tarjeta incluye un pequeño enlace de atribución, de acuerdo con las condiciones de nuestros proveedores de datos.