BibleSlides

Website integration guide

Put sermons on your church website. Use the wizard in your BibleSlides page settings to copy ready-made code, or read the sections below for technical details.

Embedded pages (iframe)

An iframe is a window on your website that shows another page inside it — like a picture frame for web content. BibleSlides can give you a block of HTML that embeds your sermon library or latest message. The embed auto-resizes so visitors do not see scrollbars inside the frame.

Full library shows search, filters, and your sermon grid (same as your public BibleSlides page). Latest sermon shows one card for the most recent message.

Chromeless (embed=chromeless) hides your church banner inside the embed — useful when your website already has its own header. Paste the full code block from the wizard, including the small script after the iframe, so height adjusts automatically (embedAutoresize=1).

Filter by service type

If you publish multiple worship streams (for example Sunday morning and Wednesday night), you can limit an embed to specific ones. In the wizard, uncheck streams you want to hide on that embed only — your full BibleSlides page is unchanged.

Technically, a partial selection adds ?services= to iframe URLs and a services attribute on widget tags. Leave all checked to show every stream.

Developer API (JSON)

Read-only JSON for published sermons on a church page. No API key. CORS enabled for use from any website. Replace {username} with your church URL slug (same as /public/user/{username} or /{username}).

Base URL

https://bibleslides.app/api/v1

Endpoints

  • GET /churches/{username}

    Public page settings: church name, logos, series graphics, teachers.

  • GET /churches/{username}/sermons

    Query: services (comma CSV, resolved type), series, scripture (substring), q (search title/speaker/scripture/topic/series), sort (publishedAt | datePreached | title), dir (asc | desc), limit (default 20, max 50), cursor (opaque; only with sort=publishedAt + dir=desc), offset / nextOffset (for other sorts), pretty=1 (church object only; JSON pretty-print).

    JSON includes query (echo of applied filters), sortOptions, filters, and per-sermon cardImageUrl (slide thumbnail or series graphic for list/grid cards).

  • GET /churches/{username}/sermons/recent

    Query: service — newest sermon in that stream.

  • GET /churches/{username}/sermons/{sermonId}

    One sermon; sermonId is the Firestore published presentation id.

  • GET /churches/{username}/sermons/{sermonId}/content

    Query: mode=transcript (full published HTML) or mode=discussion (discussion callouts only, or PDF URL when questions are PDF-only). Used by embed widgets for in-page lightboxes; CORS enabled.

  • GET /churches/{username}/series

    Series with optional graphic URL and sermon counts.

  • GET /churches/{username}/service-types

    Distinct resolved service types on the page.

Sermon cards (widgets)

Widgets render sermon cards directly on your page — not inside a separate window. You paste a short script once, then add HTML tags where you want sermons to appear. Cards can match your site's fonts and colors.

Load https://bibleslides.app/embed/v1/widgets.js once, then use custom elements. Optional api-base if you test against another host. Optional theme (auto | light | dark). Optional surface for widget background: default, white, blue (soft blue page behind cards), or cream / warm. For full control, set widget-bg and/or card-bg to a CSS color (hex, rgb, or hsl). Set font-family (e.g. inherit) to make body text match your site, and font-family-heading to give sermon titles their own stack (useful when your site pairs a serif heading with a sans body). bibleslides-recent-sermon also supports variant="header" for a hero-style recent message header.

<script src="https://bibleslides.app/embed/v1/widgets.js" defer></script>
<bibleslides-sermon-list church="your-slug" page-size="12" view="grid" surface="blue"></bibleslides-sermon-list>
<bibleslides-recent-sermon church="your-slug" service="Sunday Morning" surface="white"></bibleslides-recent-sermon>
<bibleslides-recent-sermon church="your-slug" variant="header" service="Sunday Morning"></bibleslides-recent-sermon>
<bibleslides-series-list church="your-slug"></bibleslides-series-list>
<bibleslides-sermon-detail church="your-slug" sermon-id="pub-…"></bibleslides-sermon-detail>

Watch, Transcript, and Discussion buttons open a lightbox and load content through the /content API (no navigation to BibleSlides for those actions). Card clicks still open the sermon page unless you listen for bibleslides:sermon-click and call preventDefault().

← Back home