CycleCalcs
Advertisement

Home › Widget playground

Widget playground

Drag live sky widgets onto a sample status page or blog, arrange them, then take the code home.

Start from
    Site look
    View

    Who uses these

    Remote observatories

    The moonless nights ahead and tonight's targets, next to your roof and weather status.

    Dark-sky parks and lodges

    New moons, meteor showers and dark runs, judged for your site, so guests can pick a night.

    Astronomy clubs

    Coming events and tonight's targets on your homepage. They update themselves.

    Bloggers and educators

    A live Moon, tonight's sky or an eclipse countdown beside your posts. How we compute them.

    Setting up one widget at a time? Use the widget builder.

    Put it on your site

    1

    Add the loader once

    Paste this line once on the page, anywhere after your widgets. In WordPress or Squarespace, the end of the same block is fine. It finds every widget on the page and keeps each one sized to its content.

    2

    Paste each widget where it goes

    In the order a reader meets them. The small map shows where each one sits in your design.

      3

      Or paste the whole layout as one block

      Your layout as one block: a responsive grid with every widget in place (and the loader, for script snippets). It styles only itself, so it is safe in a single Custom HTML block. Comments mark where your own content goes. On phones it stacks to one column, in the order Phone view shows.

      4

      Check it on your site

      • WordPress: add a Custom HTML block and paste the code into it. WordPress.com strips scripts and iframes on plans without hosting features; see the WordPress recipe.
      • Squarespace: use a Code block. Webflow: use an Embed element.
      • Wix: use Embed code, then Embed HTML, and choose Plain iframes above.
      • Content-Security-Policy: if your site sends one, allow frame-src and script-src https://www.cyclecalcs.com.
      • Open your page, confirm the place name on each widget, and try it in dark mode.
      • Keep the "Powered by CycleCalcs" link: with script snippets, the widget appears where that link is.
      • To change the location later, edit data-lat, data-lon, data-place and data-tz, or reopen your share link and copy the code again.
      • Nothing shows? See troubleshooting.
      Send it to a colleague, or come back to it later. One widget at a time: widget builder.