Widget license: before and after

The same widgets twice: free on the left, licensed on the right. A license takes the CycleCalcs mark off and sets an accent color of yours. It changes how a widget looks. The numbers it shows stay the same.

How the licensed side is made

Both columns run the real, shipping widget code, so the free and licensed versions of each widget show the same numbers. A license key is bound to the buyer's own domain, so on cyclecalcs.com a real key is correctly refused and the widget keeps its mark. The licensed column therefore applies, to the real widget, exactly the two changes the widget code makes on a licensed domain, and nothing else: the CycleCalcs mark is hidden and the accent color is replaced. The accent here, #0f766e, is an example; a buyer picks their own.

The moon widget, plain iframe

The recommended snippet. The free version carries a small CycleCalcs.com mark inside the card and a caption link under it, in your page. Licensed, the frame hides its mark and takes your accent, and the snippet has no caption paragraph to paste.

Free

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

Licensed, accent #0f766e

<iframe src="https://www.cyclecalcs.com/embed/moon.html?theme=auto&amp;size=card&amp;key=CC1...&amp;accent=%230f766e"
  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>

The moon widget, in your page

The no-iframe version renders straight into your page. Here the caption link is the mark: the widget mounts above it. Licensed, the caption is hidden and the ring around the Moon takes your accent.

Free

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

Licensed, accent #0f766e

<a href="https://www.cyclecalcs.com/moon-phase-calendar.html"
   class="cyclecalcs-moon" data-size="card" data-theme="auto"
   data-key="CC1..." data-accent="#0f766e">Powered by CycleCalcs</a>
<script async src="https://www.cyclecalcs.com/widget.js"></script>

Without JavaScript neither widget draws and both columns show the caption link: the licensed look is applied by script, as it is on a licensed site.

What a license does not change

The numbers: the same values with or without a license, because a license changes nothing that is computed. The iframe widget computes in your visitor's browser; the in-page widget reads /v2/moon.
The size: the same card, reserved at the same height.
A lapse: when a license ends, the widget keeps working and the mark comes back.

Questions: info@cyclecalcs.com. Draft of 10 October 2026.