วิดเจ็ตแบบฝัง

วางการ์ดสภาพอากาศแบบเรียลไทม์ลงบนเว็บไซต์ใดก็ได้ด้วยโค้ดเพียงบรรทัดเดียว — ไม่ต้องสร้างระบบหลังบ้านสำหรับสภาพอากาศ ไม่ต้องเปิดเผย API key ในเบราว์เซอร์ เหมาะอย่างยิ่งสำหรับเว็บไซต์อสังหาริมทรัพย์ หน้าการท่องเที่ยวและกิจกรรม สถานที่จัดงาน และแดชบอร์ด

ปัญหาที่พบ

หากคุณดูแลเว็บไซต์ การแสดงสภาพอากาศในพื้นที่แบบเรียลไทม์มักหมายถึงการต้องสมัครใช้งาน weather API, เขียนโค้ดเซิร์ฟเวอร์เพื่อทำพร็อกซี, ทำแคชข้อมูลเพื่อไม่ให้ใช้โควตาจนหมด และต้องซ่อน key ไม่ให้อยู่ในโค้ดฝั่งไคลเอนต์ นั่นคือโปรเจกต์ใหญ่เลยทีเดียว ทั้งที่คุณแค่ต้องการการ์ดแสดงสภาพอากาศเท่านั้น

วิธีการทำงาน

ฝัง 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 key ของคุณ

ทำไมถึงแตกต่าง

• Shared cache. วิดเจ็ตของคุณจะอ่านข้อมูลจากแคชพยากรณ์อากาศเดียวกันกับแอปหลัก การ์ดบนเว็บไซต์ของคุณและแท็บแอปหลักของผู้เข้าชมที่อยู่ในพิกัดเดียวกัน จะนับเป็นการเรียกใช้ข้อมูลจากต้นทางเพียง ครั้งเดียว — ไม่ใช่สองครั้ง
• No key leakage. ข้อมูลจะถูกส่งผ่าน batch endpoint จากระบบหลังบ้าน API key ของคุณจะถูกจำกัดขอบเขตและจำกัดโดเมน (origin) ที่ใช้งานได้ โดยจะไม่มีการเปิดเผย key ดิบของผู้ให้บริการบนหน้าเว็บเด็ดขาด
• No style bleed. การแยกส่วนด้วย Shadow DOM ช่วยให้การ์ดแสดงผลได้เหมือนกันในทุกเว็บไซต์โดยที่สไตล์ไม่ผิดเพี้ยน
• Per-tenant origin allow-list. คุณสามารถควบคุมได้อย่างแม่นยำว่าโดเมนใดบ้างที่ได้รับอนุญาตให้แสดงการ์ดของคุณ

ราคา

วิดเจ็ตแบบฝังเป็นฟีเจอร์สำหรับแพ็กเกจ Pro — ซึ่งรวมถึง API key ประจำบัญชีและรายการโดเมนที่อนุญาต (origin allow-list) เพื่อให้คุณสามารถนำไปใช้งานกับเว็บไซต์ต่างๆ ของคุณได้

คำถามที่พบบ่อย

ฉันจะฝังวิดเจ็ตได้อย่างไร? เพิ่มแท็ก script และอิลิเมนต์ <wx-weather-card> พร้อมระบุพิกัดของคุณ — หรือจะใช้รูปแบบ iframe ก็ได้

ควรใช้ Custom element หรือ iframe ดี? Custom element จะผสานการทำงานได้แนบเนียนกว่า (ทั้งเรื่องธีมและเลย์เอาต์) ส่วน iframe จะแยกส่วนการทำงานได้ดีที่สุดและนำไปวางใช้งานได้ง่ายที่สุด

ฉันสามารถปรับแต่งธีมได้ไหม? ได้แน่นอน — ใช้ theme="auto|light|dark" และการ์ดยังรองรับการใช้สีเน้น (accent color) ของคุณในจุดที่สามารถใช้ได้อีกด้วย

มีการจำกัดอัตราการเรียกใช้งาน (Rate limits) หรือไม่? batch endpoint มีการควบคุมปริมาณการใช้งานและเน้นการดึงข้อมูลจากแคชเป็นหลัก (cache-first) การฝังวิดเจ็ตตามปกติจะอยู่ภายใต้ขีดจำกัดอย่างแน่นอน เนื่องจากพิกัดที่ซ้ำกันจะถูกรวบยอดเพื่อลดความซ้ำซ้อน (de-duplicated)

ฉันต้องให้เครดิต Weather InTouch หรือไม่? ใช่ — การ์ดจะมีลิงก์ให้เครดิตเล็กๆ แนบอยู่ ซึ่งเป็นไปตามข้อกำหนดของผู้ให้บริการข้อมูลของเรา