Squarespace does not include a moon phase display out of the box. Adding one takes about three minutes if you know where to put the embed code. This guide walks through the exact steps.

What you need

- A Squarespace site on the Business plan or higher (required for custom code blocks)
- An embed snippet from a moon phase widget provider
- No coding knowledge required

Squarespace Personal plan does not support custom HTML or JavaScript. If you are on Personal, you will need to upgrade to Business before you can embed third-party widgets.

Step 1: Get your embed code

Go to your widget provider and copy the iframe or JavaScript snippet for the moon phase widget. A typical iframe snippet looks like this:

```html
<iframe
src="https://widgets.esotier.com/moon-phase?theme=light"
width="100%"
height="420"
frameborder="0"
scrolling="no"
title="Moon Phase Widget">
</iframe>
```

Esotier's Moon Phase Widget is free to embed on any website. Get the snippet from the Moon Phase Widget page — no account required for the basic embed.

Step 2: Add a Code block in Squarespace

1. Open the page where you want the widget in the Squarespace editor
2. Click Edit to enter editing mode
3. Hover over the section where you want the widget and click the + button to add a new block
4. Select Code from the block type list (it may be under "More" if not immediately visible)
5. Paste your iframe snippet into the Code block
6. Click Apply

The block editor shows a placeholder in editing mode — click Preview in the top right to see the live widget before publishing.

If you do not see the Code block option, you are likely on the Personal plan. Business plan and above are required for custom HTML in Squarespace.

Step 3: Set width and positioning

Squarespace Code blocks respect the column layout of the section they sit in. For a full-width moon phase widget:

- Place the Code block in a full-width section (one-column layout)
- Set `width="100%"` on the iframe so it fills the column
- For a narrower widget (suitable for a sidebar or narrow column), set a fixed `max-width` on a wrapper div:

```html
<div style="max-width: 380px; margin: 0 auto;">
<iframe
src="https://widgets.esotier.com/moon-phase?theme=light"
width="100%"
height="420"
frameborder="0"
scrolling="no"
title="Moon Phase Widget">
</iframe>
</div>
```

The `margin: 0 auto` centers it horizontally.

Step 4: Match your site theme

Most moon phase widget providers support a `theme` parameter in the embed URL. Common options:

- `?theme=light` — white/light gray background, dark text (works on light Squarespace templates)
- `?theme=dark` — dark background, light text (works on dark templates like Brine or Skye)
- `?theme=transparent` — no background, inherits your page color

If your template has a dark hero section and a light body, embed the widget in the section whose background it needs to match and set the theme accordingly.

Step 5: Test on mobile

Squarespace's editor has a mobile preview toggle in the bottom bar. Switch to mobile view and verify the widget renders at the correct size without horizontal overflow.

The main issue on mobile is iframe height: a widget set to `height="420"` will appear the same height regardless of screen width. If the widget's content reflows at narrow widths, the fixed height may cut it off or leave empty space. Most providers document their recommended mobile height — check the widget's documentation or test at 375px width.

Common issues in Squarespace

Widget does not appear in preview mode Squarespace's editing preview sometimes blocks third-party iframes for security reasons. Click Preview (not just the in-editor view) to see the widget with a live URL. The live published page will render it correctly even if the editor preview shows a placeholder.

"Custom code is not available on your plan" message You are on the Personal plan. Upgrade to Business to unlock the Code block.

Widget loads but looks wrong on the live site Clear your Squarespace cache: go to Settings → Advanced → Cache and click Clear Cache. Squarespace caches aggressively on CDN, and a previously cached page may show the old layout.

iframe is blocked by browser Some visitors' browsers or extensions block cross-origin iframes. This is uncommon but possible. It is not a Squarespace configuration issue — it is the visitor's local settings.

--- For other platforms, see the guide for adding a tarot widget to WordPress. Browse the full collection of free embeddable widgets at /free-widgets or find the Moon Phase Widget directly at /store/widget/moon-phase-widget.