如何将实时日落预测小部件添加到您的网站

您的访问者不必打开其他天气应用来决定今晚是否值得计划。日落预测小部件将在您的网站上直接提供答案，位于他们正在查看的房间、目的地、网络摄像头或摄影信息旁边。

Sunset Predictor Widgets 将固定位置转换为自动更新的预测，您可以嵌入其中，无需构建自己的天气整合系统。结果是为旅游出版商、酒店、餐馆、旅游网站、网络摄像头页面和摄影师提供简洁实用的功能。个人网站可以使用免费计划；商业网站需要付费计划，酒店可以从免费30天试用开始。

在继续阅读之前先看看它：

• 打开小部件构建器 并在实时预览中更改主题、大小和布局——无需帐户。
• 并排浏览每个大小和主题 在小部件展示中。
• 查看在现实网站中的小部件：旅行博客、酒店主页、餐厅露台和直播网络摄像头页面。

日落预测小部件展示了什么

每个小部件为访问者提供了他们需要一眼了解的核心信息：

• 从0到100的日落质量评分
• 明确的评级：史诗、良好、一般或差
• 所选位置的当地日落时间
• 位置名称或您自己的显示标签
• 解释预测的可选句子
• 自定义大小中的可选天气详情

分数以带颜色编码的圆环展示，卡片背景跟随评级，因此访问者可以在读取数字前了解前景。例如，圣托里尼的酒店可以显示Oia的预测，而旧金山的网络摄像头运营商则可以标记相同类型小部件为“金门大桥景观”。

自定义大小还可以显示选定的天气条件：温度、云量、降雨概率、湿度、风、能见度、压力和空气质量。您可以选择显示哪些值以及访问者看到它们的顺序。

每个小部件都链接到邻近城市的Sunset Predictor预测页面（或在无邻近城市时链接到Sunset Predictor主页），好奇的访问者可以在不离开您的页面的情况下打开完整的前景页面。

日落小部件与常规天气小部件的比较

常规天气小部件会显示温度、降雨和风。它不会告诉访问者日落是否值得观看：这取决于在日落时间不同高度的云量、湿度、能见度和空气质量的叠加。日落小部件将这些条件转化为一个得分和一个评级，因此访问者在无需读取预测表的情况下获得答案。如果您的访问者还需要一般天气，自定义大小可以在得分下方添加一个天气网格。

三种尺寸，三种主题

最快速的比较选项的方法是小部件展示，它展示了来自每个评分段的示例评分的所有九种组合。

尺寸	展示内容	典型位置
紧凑型	一行：评分、评级、日落时间、位置	标题或页脚条、狭窄侧边栏、视频播放器旁
标准型	评分环、评级、日落时间、位置、可选说明	侧边栏、预订框、文章列
自定义型	标准型的所有内容加上您配置的天气网格	内容列、摄影指南、条件页面

每种尺寸都可与 浅色、深色 或 自动 主题配合使用。自动模式遵循访问者的系统设置，适合已经在浅色和深色模式之间切换的网站。

为什么在您的网站中添加日落小部件？

当日落条件影响您的访问者计划做的事情时，小部件最具价值。目的地指南可以描述在哪里观看日落；小部件回答今晚是否看起来有希望，而访问者无需离开您的页面去搜索其他地方。

添加功能无需维护预测系统

天气数据、评分、标签、时间格式和自动刷新都为您处理。安装只是一个短的嵌入代码段，而不是带有自己界面、错误处理和持续维护的自定义API项目。

如果您确实想构建自己的界面，您可以通过 Sunset Predictor API 获取相同的预测。

将小部件融入您的现有设计

主题、大小、强调色、宽度和诸如“西部露台”这样的访客友好标签使小部件与您的页面相匹配。小部件与您网站的样式表隔离。您自己的CSS规则（例如链接、内边距或字体）无法扭曲它，它的样式也不会泄漏到您的页面。

服务于国际访问者

小部件支持14种语言：英语、法语、德语、西班牙语、俄语、葡萄牙语、日语、罗马尼亚语、乌克兰语、阿拉伯语、希伯来语、简体中文、印地语和意大利语。阿拉伯语和希伯来语小部件自动从右到左渲染。您还可以选择公制或英制单位以及12小时或24小时制。

如何创建您的第一个小部件

您可以在登录前尝试构建器和实时预览。只有在您想要保存小部件并接收其嵌入代码时才需要帐户。

1. 打开小部件构建器

打开 Sunset Predictor 小部件构建器 并尝试公共预览。您更改主题、大小、布局、颜色、语言和其他显示设置预览即更新。拖动预览分数滑块以查看每个评分段的外观，并切换插槽宽度（240 px、320 px、400 px 或全宽）以测试狭窄和宽位置。

