Pasang kartu cuaca langsung di situs web mana pun hanya dengan satu baris kode — tanpa perlu membangun backend cuaca, tanpa kunci API yang terekspos di browser. Sempurna untuk daftar real estat, halaman perjalanan dan acara, lokasi, serta dasbor.
Masalah
Jika Anda mengelola situs web, menampilkan cuaca lokal secara langsung biasanya berarti Anda harus mendaftar ke API cuaca, menulis kode server sebagai proksi, melakukan caching respons agar kuota tidak habis, dan menjaga agar kunci API tidak masuk ke kode sisi klien. Itu sudah jadi proyek tersendiri. Padahal, Anda hanya butuh sebuah kartu.
Cara kerjanya
Sematkan elemen kustom dan semuanya selesai:
<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>
Kartu ini di-render di dalam Shadow DOM, sehingga gayanya tidak akan pernah bentrok dengan CSS situs Anda. Kartu ini menampilkan kondisi cuaca saat ini dan, secara opsional, prakiraan cuaca singkat. Lebih suka menggunakan iframe? Tersedia varian yang menyesuaikan tinggi secara otomatis melalui postMessage. Semua konfigurasi menggunakan atribut — koordinat, bahasa, tema, dan kunci API Anda.
Mengapa ini berbeda
- Cache bersama. Widget Anda membaca dari cache prakiraan yang sama dengan aplikasi utama. Sebuah kartu di situs Anda dan tab aplikasi utama pengunjung pada koordinat yang sama hanya memakan satu panggilan upstream — bukan dua.
- Tanpa kebocoran kunci. Endpoint batch backend menyajikan data; kunci API Anda dibatasi cakupannya dan dibatasi asal domainnya (origin-restricted), tidak pernah berupa kunci penyedia mentah di halaman tersebut.
- Tanpa kebocoran gaya. Isolasi Shadow DOM memastikan kartu terlihat sama di setiap situs.
- Daftar izin asal (allow-list) per tenant. Anda memegang kendali penuh atas domain mana saja yang boleh me-render kartu Anda.
Harga
Widget sematan ini adalah fitur Pro — sudah termasuk kunci API per tenant dan daftar izin asal sehingga Anda dapat memasangnya di seluruh properti Anda.
FAQ
Bagaimana cara menyematkannya? Tambahkan tag script dan elemen <wx-weather-card> dengan koordinat Anda — atau gunakan varian iframe.
Elemen kustom atau iframe? Elemen kustom terintegrasi lebih erat (tema, tata letak); iframe adalah yang paling terisolasi dan paling mudah dipasang.
Bisakah saya mengubah temanya? Ya — theme="auto|light|dark" ditambah lagi kartu ini akan menyesuaikan dengan warna aksen Anda jika memungkinkan.
Apa batas permintaannya (rate limit)? Endpoint batch dibatasi (throttled) dan mengutamakan cache; penyematan normal akan tetap berada dalam batas aman karena koordinat yang identik akan dideduplikasi.
Apakah saya perlu mencantumkan kredit untuk Weather InTouch? Ya — kartu ini menyertakan tautan atribusi kecil, sesuai dengan ketentuan penyedia data kami.