How to Add a Sunrise and Sunset Widget to Your Site

A sunrise and sunset box is one of those details that makes a local guide, a travel page or a photography site feel current. The problem is that most ways to add one involve an API key, a rate limit and a bit of server code. This widget skips all of that: the sunrise and sunset widget works out the times in the visitor’s browser from the sunrise equation, so you embed it with a single iframe and never think about it again.

It is free, needs no account, and there is no request limit because nothing is fetched from a server.

Get the coordinates for your location

Every place is defined by a latitude and longitude. Latitude runs from -90 at the South Pole to 90 at the North Pole; longitude runs from -180 to 180, with east positive and west negative. To find them, right-click a spot in most map apps and copy the pair, or open the widget and press Use my location to fill in where you are.

Round them to four decimal places and you are well within a city block, which is more than precise enough for sun times.

Copy the embed code

On the sunrise and sunset widget page, enter the latitude, longitude and a name for the place, then set the timezone so the times read correctly for that location. The Copy embed code button gives you a snippet like this:

<iframe
  src="https://time.hivly.net/embed/sunrise-sunset-widget/?lat=51.5074&lng=-0.1278&label=London&tz=Europe/London"
  width="340" height="380"
  style="border:0;max-width:100%"
  title="Sunrise and sunset times for London"
  loading="lazy"></iframe>

Paste it wherever you want the box to appear. It works in plain HTML, in a WordPress custom-HTML block, and in most site builders that allow embed code.

Understand the parameters

The widget reads its settings from the URL, so you can edit them by hand if you prefer:

• lat and lng: the coordinates, in decimal degrees.
• label: the name shown at the top of the card, such as London.
• tz: the IANA timezone the times display in, such as Europe/London or America/New_York. Leave it out and each visitor sees the times in their own timezone.

Set the timezone the right way

The timezone parameter is the part people most often get wrong. If your widget is for a fixed place, always set tz to that place’s zone. Otherwise a reader in another country would see the sunrise time converted into their own clock, which is not what a page about, say, sunrise in Reykjavík should show. Setting tz pins the times to the location, which is almost always what you want for an embed.

What the widget shows

Once it loads, the card lists four things for the current day: the sunrise time, the sunset time, solar noon (when the sun is highest), and the total length of daylight. A small arc shows roughly where the sun is right now between the horizons. On days near the poles when the sun never rises or never sets, it says polar day or polar night instead of a time.

Common questions before you ship it

• It shows the wrong times. Check that latitude and longitude are not swapped, and that east/west signs are right. A negative longitude is west of Greenwich.
• The times look shifted by hours. That is the timezone. Set the tz parameter to the location’s zone.
• The box is too tall or narrow. Adjust the width and height on the iframe; max-width:100% keeps it responsive on phones.

Once the widget is live, a world clock pairs well with it on a travel or scheduling page, and a countdown timer is handy for counting down to an event at that location.