提示：您可以通过在地址中添加坐标（例如 [里斯本的构建器预设](/widgets/?lat=38.7223&lon=-9.1393&name=Lisbon））打开已经选择您城市的构建器。

准备保存后，登录或创建一个免费帐户。在您的小部件面板中，选择 创建小部件。免费计划涵盖个人、非商业网站上的一个小部件；对于商业网站，请选择 付费计划。

2. 为您的仪表板命名小部件

输入一个简短的内部名称，例如“里斯本酒店主页”或“布赖顿网络摄像头”。访问者将查看所选位置标签，而不是该管理名称，因此请使用有助于团队稍后识别小部件的名称。

3. 搜索预测位置

至少输入三个字符并从结果中选择正确的城市。选择的坐标确定预测和当地日落时间。

您还可以输入一个可选的显示名称。当面向公众的地点比城市结果更具体或更熟悉时，这很有用。例如：

• 使用“我们的屋顶景观”代替“罗马尼亚布加勒斯特”
• 使用“科帕卡巴纳海滩”代替“巴西里约热内卢”
• 使用“北岸摄像头”代替最近的市镇

选择时请小心：小部件的预测位置在创建后无法更改。如需更改地点，请创建一个新小部件。显示名称仍可编辑。

4. 选择小部件将要放置的位置

构建器会询问 它将要放在哪里？ 并提供四个一键预设。每个预设将尺寸、宽度和描述一起设置，您可以在之后微调。

预设	尺寸	宽度	描述
侧边栏	标准	固定300 px	关闭
内容列	自定义	填满列，最高达800 px	开启
标题或页脚条	紧凑型	填满条	关闭
预订框	标准	填满框	开启

在没有自定义大小的计划中，内容列预设使用标准大小，描述打开。

在 宽度 下，选择 固定（220–480 px）或 填满容器，可选择最大宽度，并将小部件对齐到其空间的起始或中心。小部件适应实际接收的宽度，而不是屏幕大小：

• 低于260 px时，它切换到窄布局和较小的环。
• 从480 px宽度起，说明和天气细节移动到分数旁边而不是下方。

固定宽度的小部件在其容器更窄时仍会缩小，因此不会在手机上溢出。

5. 选择外观和信息

最佳设置取决于小部件将出现的位置：

设置	选项	实用指导
主题	浅色、深色、自动	当主办网站已经遵循访客的系统主题时，使用自动。
尺寸	紧凑型、标准型、自定义型	紧凑型适合条和紧凑空间；标准型平衡细节和空间；自定义型添加天气网格。
强调色	预设或自定义颜色	匹配品牌颜色，同时保持足够对比度于分数环周围。
描述	开启或关闭	添加有关预测为何获得其分数的简短说明。紧凑型中不可用。
语言	支持的14种语言	与小部件将出现页面的语言相匹配。
单位	公制或英制	选择您的访问者期待的格式。
时间	12小时或24小时	符合您网站其他地方使用的惯例。
刷新	15至120分钟	可用频率取决于账户计划。
品牌	显示或隐藏“由Sunset Predictor提供支持”的页脚	在专业、商业和企业计划中可以隐藏。

对于自定义大小，选择并重新排序对您的受众重要的天气细节。摄影师可能优先考虑云层、可见度和降雨概率。酒店可能更喜欢温度、云层和风。

6. 创建小部件并复制嵌入代码

选择 创建小部件。下一屏显示保存的预览和三个安装选项卡：脚本标签、iFrame 和 WordPress。

嵌入选项	最适合	需要了解的事项
脚本标签	大多数网站和自定义布局	异步加载并直接在页面中呈现小部件，与您的CSS隔离。
iFrame	阻止第三方脚本的网站构建器和CMS平台	将小部件保留在自己的文档中。附带的监听器自动调整框架高度。
WordPress	任何WordPress网站，无论是区块编辑器还是经典编辑器	含有逐步WordPress说明的iframe代码。无需插件。

脚本标签选项如下所示，您的唯一小部件ID会自动插入：

<script src="https://sunset-predictor.com/api/widget/embed.js?v=3"
        data-widget-id="wgt_your_widget_id"
        async></script>
<a href="https://sunset-predictor.com/location/your-city/?ref=widget_seo">Sunset forecast for Your City</a>

脚本直接在其后插入小部件，因此无需单独的容器元素。在其下的小文本链接是指向您位置的预测页面的简单归因链接。即使脚本被阻止，它仍然可读。企业计划可以移除此链接。

iFrame选项包含一个 <iframe> 加上一段简短的脚本，用于调整框架以适应小部件：

<iframe id="sunset-widget-wgt_your_widget_id"
        src="https://sunset-predictor.com/widget/wgt_your_widget_id"
        title="Sunset forecast for Your City"
        height="200" frameborder="0" scrolling="no"
        style="display: block; width: 100%; border: none; color-scheme: normal;"></iframe>
<script>
  /* resize listener — included automatically in the copied code */
</script>

使用 复制代码 按钮，而不是手动编辑生成的ID。

7. 将代码片段粘贴到您的网站

添加代码至您希望小部件出现的位置。具体位置取决于平台：

• 在自定义编码网站上，将其放置在相关页面模板或内容块中。
• 在WordPress中，打开 WordPress 页签。在区块编辑器中，添加一个 自定义HTML 块。在经典编辑器中，切换到 文本 页。在侧边栏或页脚，前往 外观 → 小部件 添加一个自定义HTML小部件。发布嵌入的HTML需要管理员或编辑者角色（多站点网络中的超级管理员）。
• 在Wix、Squarespace、Webflow或Elementor等页面构建器中，使用HTML、嵌入或代码元素。
• 在具有严格脚本规则的CMS中，使用 iFrame 页签。

发布或更新页面，然后打开实时URL并检查桌面和移动设备上的小部件。确认位置、语言、时钟格式、单位和间距都适合其周围的页面。

如果您的CMS阻止了嵌入代码或小部件未出现，请联系Sunset Predictor支持以获得安装帮助。

小部件上线后会发生什么？

小部件根据其配置的刷新间隔自动请求新的预测数据。您能使用的间隔时间取决于您的计划，从免费的每120分钟到企业计划的每15分钟。

从您的面板中，您可以：

• 编辑名称、标签、外观、宽度、语言、单位、时间格式和刷新间隔，无需替换嵌入代码。更改会在几分钟内出现在实时页面上。
• 查看总展示次数（小部件渲染）和点击次数（跟踪访问者点击小部件的链接）
• 再次复制嵌入代码
• 暂停、恢复或删除小部件

哪种计划适合您的网站？

免费计划允许您创建一个品牌化小部件。付费计划支持商业用途、增加小部件数量、更高的月度浏览限制、更快的刷新、自定义大小和可选的品牌去除。您可以比较当前计划和价格后再选择一个层级。

计划	小部件数量	每月浏览量	最快刷新	自定义大小	移除品牌	商业用途
免费	1	2,000	120分钟	否	否	否
专业版	5	25,000	60分钟	是	是	是
商业版	25	150,000	30分钟	是	是	是
企业版	无限	1,000,000	15分钟	是	是	是

消费者增强计划具有与免费计划相同的小部件限制。布局选项——位置预设、固定或全宽，以及对齐方式——在每个计划中都可用，包括免费计划。

如果小部件达到其月度查看上限，它将继续工作：额外的查看不再计入直至下个月，并显示Sunset Predictor品牌。流量高峰不会使您的页面出现错误状态。

请记住，活动和暂停的小部件都计入您计划允许的小部件数量。如果您不再需要一个小部件并想释放该插槽，请删除它。

小部件的实用用法

最强的放置将预测与访问者已在做的决策连接起来。下面的每个示例都链接到上下文演示页面上的实时模型。

酒店和度假村

在设施、屋顶酒吧或本地体验页面上放置一个标准小部件，或在预定表单旁使用预定框 预设。使用酒店对外名称作为显示标签，并将强调色与酒店品牌匹配。查看样本酒店主页上的小部件，或阅读酒店如何使用日落小部件，包括免费30天试用。

餐馆、酒吧和露台

拥有海景露台的餐馆在一个好日落的晚上能卖出更多的桌位。将一个带有说明的标准小部件放在“预定餐桌”按钮旁，让客人可以选择合适的时间段。 在样本餐馆露台页面上查看小部件。

旅游和目的地网站

在城市或地区指南中添加特定地点的小部件。关于巴塞罗那日落观景点的页面可以显示当前巴塞罗那的预测，而特内里费指南可以使用自己的小部件。在样本旅行博客文章中查看小部件。

网络摄像头和冲浪网站

在直播摄像头或当前条件面板附近放置一个紧凑型小部件。日落分数为视频流提供了快速的上下文而不与其竞争。 在样本网络摄像头页面上查看紧凑型小部件。

摄影指南

使用自定义大小显示云层、降雨概率、能见度和风速，与分数一起呈现。这为读者在决定是否侦查位置或携带设备时提供了更多上下文。

活动和场地页面

对于以风景为体验一部分的户外场地，小部件可以帮助访问者了解场地固定位置的日落展望。如果您的受众从简单语言解释分数中受益，请保持说明启用。

大堂屏幕和智能家居仪表盘

在大厅显示屏、接待平板、信息亭或家庭助手网页卡上打开小部件的iframe URL（iframe代码中的src地址）。即使页面保持打开几天，页面也能在计划的间隔时间内自动刷新。如果连接丢失，最后的预测会保持在屏幕上而不是出现错误页面。

更好嵌入的小贴士

在广泛发布小部件之前，请做出几个明确的选择：

1. 把它放在相关内容附近。露台描述旁的预测比隐藏在一般页脚中的更有用。
2. 使用特定的显示标签。“海湾露台”给访问者提供了比广泛城市名称更多的上下文，尤其当位置已经很明显时。
3. 保持信息密度合适。紧凑型适用于紧凑布局；自定义型适用于天气细节是页面目的的一部分时。
4. 请勿将“填满容器”小部件放置于大小随内容而变的元素中，例如内联块。请在此处为其指定固定宽度。
5. 定期查看展示情况。它们显示放置位置是否收到流量，以及您当前的计划是否仍然合适。

结论

日落预测小部件将不断变化的天气数据转化为简单而相关的网站功能。选择一个有意义的位置，选择其放置位置，根据您的受众定制设计，粘贴生成的嵌入代码，并从一个面板管理小部件。在展示中比较大小，在样本网站中查看小部件，然后创建您的第一个小部件后再决定它应该放在网站的哪个位置。