एम्बेडेबल विजेट

कोड की सिर्फ एक लाइन के साथ किसी भी वेबसाइट पर लाइव वेदर कार्ड डालें — न कोई वेदर बैकएंड बनाने की झंझट, और न ही ब्राउज़र में API कीज़ (keys) के एक्सपोज़ होने का डर। रियल-एस्टेट लिस्टिंग, ट्रैवल और इवेंट पेजों, वेन्यू और डैशबोर्ड के लिए एकदम सही।

समस्या

यदि आप कोई वेबसाइट चलाते हैं, तो लाइव लोकल वेदर दिखाने का मतलब आमतौर पर किसी वेदर API के लिए साइन अप करना, उसे प्रॉक्सी करने के लिए सर्वर कोड लिखना, रिस्पॉन्स को कैश (cache) करना ताकि आपका कोटा खत्म न हो, और कीज़ (keys) को क्लाइंट-साइड कोड से दूर रखना होता है। यह अपने आप में एक बड़ा प्रोजेक्ट है। जबकि आपको सिर्फ एक कार्ड चाहिए था।

यह कैसे काम करता है

बस एक कस्टम एलिमेंट एम्बेड करें और आपका काम हो गया:

<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 के ज़रिए अपनी ऊंचाई (height) को ऑटो-साइज़ कर लेता है। कॉन्फ़िगरेशन पूरी तरह से एट्रिब्यूट्स पर आधारित है — कोऑर्डिनेट्स, भाषा, थीम और आपकी API की (key)।

यह अलग क्यों है

• शेयर्ड कैश (Shared cache)। आपका विजेट उसी फोरकास्ट कैश से डेटा पढ़ता है जिसका इस्तेमाल मुख्य ऐप करता है। आपकी साइट पर मौजूद कार्ड और विज़िटर के मुख्य-ऐप टैब पर समान कोऑर्डिनेट्स के लिए केवल एक अपस्ट्रीम कॉल का खर्च आता है — दो का नहीं।
• की (Key) लीक होने का कोई डर नहीं। बैकएंड बैच एंडपॉइंट डेटा सर्व करता है; आपकी API की (key) स्कोप्ड और ओरिजिन-प्रतिबंधित (origin-restricted) होती है, पेज में कभी भी रॉ (raw) प्रोवाइडर की नहीं होती।
• कोई स्टाइल ब्लीड नहीं। Shadow DOM आइसोलेशन का मतलब है कि कार्ड हर साइट पर एक जैसा दिखता है।
• प्रति-टेनेंट ओरिजिन अलाउ-लिस्ट। आप पूरी तरह से कंट्रोल करते हैं कि कौन से डोमेन आपका कार्ड रेंडर कर सकते हैं।

प्राइसिंग

यह एम्बेडेबल विजेट एक Pro फीचर है — इसमें एक प्रति-टेनेंट API की (key) और एक ओरिजिन अलाउ-लिस्ट शामिल है ताकि आप इसे अपनी सभी प्रॉपर्टीज़ पर डिप्लॉय कर सकें।

FAQ

मैं इसे कैसे एम्बेड करूं? स्क्रिप्ट टैग और अपने कोऑर्डिनेट्स के साथ एक <wx-weather-card> एलिमेंट जोड़ें — या iframe वैरिएंट का उपयोग करें।

कस्टम एलिमेंट या iframe? कस्टम एलिमेंट अधिक गहराई से इंटीग्रेट होता है (थीमिंग, लेआउट); iframe सबसे अधिक आइसोलेटेड और इस्तेमाल में सबसे आसान ड्रॉप-इन है।

क्या मैं इसकी थीम बदल सकता हूँ? हाँ — theme="auto|light|dark" के साथ-साथ, जहाँ लागू हो, कार्ड आपके एक्सेंट (accent) कलर को भी अपनाता है।

रेट लिमिट्स क्या हैं? बैच एंडपॉइंट थ्रॉटल्ड और कैश-फर्स्ट (cache-first) है; सामान्य एम्बेडिंग लिमिट के अंदर ही रहती है क्योंकि एक जैसे कोऑर्डिनेट्स को डी-डुप्लिकेट (de-duplicate) कर दिया जाता है।

क्या मुझे Weather InTouch को क्रेडिट देना होगा? हाँ — हमारे डेटा प्रोवाइडर्स की शर्तों के अनुसार, कार्ड में एक छोटा एट्रिब्यूशन लिंक होता है।