Skip to main content

Embed sermons on a church website

Copy a generated embed snippet into your church website, then choose a responsive layout and colours to match it.

Admins and Managers can view embed code and change embed settings. You also need to be able to add custom HTML and JavaScript to the church website. Some website builders strip scripts out, so ask whoever looks after the site if your code disappears after pasting.

Choose the main embed​

Go to Integrate, or open the integrate page directly. Under Option 2: Embed, open the instructions. The page provides two main snippets:

  • List Embed shows your published, listed sermon archive with search and filters.
  • Latest Sermon Embed always shows the most recent visible sermon. Open Only want to show your latest sermon? to reveal this code.
The Embed your sermons page showing complete snippets for the list and latest-sermon embeds

For either option:

  1. Copy the complete snippet, including both the <div> and <script> lines.
  2. Open the page editor for your church website.
  3. Add a custom HTML, embed, or code block.
  4. Paste the snippet without changing its id, data-id, or data-url values.
  5. Publish or update the website page.

The script builds an iframe that fills the width of whatever container you put it in, and adjusts its height as listeners search, filter, and open sermons. You never need to set a height yourself.

Choose a layout​

Under Customisation, choose Layout. The available layouts are:

  • List View
  • Compact List View
  • Image Grid
  • Tiny List View
  • Modern Card View
  • Minimal List View
  • Mosaic Grid View
  • Timeline View

Use the preview with your own sermons and resize the browser window to see how each layout behaves on a narrow screen. Image-led grids look best when your sermons or series have consistent artwork, while the compact, tiny, minimal, and timeline layouts barely rely on images at all.

Set embed colours​

You can set six hexadecimal colours:

  • Background Colour
  • Text Colour
  • Card Background Colour
  • Card Text Colour
  • Search & Filter Background Colour
  • Search & Filter Text Colour

Enter three or six hexadecimal characters without #, or use the colour picker. Leave a field blank to keep its default. The card colours are switched off when the layout you picked has no separate card background.

Embed Customisation with a layout selector and six colour controls above the live preview

Most layout and colour changes show up in the preview straight away, though image backgrounds and player colours only update once you save.

  1. Select Save Changes when the preview is close to the result you want.
  2. Let the preview reload to show all saved colours.
  3. Reload the page on your church website to check the saved settings there.
The embed preview showing sermon artwork, metadata, audio player, search, and filter controls

These settings apply to all of your embeds, including the focused ones below.

Embed one sermon or a focused collection​

Each edit page provides its own complete embed code:

  • Single sermon: Go to Sermons, open the sermon, then find Embed Code under Advanced.
  • Series: Go to Series, open the series, then find Embed Code for this Series under Advanced.
  • Preacher: Go to Preachers, open the preacher, then find Embed Code for this Preacher under Advanced.
  • Meeting: Go to More > Meeting Types, open the meeting, then find its embed code.
  • Playlist: Go to More > Playlists, open the playlist, then find its embed code.

Copy and paste the complete snippet just as you would the main list embed. Series, preacher, meeting, and playlist embeds keep themselves up to date as matching sermons change.

When a listener opens a sermon in the player, they can play the audio, open any attachments, and use Share. Share opens the device's own share menu where there is one, and otherwise copies the public sermon link.

Legacy embeds​

Some older accounts show Legacy Embed at the top of the embed instructions. Stick with it only where an existing website still depends on it, and use the snippets above for anything new.

If you do not see a legacy link, there is nothing to worry about. It only appears for accounts that might still be using that version.

If this did not work​

  • Nothing appears on the church website: Check that the website builder kept both lines of the snippet and allows third-party JavaScript. The browser console usually says which one is the problem.
  • The embed is too narrow: Put it in a full-width content block and remove any fixed width from the container around it.
  • Colours in the player did not change: Select Save Changes, wait for the preview to reload, then reload the page on your own website.
  • A sermon is missing: Check that it is published, that its date is not in the future, and that neither it nor its series or preachers are unlisted.