Добавьте карточку с актуальной погодой на любой сайт с помощью одной строки кода — без необходимости создавать погодный бэкенд или раскрывать API-ключи в браузере. Идеально подходит для сайтов недвижимости, туристических порталов, страниц мероприятий, площадок и дашбордов.
Проблема
Если у вас есть сайт, показ актуальной местной погоды обычно означает регистрацию в погодном API, написание серверного кода для проксирования, кэширование ответов (чтобы не превысить лимиты) и скрытие ключей от клиентского кода. Это целый проект. А вам просто нужна была карточка.
Как это работает
Встройте custom element, и всё готово:
<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>
Карточка рендерится внутри Shadow DOM, поэтому её стили никогда не конфликтуют с CSS вашего сайта. Она показывает текущую погоду и, при желании, краткий прогноз. Предпочитаете iframe? Есть вариант с автоматической подстройкой высоты через postMessage. Вся настройка выполняется через атрибуты: координаты, язык, тема и ваш API-ключ.
В чём отличия
- Общий кэш. Ваш виджет читает данные из того же кэша прогнозов, что и основное приложение. Карточка на вашем сайте и открытая вкладка основного приложения у посетителя с теми же координатами требуют одного запроса к провайдеру, а не двух.
- Никакой утечки ключей. Данные отдаются через пакетный эндпоинт на бэкенде; ваш API-ключ имеет ограниченную область действия и привязан к домену. Исходный ключ провайдера никогда не попадает на страницу.
- Никакого конфликта стилей. Изоляция через Shadow DOM гарантирует, что карточка выглядит одинаково на любом сайте.
- Белый список доменов для каждого клиента. Вы сами контролируете, на каких именно доменах разрешено отображать вашу карточку.
Тарифы
Встраиваемый виджет доступен на тарифе Pro — он включает индивидуальный API-ключ и белый список доменов, чтобы вы могли использовать виджет на всех своих ресурсах.
FAQ
Как встроить виджет? Добавьте тег скрипта и элемент <wx-weather-card> с вашими координатами — или используйте вариант с iframe.
Custom element или iframe? Custom element интегрируется более тесно (темизация, верстка); iframe — максимально изолированный и самый простой вариант для вставки.
Можно ли менять тему оформления? Да — с помощью theme="auto|light|dark", к тому же карточка адаптируется под ваши акцентные цвета там, где это применимо.
Каковы лимиты запросов? Пакетный эндпоинт имеет ограничения частоты запросов и работает по принципу cache-first; при обычном использовании вы легко уложитесь в лимиты, так как запросы с одинаковыми координатами дедуплицируются.
Нужно ли указывать авторство Weather InTouch? Да — на карточке есть небольшая ссылка с указанием авторства, что соответствует условиям наших поставщиков данных.