Free Moon Phase Widget

Embed live lunar data on your website with one line of code

Currently: Waxing Gibbous 🌔 (87% illuminated)

🌙 Live Widget Preview

🌔

Waxing Gibbous

Saturday, May 16

87% Illuminated
Powered by PhaseOfTheMoonToday.com

This widget updates automatically with real-time moon phase data

⚡ Quick Setup (30 seconds)

1

Copy the embed code

<script src="https://widget.phaseofthemoontoday.com/embed.js" data-theme="dark" data-size="medium"></script>
2

Paste into your website

Add the code anywhere in your HTML where you want the widget to appear. Works with any website or CMS.

3

Enjoy live moon data!

Your widget will automatically update with current moon phase information.

🎨 Customization Options

Themes

Dark (default)
data-theme="dark"
Light
data-theme="light"
Gradient
data-theme="gradient"

Sizes

Small
data-size="small"
Medium (default)
data-size="medium"
Large
data-size="large"

Styles

Minimal
data-style="minimal"
Card (default)
data-style="card"
Detailed
data-style="detailed"

Example with custom options:

<script src="https://widget.phaseofthemoontoday.com/embed.js" data-theme="light" data-size="large" data-style="detailed"></script>

🛠️ Platform-Specific Instructions

📝

WordPress

Use our official WordPress plugin for the easiest integration:
[moon_phase_widget theme="dark" size="medium"]
Or paste the embed code in an HTML block
⚛️

React/Next.js

Install our React component:
npm i @phaseofthemoontoday/react
<MoonPhaseWidget theme="dark" />
🛒

Shopify

Add to your theme's template files:
1. Go to Online Store → Themes
2. Click Actions → Edit code
3. Paste embed code in desired template
🔲

Squarespace

Use a Code Block:
1. Edit page → Add Block
2. Choose Code from More options
3. Paste embed code and save

🚀 Advanced Features

Location-Based Data

Show moonrise/moonset times for your visitors' location:

data-location="auto"

Requires visitor permission for location access

Custom Colors

Match your website's color scheme:

data-color-primary="#3b82f6"

Supports any hex color code

Click Actions

Link to your astronomy content:

data-click-url="/astronomy"

Widget becomes clickable with custom link

API Integration

Use your own API key for unlimited requests:

data-api-key="your-api-key"

Get your free API key from our documentation

⚡ Performance & SEO

🚀

Fast Loading

Lightweight 2KB script with async loading. No impact on page speed.

📱

Mobile Optimized

Responsive design works perfectly on all devices and screen sizes.

🔍

SEO Friendly

Clean HTML output with structured data for search engines.

❓ Frequently Asked Questions

Is the widget really free?

Yes! Our basic widget is completely free with no hidden costs. You get unlimited pageviews and automatic updates.

How accurate is the moon phase data?

We use precise astronomical algorithms with accuracy better than 99.9%. Our calculations are based on NASA JPL ephemeris data.

Does it work on all websites?

Yes! The widget works on any website that allows JavaScript. This includes WordPress, Squarespace, Shopify, Wix, and custom HTML sites.

Can I customize the appearance?

Absolutely! Choose from multiple themes, sizes, and styles. Premium users get access to custom colors and advanced styling options.

How often does the data update?

The widget updates automatically every hour with the latest moon phase information. No manual updates required.