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, no API key and no usage limit. No tracking and no ads, ever. 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.
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 live and 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.
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; times are the location's local time.
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 no layout shift.
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 moonrise - 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, no layout shift (its box is reserved before anything loads), about 6 KB compressed (14 KB of source), fetched once, and one cached call to the public API per view.
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.
$29/year, 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.
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 the widget asks for, and it is honest by design: it sits in your page's own HTML (not hidden inside the frame), it says what it links to, and you choose its wording from the Link text menu above. If you embed the widget, please keep the link visible; it is how new readers find the free tools that power it.
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()and the loader will pick it up. - 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, no API key, and no usage limit. The six iframe widgets compute everything in your visitor's browser with the open-source Astronomy Engine. The newer moon widget instead reads one cached answer per view from our public API, which is also free and needs no key, so it stays 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. Keeping it visible is how you support the free widget.
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, accurate to well under a degree and reliable for roughly the years 1700 to 2200. 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.