Embedding the PodSaid widget

The widget is a Web Component (<ask-pod-widget>) plus a single <script> tag from our CDN. It renders a floating chat launcher on your site; visitors click it to ask questions about your feed’s content, and every answer cites the exact moment in the sermon or episode. The widget’s UI lives inside a Shadow DOM, so your site’s CSS can’t reach it and its CSS can’t leak into your site — no theme conflicts, no CSS resets to write.

Want to see the finished product on a real customer’s site first? See it in action — three screenshots from Second Baptist Church Houston walking through launcher → question → citation-jumps-to-video.

The whole process, end to end

1. Sign up at console.podsaid.com and create a feed for your podcast or church sermon library. Point it at your RSS feed or YouTube channel.
2. Wait for ingest. We fetch, transcribe, and index every episode. Takes hours for a normal-sized library; you get an email when it’s ready. See How ingest works (and why it takes hours).
3. Grab your embed code from Console → Settings → Embed Code. It’s two lines of HTML with your feed-id and pk_live_* public key already substituted.
4. Paste it into your site. The right spot depends on your platform — pick your platform below, or use the universal fallback for any site.
5. Add your domain to Allowed Origins. This locks the public key to your sites and no one else’s.
6. (Optional) Match your brand with the widget’s CSS variables — accent color, font, spacing, launcher label.

About the security model — same as Stripe’s

The pk_live_* key in your embed code is public by design, exactly like Stripe’s pk_live_* publishable keys. It’s pasted into the page’s HTML in plain sight; every visitor’s browser can read it. That’s fine, because:

• Origin-locked. Every request the widget makes to our API carries the browser’s Origin header. Our server checks it against your Allowed Origins list; anything else gets a 403 (origin_denied). Someone copying your key out of “view source” and pasting it on their own site sees nothing but denials.
• No secret key exists. There is no sk_live_* for the widget. Nothing to leak; nothing to guard. Sensitive operations — creating feeds, minting keys, viewing usage — happen behind your Console login, which is a separate credential entirely.
• Rotate anytime. From Console → Settings → Embed Code you can revoke the current key and mint a new one. Same rotation UX as Stripe. Old embed pages start failing with key_revoked; you update the paste and you’re back.

The Stripe parallel is intentional. Frontend developers already know the “public API key in the browser” model from years of Stripe Elements, Google Maps, Mapbox, and Turnstile. We haven’t invented anything new here.

Prefer to have an AI do it for you?

If your dev workflow includes Claude Code or any Claude Agent SDK app, skip the hand-written install. We ship a Claude Code install skill that auto-detects your framework, edits the right file, wires TypeScript types, and verifies the widget renders. One-line install — curl -sfL https://console.podsaid.com/install-skill.sh | bash (bash) or iwr -useb https://console.podsaid.com/install-skill.ps1 | iex (PowerShell).

Or read on for per-platform hand-written recipes below.

By platform

Coming soon

Queued as customers hit them. Email [email protected] to bump priority on any of these.

Cross-cutting reference

• See it in action — screenshots of the widget on a live customer site (Second Baptist Church Houston).
• Allowed origins — the security allowlist that makes your pk_live_ key safe to expose publicly. Every embed doc links here for the domain-management story.
• Customization (CSS) — the CSS variables and Shadow Parts the widget exposes for matching your brand.

When you’re stuck

• Widget errors — every reason code, with a fix
• Support — human help if the errors index doesn’t unstick you