🔧 Widget Generator

Create embeddable moon widgets for your website

Choose your settings, copy the code, and add live moon data to any website

Widget Configuration

Customize your moon widget settings

Widget Size

Standard widget for content areas

Theme

Show Details

Include illumination and age

Show Location

Include moonrise/moonset times

Show Weather

Include viewing conditions

Update Interval (seconds)

How often the widget updates (60-3600 seconds)

Custom Colors (Optional)

Background

Text

Accent

Live Preview

See how your widget will look

300 × 200 pixels

Embed Code

Copy and paste into your website

HTML + JavaScript

<!-- Moon Tonight Widget -->
<div id="moon-widget-ncb7dlmog" style="width: 300px; height: 200px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"></div>
<script>
(function() {
  const config = {"size":"medium","theme":"auto","showDetails":true,"showLocation":false,"showWeather":false,"updateInterval":300};
  const widgetContainer = document.getElementById('moon-widget-ncb7dlmog');

  function loadMoonWidget() {
    const iframe = document.createElement('iframe');
    iframe.src = 'https://same-j7thtilsku0-latest.netlify.app/widget?size=' + config.size + '&theme=' + config.theme + '&details=' + config.showDetails + '&location=' + config.showLocation + '&weather=' + config.showWeather;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = 'none';
    iframe.style.borderRadius = '8px';
    iframe.title = 'Moon Tonight Widget';

    widgetContainer.appendChild(iframe);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadMoonWidget);
  } else {
    loadMoonWidget();
  }
})();
</script>
<p style="text-align: center; margin-top: 8px; font-size: 12px; color: #666;">
  Powered by <a href="https://same-j7thtilsku0-latest.netlify.app" target="_blank" style="color: #666; text-decoration: none;">Moon Tonight</a>
</p>

How to Use

📋 For HTML Websites

1. Copy the HTML code above
2. Paste it where you want the widget
3. The widget will load automatically

⚛️ For React/Vue Apps

1. Copy the component code
2. Create a new component file
3. Import and use in your app

📊 Widget Features

• Automatically updates with current moon phase
• Responsive design adapts to your site's theme
• Lightweight and fast-loading
• No external dependencies required
• SEO-friendly with proper semantic markup

Moon Phenomena

Moon Divination

🔧 Widget Generator

📋 For HTML Websites

⚛️ For React/Vue Apps

📊 Widget Features