How to Add a Live Sunset Forecast Widget to Your Website

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, tourism websites, webcam pages, and photographers.

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, 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.

Why add a sunset widget to your website?

A widget is most valuable when sunset conditions affect what your visitors plan to do. It adds relevant, changing information to a page that might otherwise stay static.

Give visitors a practical reason to stay

A destination guide can describe where to watch the sunset. The widget adds the missing question: how promising does tonight look? Visitors get useful planning context without first 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.

Match the information to your audience

A hotel may want a polished forecast for one rooftop. A tourism website may need separate widgets for Lisbon, Porto, and Madeira. A photographer may prefer a compact score beside a location guide. Each widget is tied to one location, so its context stays clear.

Fit the widget into your existing design

Choose a light, dark, or automatic theme; select a size; and set the score-ring accent color. You can also replace the geographic name with a visitor-friendly label such as “West Terrace,” “Beach Camera,” or “Old Town Lookout.”

Serve international visitors

Widgets support 14 languages: English, French, German, Spanish, Russian, Portuguese, Japanese, Romanian, Ukrainian, Arabic, Hebrew, Simplified Chinese, Hindi, and Italian. 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 Widgets builder

Open the Sunset Predictor Widgets builder and experiment with the public preview. The preview updates as you change the theme, size, color, language, and other display settings.

When you are ready to save, sign in or create a free account. From your widget dashboard, select Create Widget.

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. Choose the appearance and information

Use the live preview while you configure the widget. The best settings depend on where it 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 sidebars; 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 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.

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.

5. Create the widget and copy the embed code

Select Create Widget. The next screen shows the saved preview and two installation options: Script Tag and iFrame.

Embed option	Best for	What to know
Script Tag	Most websites and custom layouts	Loads asynchronously and renders the widget directly inside the page.
iFrame	CMS platforms or pages that isolate third-party content	Keeps the widget in its own document and includes automatic height adjustment.

The Script Tag option looks like this, with your unique widget ID inserted automatically:

<div id="sunset-widget-wgt_your_widget_id"></div>
<script src="https://sunset-predictor.com/api/widget/embed.js?v=1"
        data-widget-id="wgt_your_widget_id"
        async></script>

Use the Copy Code button rather than editing the generated ID by hand.

6. Paste the snippet into your website

Add the code where you want the widget to appear. The exact location depends on the platform:

• On a custom-coded site, place it in the relevant page template or content block.
• In WordPress, use a Custom HTML block.
• In a page builder, use an HTML, embed, or code element.
• In a CMS with strict script rules, try the iFrame option.

Publish or update the page, then open the live URL and check the widget on both desktop and mobile. Confirm that the location, language, clock format, units, and spacing all fit the page around it.

If your CMS blocks the embed code or the widget does not appear, contact Sunset Predictor support for help with the installation.

What happens after the widget is live?

The widget requests fresh prediction data automatically according to its configured refresh interval. The interval available to you depends on your plan, from every 120 minutes on Free to every 15 minutes on Enterprise.

You do not need to replace the embed code when you change most settings. Open the widget from your dashboard, update its appearance or display options, and save. Changes to an already embedded widget appear within a few minutes.

The dashboard also lets you:

• See total impressions and clicks for each widget
• Copy the embed code again
• Pause and resume a widget
• Edit its name, label, appearance, language, units, time format, and refresh interval
• Delete a widget you no longer need

An impression records a widget render, while a click records a visitor following the widget's link to Sunset Predictor. These counts give you a simple view of usage without requiring a separate analytics setup for the widget itself.

Which plan fits your website?

You can create one branded widget on the Free plan. Paid plans support commercial use, more widgets, higher monthly view limits, faster refreshes, the Custom size, and optional branding removal. You can compare current plans and pricing before choosing a tier.

Plan	Widgets	Monthly views	Fastest refresh	Custom size	Remove branding	Commercial use
Free	1	2,000	120 minutes	No	No	No
Pro	5	25,000	60 minutes	Yes	Yes	Yes
Business	25	150,000	30 minutes	Yes	Yes	Yes
Enterprise	Unlimited	1,000,000	15 minutes	Yes	Yes	Yes

If a widget reaches its monthly view allowance, it continues to render. New impressions stop counting for that month, and Sunset Predictor branding is shown. This avoids turning an embedded page into an error state simply because traffic was higher than expected.

Remember that active and paused widgets both count toward the number of widgets allowed by your plan. Delete a widget if you no longer need it and want to free that slot.

Practical ways to use the widget

The strongest placement connects the forecast to a decision the visitor is already making.

Hotels and resorts

Place a standard widget on an amenities, rooftop bar, or local experiences page. Use the property's public-facing name as the display label and match the accent color to the hotel brand.

Tourism and destination websites

Add location-specific widgets to city or regional guides. A page about sunset viewpoints in Barcelona can show the current Barcelona forecast, while a separate Tenerife guide can use its own widget.

Webcam and surf websites

Position a compact widget near a live camera or current-conditions panel. The sunset score adds quick context without competing with the video feed.

Photography guides

Use the Custom size to show clouds, rain probability, visibility, and wind alongside the score. This gives readers more context when deciding whether to scout a location or pack equipment.

Event and venue pages

For outdoor venues where the view is part of the experience, a widget can help visitors understand the sunset outlook for the venue's fixed location. Keep the description enabled if your audience benefits from a plain-language explanation of the score.

Tips for a better embed

Before publishing the widget widely, make a few deliberate choices:

1. Put it near related content. A forecast beside a rooftop description is more useful than one hidden in a generic footer.
2. Use a specific display label. “Harbor Terrace” gives visitors more context than a broad city name when the location is already obvious.
3. Match the page language, units, and clock. Small inconsistencies make an embedded feature feel disconnected from the rest of the website.
4. Keep the information density appropriate. Compact works for tight layouts; Custom works when weather detail is part of the page's purpose.
5. Check mobile spacing after installation. The widget is only one part of the page, so test how it sits beside your own headings, images, and buttons.
6. Review impressions periodically. They help you see whether the placement is receiving traffic and whether your current plan still fits.

Conclusion

A sunset forecast widget turns changing weather data into a simple, relevant website feature. Choose one meaningful location, tailor the design to your audience, paste the generated embed code, and manage the widget from one dashboard. You can preview and create your first widget before deciding where it belongs on your site.