只需一行代码，即可在任何网站上添加实时天气卡片——无需构建天气后端，也不会在浏览器中暴露 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"，并且卡片会在适用时遵循您的强调色。
速率限制是多少？ 批量接口具有节流机制且缓存优先；由于相同坐标的请求会被去重，正常的嵌入使用将远低于限制标准。
我需要标注 Weather InTouch 吗？ 是的——根据我们的数据提供商条款，卡片上会带有一个小型的署名链接。