HTML Moon Phase

Add the Moon Phase widget to any website with HTML

Real-time moon phase display with illumination percentage, shown as seen from the northern or southern hemisphere. Calculated on the fly, no external service required. One script tag and one element. No build step, no framework, no dependencies.

Get started free How it works

Live demo — try it

Sample content — yours appears as soon as you configure it.

Setup

How to add Moon Phase to your page

Three steps, a few minutes.

1
Create a free account with your site's domain
The widget renders only on the domain you register, so nobody else can use your key.
2
Add Moon Phase and copy its code
Pick it in the Widget Gallery, set it up with the live preview, and copy the embed code.
3
Paste it where the widget should appear
Put the element where you want the widget and the script tag once per page. Publish and reload.

your-page.html

<!-- 1. Load the myNaturevista loader once per page -->
<script src="https://mynaturevista.com/w.js"></script>

<!-- 2. Place the widget wherever it should appear -->
<div data-menv-widget="moon-phase"
     data-menv-key="YOUR_API_KEY"
     data-menv-instance="YOUR_INSTANCE_ID"></div>

Good to know

Moon Phase on your site: what to expect

The page must be served from the registered domain. Opened as a local file, or from another domain, the widget stays empty.
In React, Vue or Svelte, render the element as it is and load the script once: the loader watches the page for widgets added later.
There is also a custom element, for builders that ask for one: <menv-widget widget="…" key="…" instance="…"></menv-widget>.

FAQ

Moon Phase for HTML: frequently asked questions

Does Moon Phase need jQuery or another library?

No. The loader is plain JavaScript with no dependencies, and the widget runs in its own frame.

Can I restyle it with my own CSS?

The widget is isolated in a frame so that page styles cannot break it. Its look — colours, layout, texts — is set in your dashboard.

Does it work in a single-page app?

Yes. Widgets added to the page after it loads are found automatically, so client-side routing is not a problem.

Can I test it on localhost?

Yes. On a local address the widget shows with a "Test mode" mark and its views are not counted.

Is Moon Phase free?

Yes. Moon Phase is included in every plan, the Free one too: three live widgets and 1,000 views a month, with a small "Powered by myNaturevista" mark. Paid plans remove the mark and raise the limits.

Other platforms