Embed our sky widgets on your site
Put a live moon phase card, sunrise and sunset, a next-eclipse countdown, a planet parade tracker, a what's up tonight card or a cosmic clock on your own website with one small copy-paste snippet. The widgets are free, with no account and no API key. They set no cookie, run no analytics and show no ad. The six iframe widgets compute everything live in your visitor's browser; the newer moon widget renders straight into your page and reads one cached answer from our public API.
<iframe src="https://www.cyclecalcs.com/embed/moon.html?theme=auto&size=card"
title="Moon phase and illumination - CycleCalcs" width="360" height="220" loading="lazy"
style="border:0;width:100%;max-width:360px"
referrerpolicy="strict-origin-when-cross-origin"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>
<p style="font:13px/1.4 system-ui,sans-serif;margin:.4em 0 0">
<a href="https://www.cyclecalcs.com/moon-phase-calendar.html">Powered by CycleCalcs</a>
</p>That is the live moon phase card, sized for a sidebar, in your visitor's own light or dark theme. It needs no location and no account. Want a different widget, your own colours, a size that fits, or your own default location? Build one below.
Try it on
Pick a widget, dress it to match your site, and watch it stand in a sample page before you paste a line of code. The widget in the frame below is reading tonight's real sky; the site around it is a mock-up, shown scaled to fit.
Choose a widget
Tonight's phase drawn live, the illuminated percent, and the next full and new Moon. No location needed for the iframe version. Give the in-page version below a location and it adds moonrise and moonset, in your reader's own clock.
A live countdown to the next eclipse anywhere on Earth, plus the next solar and lunar eclipse with type, date and Saros series.
The next morning or evening when three or more planets are up together, with a horizon map. Needs a location; you set the default below.
Tonight's Moon phase and the planets up after dusk from your spot, with a horizon map and the next eclipse. Needs a location; you set the default below.
Today's sunrise, sunset, day length and twilight, with a day-arc showing where the Sun is now. Needs a location; set one below and the snippet carries that place's time zone, so the card shows its civil clock with daylight saving applied. A visitor who shares their own location sees their own clock instead.
Where we are right now in the sky's great cycles: the Moon phase, the seasons, the Jupiter-Saturn conjunction and the solar cycle. No location needed.
Fit it to your site
The moon widget comes two ways. The iframe works on any host that allows one. The in-page version renders straight into your HTML with no iframe, and reserves its own box so the card does not resize once the numbers arrive.
Current default: Greenwich, UK (the widget labels it clearly).
The live preview needs JavaScript. The snippet below is complete either way.
- The CycleCalcs mark goes, so the embed carries no visible branding
- An accent color of yours, if you want one
Nothing else changes. Same numbers, same engine, same accuracy, and the widget keeps working when a licence lapses: the branding simply comes back.
Copy the embed code
Paste this where you want the widget to appear. Please keep the caption link: that one visible link back to CycleCalcs is what supports the free widget, and it is the only thing the widgets ask for.
Plain iframe (recommended: works on any host that allows iframes)
<iframe src="https://www.cyclecalcs.com/embed/moon.html?theme=auto&size=card"
title="Moon phase and illumination - CycleCalcs" width="360" height="220" loading="lazy"
style="border:0;width:100%;max-width:360px"
referrerpolicy="strict-origin-when-cross-origin"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>
<p style="font:13px/1.4 system-ui,sans-serif;margin:.4em 0 0">
<a href="https://www.cyclecalcs.com/moon-phase-calendar.html">Powered by CycleCalcs</a>
</p>Auto-resizing script (the card grows and shrinks with its content)
<a class="cyclecalcs-widget" data-widget="moon" data-theme="auto" data-size="card"
href="https://www.cyclecalcs.com/moon-phase-calendar.html">Powered by CycleCalcs</a>
<script async src="https://www.cyclecalcs.com/embed.js"></script>Some platforms (WordPress.com, and other hosted CMSs on their free plans) strip script tags from posts. On those, use the plain iframe version; it needs no JavaScript from us and fails nowhere that iframes are allowed.
In your page, no iframe
<a href="https://www.cyclecalcs.com/moon-phase-calendar.html"
class="cyclecalcs-moon" data-size="card" data-theme="auto">Powered by CycleCalcs</a>
<script async src="https://www.cyclecalcs.com/widget.js"></script>This one renders straight into your page inside its own isolated style scope: no iframe, about 6 KB compressed (14 KB of source), fetched once, and one cached call to the public API per view. Its own box is reserved before anything loads, so the card does not resize once the numbers arrive; the anchor itself is only a line of text until the script replaces it, so give its wrapper a min-height if it sits above your own content and you do not want that content to move when it loads.
Take the caption off: the widget licence
Every widget on this page reads a licence key, and a key valid for the domain it is running on does exactly two things. The CycleCalcs mark stops being shown, so the embed carries no visible branding, and an accent color replaces the CycleCalcs accent with one of yours. That is the whole list. A licence changes how the widget looks, never what it says: the numbers, the engine, the refresh and the accuracy are the same free ones, and there is no paid accuracy tier here.
For one domain and every subdomain under it. One year is 366 days, counted from the moment you go to the payment page. No auto-renewal.
A bare hostname: no https://, no path, no port.
Payment is taken by Stripe on a page Stripe hosts, and Stripe is the merchant of record. Your key is on screen and in your inbox the moment it settles. Refunds within 30 days, no reason needed: the terms of sale say exactly what the licence covers.
Already bought one?
Paste the key from your purchase email. It is checked here against the same endpoint the widget itself calls, and then written into the snippet above.
No key yet. The snippet above is the free one until you paste one in.
If we change the widget
The two loader files a snippet points at, /embed.js and /widget.js, are frozen public contracts: a breaking change ships as a new file beside them, never as an edit to the one your pages already load. Everything behind them is versioned and cached immutably. That is not a promise you have to take on trust from this page: it is the same commitment written into the terms of sale.
The link under the widget
Every snippet on this page places one small caption link in your page, right under the card: the widget's name, linking to the matching CycleCalcs tool. It is the only attribution you place in your own HTML: it sits in your page rather than hidden inside the frame, it says what it links to, and you choose its wording from the Link text menu above. The card itself also carries a small CycleCalcs mark. A per-domain licence removes that mark and sets an accent color of yours; it is not on sale yet, so if you want it, write to info@cyclecalcs.com and we will tell you when it is.
Troubleshooting
- The widget area is blank. If your site sends a
Content-Security-Policyheader, the iframe widgets needframe-src https://www.cyclecalcs.com; without it both of their snippet versions fail the same way. Their script version also needsscript-src https://www.cyclecalcs.com. The host-DOM moon widget creates no iframe: it needsscript-src https://www.cyclecalcs.comandconnect-src https://www.cyclecalcs.com. - The script version does nothing. Your platform probably strips
<script>tags. Use the plain iframe version instead. - Your site is a single-page app. If the anchor is rendered after the page loads, call
window.CycleCalcsWidget.scan()for the six iframe widgets, orwindow.CycleCalcsMoon.scan()for the in-page moon widget, and the loader will pick it up. They are separate loaders and each exposes only its own global. - The card is clipped or shows a scrollbar. Use the auto-resizing script version, or keep the width and height the builder generated for your chosen size.
- The location-based widgets show Greenwich. That is the honest default. Set your own default location in the builder, or let readers tap "use my location" inside the widget.
Frequently asked questions
Is the widget free to use?
Yes. Every widget on this page is free for any website, personal or commercial. There is no account and no API key.
The six iframe widgets compute everything in your visitor's browser with the open-source Astronomy Engine, so they call nothing and have no usage limit at all. The newer moon widget instead reads one cached answer per view from our public API, which is also free and needs no key, at that API's anonymous limit of 5,000 requests a day. That limit counts each visitor's own browser separately, so your traffic cannot exhaust it. Answers are cached for 30 seconds and may be served a little after that, which moves no figure the card shows, and it keeps the widget small enough to render inside your own page.
Will the widget slow down or track my visitors?
No. No widget here sets a cookie, runs analytics, or shows an ad. The six iframe widgets load lazily after your own content and compute the astronomy locally in the visitor's browser, fetching nothing. The newer moon widget renders inside your page and makes one request per view to our public API, sending only what any web request sends: the visitor's IP address, plus the coordinates you put in the snippet if you set any. It stores nothing on their device. The Planet Parade, What's Up Tonight and Sunrise & Sunset widgets ask for a location only if the visitor taps their use-my-location button.
Why is there a CycleCalcs link under the widget?
That caption link is part of the widget: it credits the live data and takes readers to the full tool on CycleCalcs. It sits in your page's own HTML so readers and search engines can follow it.
The widget does not appear on my site. What should I check?
It depends which widget. The six iframe widgets need frame-src https://www.cyclecalcs.com in your Content-Security-Policy, and their script version also needs script-src https://www.cyclecalcs.com. The newer moon widget builds no iframe, so frame-src does nothing for it: it needs script-src https://www.cyclecalcs.com and connect-src https://www.cyclecalcs.com instead. If your platform strips script tags (common on hosted CMSs), use the plain iframe code, which needs no JavaScript.
How accurate are the widget's numbers?
The widgets run the same engine as every CycleCalcs tool and are reliable for roughly the years 1700 to 2200. An angular bound is the wrong unit for a clock time, so here is the checkable one: sunrise and sunset matched the US Naval Observatory's published minute at every site we tested, 24 of 24 events across 12 locations from 70 degrees north to 34 degrees south, on 30 August 2026. Times are for the Sun's upper limb at a geometric altitude of -0.833 degrees, 16 arcminutes of semidiameter plus 34 of standard refraction, which is the definition USNO uses. Observer elevation is not applied: the horizon dips by about 1.75 arcminutes times the square root of your height in metres, so at 2,000 m sunrise arrives roughly eight minutes earlier than the widget says. That test covers ordinary rise and set at sea level on one date; it does not cover polar day or night, and it is not a claim about seconds, because USNO publishes whole minutes. Separately, a clock time is only civil time if the snippet carries a time zone: one built here does, and an older one without it shows time derived from longitude, which is three hours out in western China or western Spain. The method is public. Dates are UTC unless the widget says otherwise.
Want the full versions of these tools? See the Moon Phase Calendar, the Eclipse & Saros Explorer, the Planet Parade Tracker, Today in the Sky, the Sunrise & Sunset Calculator and Where Are We Now.
Building for WordPress, React or a hand-rolled page? The build guide put the live sky on your website walks all five routes, from this builder's two-line snippet to calling the API directly, and the developer hub collects everything else we make for developers.