Skip to main content
PodSaid
Skip to main content

Install PodSaid on Subsplash

Subsplash is an all-in-one church platform (websites, mobile apps, giving, media, ChMS). The website side — Subsplash Sites — is a hosted drag-and-drop builder, so the install is a paste job, not a code deploy. Two paths depending on whether you want the widget on one page or every page.

Time: about 3 minutes.

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.
  • The domain you want to embed on already added to your Allowed Origins — see Allowed origins. If you use a *.subsplash.com staging URL before switching to your custom domain, add both — they’re different origins.
  • Editor access to your Subsplash Dashboard (Owner, Admin, or a role with Website permissions).

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 your page in the Subsplash editor, drag a Code block onto the page, paste with Cmd+V (Mac) or Ctrl+V (Windows) — right-click paste does not work — click Save, then Publish. View the live site URL to verify.

If that just worked, skip to Verifying it works. If nothing appeared, keep reading.

Where to paste the snippet

Option A — Code block on a single page

Use this for a widget on one page (a Sermons page, an Ask-the-Pastor page, a specific series landing page).

  1. In the Subsplash Dashboard, open Website and click into the page you want to embed on.
  2. Click Edit.
  3. In the left panel, click Add a block and drag the Code block onto the page at the position you want the widget to appear.
  4. Click into the block’s code field.
  5. Paste with the keyboard — Cmd+V on Mac, Ctrl+V on Windows. The Code block field does not accept right-click paste; this is the single most common Subsplash mistake we see.
  6. Click Save on the block, then Publish on the page.

The widget will appear inline where you dropped the block. If you want it as a floating launcher on every page, use Option B instead.

Option B — Site-wide via Settings → Code (recommended for launcher)

Use this for a persistent chat launcher that follows visitors across every page of the site.

  1. In the page editor, open the Page Menu (three-dot menu on the page).
  2. Go to Settings → Code.
  3. Paste the snippet into the Header field (Cmd+V / Ctrl+V).
  4. Click Save, then Publish.

The <ask-pod-widget> element mounts its own launcher, so nothing visible needs to live in the page markup — the header injection alone is enough.

Option C — Reusable snippet via Storage

If you want the same widget on multiple pages without maintaining copies, save the snippet once in Subsplash’s Code Storage and drop it into each page via Select Existing.

  1. In the page editor, drag a Code block onto any page.
  2. Paste the snippet (Cmd+V / Ctrl+V) and click Save.
  3. Subsplash offers to save the snippet to Storage — accept.
  4. On any subsequent page, drag a Code block and choose Select Existing to reuse the saved snippet.

Updating the snippet in Storage propagates the change to every page using it.

Common Subsplash gotchas

1. Right-click paste doesn’t work

Symptom: You right-click into the Code block field, choose Paste, and nothing appears — or the block stays empty after Save.

Cause: Subsplash’s Code block field only accepts paste via keyboard shortcut. This is a deliberate constraint of their editor.

Fix: Click into the field once to focus it, then press Cmd+V (Mac) or Ctrl+V (Windows). You should see the snippet fill the field immediately.

2. You forgot to Publish

Symptom: You pasted the snippet, saved the block, but the live site still doesn’t show the widget.

Cause: Subsplash edits stay in draft until you click Publish at the top of the page editor. Saving a block saves the draft; it doesn’t push to the live site.

Fix: Click Publish. Wait 10–30 seconds for the CDN to update, then hard-refresh the live URL (Cmd+Shift+R / Ctrl+Shift+R).

3. The staging URL doesn’t match your allowlist

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

Cause: Subsplash serves your site from a *.subsplash.com subdomain during setup and from your custom domain once DNS propagates. These are two different origins.

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

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

You can keep the Subsplash subdomain in the allowlist indefinitely — it costs nothing and lets you test staging changes.

4. The widget appears twice

Symptom: Two launcher buttons show up on the same page.

Cause: You pasted the snippet in both a per-page Code block and the site-wide Settings → Code → Header field.

Fix: Pick one. For a floating launcher, keep the site-wide header injection and remove the Code block. For an inline embed on a specific page, keep the Code block and remove the header injection.

5. Subsplash CSS doesn’t touch the widget

Symptom: You’re worried Subsplash’s theme CSS will break the widget’s look.

Cause: No cause needed — the widget renders inside a Shadow DOM. Subsplash’s CSS cannot reach inside the shadow root. Safe to ignore.

If you want the widget to match your church’s brand colors, see Customization (CSS) for the CSS variables and Shadow Parts we expose.

Verifying it works

  1. Open your live site URL in a normal browser window — not the Subsplash editor preview.

  2. Look for the widget where you placed it, or for the floating launcher (default: bottom-right) if you used Settings → Code.

  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 to Widget errors — what each one means.

Subsplash also has a general troubleshooting article for Web Embeds that’s worth a scan if the widget doesn’t appear at all — it covers Subsplash-side issues like cached CDN content and role permissions that aren’t specific to PodSaid.

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).

Match your brand

The widget renders inside a Shadow DOM, so your site’s CSS can’t reach the widget and the widget’s CSS can’t leak into your site — nothing in your theme will accidentally break the widget’s look. To make it match your church or podcast brand, the widget exposes a set of CSS custom properties and Shadow Parts you can target from your own stylesheet.

See Customization (CSS) for the full list, with copy-paste examples.

Still stuck?