PodSaid
Skip to main content

Install PodSaid on Squarespace

Squarespace is the second-most-common host for PodSaid embeds after WordPress — heavily used by independent podcasters and by churches with modern sites. The install is one Code Block. The gotcha is that Squarespace has a preview mode that intentionally disables custom scripts, so you have to verify on the live URL, not in the editor.

Time: about 3 minutes on Squarespace 7.1.

What you need before you start:

  • A PodSaid account with a feed set up (see Quickstart).
  • The embed snippet from Console → Settings → Embed Code. Your feed-id and pk_live_ key are already substituted.
  • A Business, Commerce, or higher plan — the free Personal plan blocks the Code Block on all Squarespace versions. If you’re on Personal, upgrade before proceeding or use the iframe fallback.
  • The domain you want to embed on already added to your Allowed Origins. If you deploy to yourdomain.squarespace.com before switching to a custom domain, add both — they’re different origins.

The 60-second version

Copy the snippet from your PodSaid console:

<script src="https://widget.podsaid.com/v1/widgets.iife.js" defer></script>
<ask-pod-widget
    feed-id="yourfeedslug"
    api-key="pk_live_xxxxxxxxxxxxxxxx">
</ask-pod-widget>

Open the page you want it on in the Squarespace editor. Add a Code Block. Paste. Save. View the live URL — not the editor preview — to verify.

If that just worked, skip to Verifying it works. If nothing appeared, keep reading — Squarespace’s preview probably fooled you.

Where to paste the snippet

Option A — Code Block on a single page (recommended)

Use this for a widget on one page, or a page-specific placement.

  1. Edit the page in the Squarespace editor.
  2. Hover between two existing blocks or under the last one. Click the + dot that appears.
  3. In the block picker, search for Code. Add the Code Block.
  4. Set the language dropdown to HTML if it isn’t already.
  5. Paste the snippet.
  6. Leave Display Source unchecked. If you check it, Squarespace shows your snippet as plain text on the page instead of executing it — this is the single most common Squarespace mistake we see.
  7. Click Apply, then Save.

The block preview inside the editor deliberately doesn’t render <script> tags. That’s a Squarespace safety feature, not a bug in your paste. The widget will only appear on the live published URL.

Option B — Site-wide via Code Injection

Use this for a persistent chat launcher on every page.

  1. Go to Settings → Advanced → Code Injection.
  2. Paste the snippet in the Footer slot.
  3. Click Save.

The <ask-pod-widget> element mounts its own launcher, so nothing visible needs to live in the page markup — the footer injection alone is enough. Header injection also works but adds a tiny amount of page-load latency for no benefit; use Footer.

Option C — Squarespace 7.0 (legacy)

Squarespace 7.0 still runs a large number of church sites that haven’t migrated. The install is identical — a Code Block on any page, or Settings → Advanced → Code Injection for site-wide — with one exception: 7.0’s Code Block sometimes strips the defer attribute on save. If you notice defer missing after Save, remove defer from the tag entirely (the widget still works without it, just marginally later in the page load).

Common Squarespace gotchas

1. You’re looking at the editor preview

Symptom: You pasted the snippet, you can see the code block in the editor, but the widget doesn’t appear.

Cause: Squarespace’s editor and its Preview button both run in a sandboxed iframe that disables third-party scripts. This is a security feature — you can’t test the widget from inside the editor.

Fix: Open the live URL of your site in a new tab (e.g. https://yourchurch.org/sermons, not the /config/ editor URL). The widget only mounts on live pages.

2. Display Source is checked

Symptom: Your snippet appears as literal code on the live page: <script src="https://widget.podsaid..."> visible as text.

Cause: The Code Block has a Display Source checkbox. When checked, Squarespace shows the code instead of executing it — useful for a “how to embed” tutorial page, catastrophic when you’re actually trying to embed.

Fix: Edit the Code Block. Uncheck Display Source. Save.

3. The staging URL doesn’t match your allowlist

Symptom: Widget renders on yourchurch.squarespace.com but the API rejects requests. The console shows [podsaid-widget] Auth failed (403): origin_denied.

Cause: Squarespace serves your site from yoursite.squarespace.com before your custom domain is fully propagated, and from the custom domain after. These are two different origins.

Fix: In Console → Settings → Allowed Origins, add both:

  • https://yourchurch.squarespace.com
  • https://yourchurch.org (and https://www.yourchurch.org if you serve both)

You can leave the Squarespace subdomain in the allowlist indefinitely — it costs nothing and lets you test staging URLs against the same key.

4. Squarespace CSS is aggressive but doesn’t touch the widget

Symptom: You’ve heard Squarespace’s global CSS breaks custom embeds and you’re worried.

Cause: Squarespace does reset a lot of tag defaults, but the widget renders everything inside a Shadow DOM. Squarespace’s CSS cannot reach inside the shadow root. You can safely ignore this concern.

The one legitimate case: the container the widget mounts into is still yours — so if you place a Code Block inside a highly styled section with padding restrictions, the widget’s launcher button may sit closer to a page edge than you expected. Move the Code Block into a section with normal padding, or use the site-wide Code Injection path.

5. Widget appears on desktop but not mobile

Symptom: Widget works when you resize the browser wide but disappears at phone width.

Cause: You put the Code Block inside a section that Squarespace 7.1 automatically hides on mobile — usually a section with a “Desktop only” visibility setting.

Fix: Edit the section holding the Code Block. Click the section settings icon. Confirm Show on mobile is enabled. Alternatively, use site-wide Code Injection (Option B) which is unaffected by per-section visibility rules.

Verifying it works

  1. Open your live site URL in a normal browser window — not the Squarespace editor and not the Preview button.

  2. Look for the widget in the location you placed it, or for the floating launcher (default: bottom-right) if you used Code Injection.

  3. Click it. If a chat box slides in, you’re done.

  4. Open DevTools console (⌥⌘I on Mac, F12 on Windows). Look for:

    [podsaid-widget] v1.8.2 mounted (feed=yourfeedslug, api=https://api.podsaid.com)

If the widget appears but questions fail, jump straight to Widget errors — what each one means.

When the widget shows “still preparing your content”

If ingest hasn’t finished for your feed yet, the widget renders a friendly placeholder instead of an error. Your paste is correct — you just don’t have content to answer questions against yet. Watch progress under Console → Feed → Ingest status, or wait for the “your widget is live” email.

See How ingest works (and why it takes hours).

Still stuck?