Додайте картку з актуальною погодою на будь-який сайт за допомогою одного рядка коду — без створення бекенду для погоди та без ризику розкриття API-ключів у браузері. Ідеально підходить для сайтів нерухомості, туристичних сторінок, анонсів подій, локацій та дашбордів.
Проблема
Якщо ви керуєте сайтом, показ актуальної місцевої погоди зазвичай означає реєстрацію в погодному API, написання серверного коду для проксіювання, кешування відповідей, щоб не перевищити ліміти, та приховування ключів від клієнтського коду. Це цілий проєкт. А вам потрібна була лише картка.
Як це працює
Вбудуйте кастомний елемент — і готово:
<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
Як його вбудувати? Додайте тег script та елемент <wx-weather-card> із вашими координатами — або скористайтеся варіантом з iframe.
Кастомний елемент чи iframe? Кастомний елемент інтегрується тісніше (теми, верстка); iframe — максимально ізольований і найпростіший у встановленні.
Чи можна змінювати тему? Так — theme="auto|light|dark", до того ж картка підтримує ваші акцентні кольори там, де це можливо.
Які існують ліміти запитів? Пакетний ендпоінт має обмеження частоти запитів і працює за принципом cache-first; звичайне вбудовування не виходить за межі лімітів, оскільки однакові координати дедуплікуються.
Чи потрібно вказувати авторство Weather InTouch? Так — картка містить невелике посилання із зазначенням авторства, відповідно до умов наших постачальників даних.