# Sunset Predictor — Blog Corpus (English)
Concatenated body of every published English blog post. Regenerated every 15 minutes from Firestore.
Posts: 3
Generated: 2026-10-12T08:58:38.216Z
---
# How to Add a Live Sunset Forecast Widget to Your Website
URL: https://sunset-predictor.com/blog/how-to-add-a-live-sunset-forecast-widget-to-your-website/
Published: 2026-07-14T04:05:21.259Z
Author: Sunset Predictor Team
Category: guides
TL;DR: Sunset Predictor Widgets add a live, location-specific sunset quality score and sunset time to your website. Pick a placement preset, size, theme, width, language, and units in the free builder, then paste the generated script, iframe, or WordPress code. You can preview every option in the showcase and in-context demos first.
Your visitors should not have to open another weather app to decide whether tonight is worth planning around. A sunset forecast widget puts the answer directly on your website, next to the room, destination, webcam, or photography information they are already viewing.
Sunset Predictor Widgets turn a fixed location into an automatically updated forecast you can embed without building your own weather integration. The result is a compact, useful feature for travel publishers, hotels, restaurants, tourism websites, webcam pages, and photographers. Personal websites can use the Free plan; business websites need a paid plan, and hotels can [start with a free 30-day pilot](/for-hotels/).
**See it before you read further:**
- [Open the widget builder](/widgets/) and change the theme, size, and layout in a live preview — no account needed.
- [Browse every size and theme side by side](/widgets/showcase/) in the widget showcase.
- [See the widget inside realistic websites](/widgets/in-context/): a travel blog, a hotel homepage, a restaurant terrace, and a live webcam page.
## What the sunset forecast widget shows
Every widget gives visitors the core information they need at a glance:
- A sunset quality score from 0 to 100
- A clear rating: Epic, Good, Fair, or Poor
- The local sunset time for the selected location
- A location name or your own display label
- An optional sentence explaining the forecast
- Optional weather details on the Custom size
The score is presented in a color-coded ring, and the card background follows the rating, so visitors can understand the outlook before reading the number. For example, a hotel in Santorini can display the forecast for Oia, while a webcam operator in San Francisco can label the same type of widget “Golden Gate View.”
The Custom size can also show selected weather conditions: temperature, cloud cover, rain probability, humidity, wind, visibility, pressure, and air quality. You choose which values appear and the order in which visitors see them.
Every widget links to the Sunset Predictor forecast page for the nearest city (or to the Sunset Predictor homepage when no city is nearby), so curious visitors can open the full outlook in a new tab without leaving your page behind.
## Sunset widget vs. a regular weather widget
A regular weather widget shows temperature, rain, and wind. It does not tell visitors whether the sunset will be worth watching: that depends on how cloud cover at different heights, humidity, visibility, and air quality combine at sunset time. The sunset widget turns those conditions into one score and a rating, so visitors get the answer without reading a forecast table. If your visitors also need general weather, the Custom size adds a weather grid under the score.
## Three sizes, three themes
The fastest way to compare the options is the [widget showcase](/widgets/showcase/), which shows all nine combinations with sample scores from every rating band.
| Size | What it shows | Typical placement |
| --- | --- | --- |
| Compact | One row: score, rating, sunset time, location | Header or footer strips, narrow sidebars, next to a video player |
| Standard | Score ring, rating, sunset time, location, optional explanation | Sidebars, booking boxes, article columns |
| Custom | Everything in Standard plus a weather grid you configure | Content columns, photography guides, conditions pages |
Each size works with a **light**, **dark**, or **auto** theme. Auto follows the visitor's system setting, which suits websites that already switch between light and dark mode.
## Why add a sunset widget to your website?
A widget is most valuable when sunset conditions affect what your visitors plan to do. A destination guide can describe where to watch the sunset; the widget answers whether tonight looks promising, without visitors leaving your page to search elsewhere.
### Add a feature without maintaining a forecast system
Weather data, scoring, labels, time formatting, and automatic refreshes are handled for you. Installation is a short embed snippet rather than a custom API project with its own interface, error handling, and ongoing maintenance.
If you do want to build your own interface, the same predictions are available through the [Sunset Predictor API](/api-docs/).
### Fit the widget into your existing design
Theme, size, accent color, width, and a visitor-friendly label such as “West Terrace” let the widget match your page. The widget is isolated from your site's stylesheet. Your own CSS rules for links, padding, or fonts cannot distort it, and its styles cannot leak into your page.
### Serve international visitors
Widgets support 14 languages: English, French, German, Spanish, Russian, Portuguese, Japanese, Romanian, Ukrainian, Arabic, Hebrew, Simplified Chinese, Hindi, and Italian. Arabic and Hebrew widgets render right-to-left automatically. You can also choose metric or imperial units and a 12-hour or 24-hour clock.
## How to create your first widget
You can try the builder and live preview before signing in. An account is only required when you want to save the widget and receive its embed code.
### 1. Open the widget builder
Open the [Sunset Predictor widget builder](/widgets/) and experiment with the public preview. The preview updates as you change the theme, size, layout, color, language, and other display settings. Drag the preview score slider to see how each rating band looks, and switch the slot width (240 px, 320 px, 400 px, or full) to test narrow and wide placements.
Tip: you can open the builder with your own city already selected by adding its coordinates to the address, for example [the builder preset for Lisbon](/widgets/?lat=38.7223&lon=-9.1393&name=Lisbon).
When you are ready to save, sign in or create a free account. From your widget dashboard, select **Create Widget**. The Free plan covers one widget on a personal, non-commercial website; for a business website, choose a [paid plan](/pricing/).
### 2. Name the widget for your own dashboard
Enter a short internal name such as “Lisbon Hotel Homepage” or “Brighton Webcam.” Visitors see the selected location label, not this management name, so use something that will help your team recognize the widget later.
### 3. Search for the forecast location
Type at least three characters and select the correct city from the results. The chosen coordinates determine the forecast and local sunset time.
You can also enter an optional display name. This is useful when the public-facing place has a more specific or familiar name than the city result. For example:
- Use “Our Rooftop View” instead of “Bucharest, Romania”
- Use “Copacabana Beach” instead of “Rio de Janeiro, Brazil”
- Use “North Shore Camera” instead of the nearest municipality
Choose carefully: a widget's forecast location cannot be changed after creation. Create a new widget if you later need a different place. The display name can still be edited.
### 4. Pick where the widget will go
The builder asks **Where will it go?** and offers four one-click presets. Each preset sets the size, width, and description together, and you can fine-tune everything afterwards.
| Preset | Size | Width | Description |
| --- | --- | --- | --- |
| Sidebar | Standard | Fixed 300 px | Off |
| Content column | Custom | Fills the column, up to 800 px | On |
| Header or footer strip | Compact | Fills the strip | Off |
| Booking box | Standard | Fills the box | On |
On plans without the Custom size, the content column preset uses the Standard size with the description on.
Under **Width**, choose **Fixed** (220–480 px) or **Fill container** with an optional maximum width, and align the widget to the start or the center of its space. The widget adapts to the width it actually receives, not to the screen size:
- Below 260 px, it switches to a narrow layout with a smaller ring.
- From 480 px wide, the explanation and weather details move next to the score instead of below it.
A fixed-width widget still shrinks when its container is narrower, so it does not overflow on phones.
### 5. Choose the appearance and information
The best settings depend on where the widget will appear:
| Setting | Options | Practical guidance |
| --- | --- | --- |
| Theme | Light, dark, auto | Use auto when the host website already follows the visitor's system theme. |
| Size | Compact, Standard, Custom | Compact suits strips and tight spaces; Standard balances detail and space; Custom adds a weather grid. |
| Accent color | Presets or custom color | Match a brand color while keeping enough contrast around the score ring. |
| Description | On or off | Add a short explanation of why the forecast received its score. Not available in the Compact size. |
| Language | 14 supported languages | Match the language of the page where the widget will appear. |
| Units | Metric or imperial | Choose the format your visitors expect. |
| Time | 12-hour or 24-hour | Match the convention used elsewhere on your website. |
| Refresh | 15 to 120 minutes | Available frequency depends on the account plan. |
| Branding | Show or hide the “Powered by Sunset Predictor” footer | Hiding it is available on Pro, Business, and Enterprise. |
For the Custom size, select and reorder the weather details that matter to your audience. A photographer might prioritize clouds, visibility, and rain probability. A hotel may prefer temperature, clouds, and wind.
### 6. Create the widget and copy the embed code
Select **Create Widget**. The next screen shows the saved preview and three installation tabs: **Script Tag**, **iFrame**, and **WordPress**.
| Embed option | Best for | What to know |
| --- | --- | --- |
| Script Tag | Most websites and custom layouts | Loads asynchronously and renders the widget directly in the page, isolated from your CSS. |
| iFrame | Website builders and CMS platforms that block third-party scripts | Keeps the widget in its own document. The included listener adjusts the frame height automatically. |
| WordPress | Any WordPress site, block editor or classic editor | The iframe code with step-by-step WordPress instructions. No plugin required. |
The Script Tag option looks like this, with your unique widget ID inserted automatically:
```html
Sunset forecast for Your City
```
The script inserts the widget directly after itself, so you do not need a separate container element. The small text link below it is a plain attribution link to the forecast page for your location. It stays readable even if scripts are blocked. Enterprise plans can remove it.
The iframe option contains an `