Embed our sky widgets on your site

Choose a widget

Preview and configure

This preview is the real widget, exactly as your readers will see it. The caption link below the card is part of the embed and stays in your page's own HTML.

Copy the embed code

Paste either version 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.

Plain iframe (recommended: works on any host that allows iframes)

<iframe src="https://www.cyclecalcs.com/embed/moon.html?theme=auto&amp;size=card"
  title="Moon phase today - 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">Moon phase today - 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">Moon phase today - 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.

The link under the widget

Both snippets place 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-Policy header, add this source to it: frame-src https://www.cyclecalcs.com (a frame-src policy blocks both snippet versions the same way). The script version additionally needs script-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 parade widget shows 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. The widgets are free for any website, personal or commercial. There is no account, no API key, and no usage limit. Everything is computed in your visitor's browser with the open-source Astronomy Engine, so there is no server to pay for.

Will the widget slow down or track my visitors?

No. The widget is a small sandboxed iframe that loads lazily, after your own content. It sets no cookies, runs no analytics, and shows no ads. The astronomy is computed locally in the visitor's browser, not fetched from a server. The Planet Parade widget asks for a location only if the visitor taps its 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?

If your site sends a Content-Security-Policy header, add frame-src https://www.cyclecalcs.com to it, and for the script version also script-src https://www.cyclecalcs.com. If your platform strips script tags (common on hosted CMSs), use the plain iframe code, which needs no JavaScript. Both versions need the page to allow iframes.

How accurate are the widget's numbers?

The widgets run the same engine as every CycleCalcs tool: the MIT-licensed Astronomy Engine, accurate to well under a degree and reliable for roughly the years 1700 to 2200. Dates are UTC unless the widget says otherwise.

Want the full versions of these tools? See the Moon Phase Calendar, the Eclipse & Saros Explorer and the Planet Parade Tracker.