Sermon Widget
You've created a sermon series, and you're using sermons and sermon series in your app. Want to get those same great sermons onto your website? We have a widget for that!
- Get your "customer slug", which is an easy-to-read, unique identifier for your organization.
- Have the URL you want to use for the widget permitted in the app's API.
After you talk with Support, you can use the sample embed code below anywhere on your website, and you'll immediately see the published sermon series and sermons – the same as users see in your app. Be sure to replace "[[customerSlug]]" with the information you got from Support.
<div id="sermons-widget"></div>
<script src="https://static-files.prod.pocketplatform.io/PocketPlatform.js"></script>
<script>
PocketPlatform.sermons().then(sermons => {
sermons.init(document.getElementById('sermons-widget'), {
customerSlug: '[[customerSlug]]'
});
});
</script>Filtering the Sermon Widget
You can filter the widget to show a certain Sermon Series Type, which is like a "bucket" of media. For example, you might add the widget on a page of your website dedicated to kids and filter it by Children's Lessons. You might set the widget to show Devotionals on your home page.
To do this, use the code above and add the following after your customerSlug: , Sermon_Series_Type_ID: then enter the ID number of the sermon series type. For example:
<div id="sermons-widget"></div>
<script src="https://static-files.prod.pocketplatform.io/PocketPlatform.js"></script>
<script>
PocketPlatform.sermons().then(sermons => {
sermons.init(document.getElementById('sermons-widget'), {
customerSlug: '[[customerSlug]]',
Sermon_Series_Type_ID: 1
});
});
</script>Customizing the Sermon Widget
The Sermon widget has a clean, minimal style intended to complement any church website. You can customize certain elements such as fonts and colors to future promote a seamless widget experience!
- Sermon widget customization assumes knowledge of CSS. At this time, we do not provide a default CSS file to start from. For best results, we recommend a web developer handle this!
- Many elements can be individually customized. However, it is not necessary (or recommended) to customize every element.
- There are several ways to apply CSS to the widget on your website, so pick the best option for your church. You can:
- Add new CSS code to your existing website's CSS files.
- Upload a new CSS file specifically for the Sermon widget, and add a reference to that file on the page where you host the widget.
- Write inline CSS on the page along with the Sermon widget.
- All of the <div> elements in the Sermon widget have CSS classes prefixed by
--p-, followed by a name that corresponds to the kind of content displayed. - Elements that are not <div>s may or may not have CSS classes. Many times, they do not because you can target that element using the parent object. For example, there is no CSS class for the Sermon Series title on the list of Sermon Series screen. However, you can target it using
.--pp-sermon-series-list-container h1.
Sermon Widget Customization Walkthrough
- You should have knowledge of CSS and how your church website uses it.
You can change the look of the List of Sermon Series, Sermon Series Detail, and Sermon Detail screens.
The widget loads with a list of sermon series.
When a sermon series is selected, the series title and image display, along with a list of sermons.
When a sermon is selected, its title, image, and description display.