The River ChurchSermons

Putting the sermon search on another page

One script tag and one empty div. No build step, no framework, and no iframe — paste this into a Church Co code block and the search appears where the div is.

The snippet

<div class="trc-sermons" data-filters="1"></div>
<script src="https://forms.theriverchurch.cc/sermons/embed.js" async></script>

Options

AttributeWhat it does
data-seriesLock the widget to one series. Keys today: let-us, romans.
data-filters="1"Show the series / preacher / location selects. They are built from the data, so a new series or campus appears on its own.
data-limitResults per page, 1–25. Default 8.
data-headingA heading rendered above the box.
data-placeholderOverride the input's placeholder text.

Examples

<!-- Just the current series, no filters -->
<div class="trc-sermons" data-series="let-us" data-heading="Search this series"></div>

<!-- Everything, with filters, ten at a time -->
<div class="trc-sermons" data-filters="1" data-limit="10"></div>

<!-- One script tag serves any number of divs on the page -->
<script src="https://forms.theriverchurch.cc/sermons/embed.js" async></script>

What it will and will not do

The endpoint underneath

GET https://forms.theriverchurch.cc/sermons/api/search.php?q=grace&limit=5 — JSON, read-only, public. ?facets=1 returns the series, preachers, locations and topics the filters are built from. Nothing in it is anything a visitor could not already read by clicking through.

See a live response →