Website widgets
Moon phase widget for your website. The real Moon, right now.
A moon phase widget shows the Moon as it is today where your visitor lives: its phase, how much of it is lit, its age in days, its zodiac sign and its distance from Earth. It reads the NASA JPL DE440 ephemeris, and visitors can look up any other date. Paste one snippet into Squarespace, Wix, WordPress or Shopify.
Today, in their time zone
The widget reads each visitor clock, so the phase, the lit percentage and the date are the ones they see in their own sky.
More than a picture
Phase name, illumination, lunar age, the Moon sign and the distance from Earth, for any date and time a visitor picks.
Three views in one widget
The Moon today, the next new, quarter and full moons with their dates, or a whole month of phases as a calendar.
Add it in three steps. Pick your site builder.
Needs a Squarespace plan that runs JavaScript in a Code Block, such as Core, Plus or Advanced.
- Edit the page, click Add block, then Code, then the pencil icon.
- Set the Mode menu to HTML, leave Display Source off, and paste the code.
- Save, then open the page in a private window to see the widget.
In Wix Studio the element is Add Elements, Embed and Social, Embed Site.
- In the editor click Add Elements, Embed Code, then Popular Embeds.
- Choose Embed a site, click Enter Website Address and paste the link.
- Click Apply, give the box about 600px of height, then Publish.
On WordPress.com this needs a paid plan with plugins turned on.
Prefer the WordPress way? The free RoxyAPI plugin adds the same readings as a block or a shortcode, with your key kept on the server. Install the plugin
- Edit the page, click the + inserter, search HTML and add a Custom HTML block.
- Paste the code into the block.
- Update the page, then view it to see the widget.
- Go to Online Store, Themes, then click Edit theme.
- Click Add section, find Custom Liquid, and paste the code.
- Click Save.
Your site builder must accept HTML with a script, often called an embed or code block.
- Open the page in your site editor.
- Paste the code where the widget should appear.
- Publish the page.
Common questions
How do I add a moon phase widget to my website?
Open the widget builder at widgets, pick the moon phase, choose a theme and add your key. Paste the code into a code or embed block on Squarespace, WordPress or Shopify, or paste the link into Wix. It shows the Moon of the day as soon as the page loads.
Is there a moon phase widget in HTML I can embed?
Yes. The builder writes a short block of HTML: the widgets script and one div for the Moon. It works on any page that accepts custom HTML, and the Wix link works where scripts are not allowed.
Can it show the upcoming full and new moons?
Yes. Add data-mode="upcoming" to the widget line for the next new moons, quarter moons and full moons with their dates, or data-mode="calendar" for a month of phases.
Does it show the Moon sign too?
Yes. Every reading names the zodiac sign the Moon is in, beside its phase, illumination and age, which is what moon gardening and lunar planning sites need.
How accurate is the moon phase?
The Moon position reads the NASA JPL DE440 ephemeris, the same data observatories use, so the phase, the lit percentage and the sign match the real sky for any date a visitor picks.
Is the moon phase widget free?
The widget code is MIT licensed and free to use. The live readings run on a RoxyAPI plan, and every plan includes every widget, the moon phase among them.
