Opening the Embed Code Editor from the Sermon Dashboard

You can get your embed codes from the Sermon Dashboard.  Log in and click on the menu option in the Dashboard to open the embed codes editor.

Opening the Embed Code Editor from the Player

If you are already listening to the sermon you can get the embed code right from the player. Just look for the Embed Icon in the lower right corner of the player and click on it. This will open the window where you can select the options you want for your personalized embed.

Opening the Embed Code Editor from a Live Webcast Player

If you are already listening to a live webcast you can get the embed code right from the webcast player. Like the regular player just look for the Embed Icon in the lower right corner of the window and click on it. This will open the window where you can select the options you want for your personalized embeddable webcast player.

Opening the Embed Code Editor from a Sermon Page

You can also get the embed code for any sermon on the site from the sermon page. To do so, first, navigate to the sermon page of the sermon that you wish to embed. This is the page with the big green PLAY button. You can get there by clicking on the title of any sermon in a listing on the site.

Just click on the EMBED button to open the window where you can select the options you want to be included in the embed code for your personalized player.

Opening the Embed Code Editor from the Homepage dropdown

The embed code editor can be accessed as well from the “More” drop-down on the broadcaster homepage.

Our HTML sermon-player is 100% HTML5-friendly and free of any flash components. It is also responsive so it works and looks fantastic at any size, on any device. It loads super-fast and the playback scrubbing is very smooth. The sermon player has a built-in ability to adjust the playback speed and to skip back and forward in the sermon in increments of 15-seconds. You can even jump to a time in minutes and seconds.
The player displays an aesthetically pleasing waveform representation of the audio and is fully responsive stretching to fit any size display. Choose between light or dark themes or specify a starting time to begin playback. The embed code supports automatically displaying the newest sermon by broadcaster, speaker, event type or series.

Embedding the player on your website is as easy as copy and paste. You can get the code from the sermon page or the player itself right while the sermon is playing.

For most single sermon embeds it is best to open the embed editor from the sermon page or player. Opening it from the homepage dropdown will limit your embed option to only the newest sermon from that account. If you need help finding the embed button see the steps above.

After clicking on the embed button you will be presented with the universal embed codes editor and a number of options to configure the player for your site. A live preview of the player as it will appear on your website will be displayed to the right of the options so you can see your changes as you make them!

Audio or Video

If available, video will be selected by default but if audio is also available you can also select it using the toggle at the top of the window.

You can also create embeds for webcasts and a full sermon browser from this dialog but that is covered in the sections below. Go ahead and select either the audio or video selection to change the code to embed your desired format.

Sermon Selection

Next, let’s select which sermon you wish to embed. If you opened the embed editor from a sermon or sermon page the default will be the “Single Sermon” option and will display the sermon you were on when you clicked into the editor window. (Note: If you open the embed editor from the Podcast dropdown on your homepage this option will not be available).

Now, if you click the sermon drop down, there you can also select the following options:[list]

• Most recent from Broadcaster (This will embed the newest sermon from the Broadcaster account where this sermon resides.)
• Most recent from Speaker (This will embed the newest sermon in the account by the speaker of this sermon.)
• Most recent in Series (This will embed the newest sermon in the series that this sermon is a part of. If the sermon is not part of a series this selection will default to “Most recent from Broadcaster.”)
• Most recent in Event Type (This will embed the newest sermon of the same event type posted to this Broadcaster’s account.)[/list]

These will automatically be updated on the webpage where you embed the code with the newest sermon for the category that you select.  So, as an example, if you select “Speaker” from the drop-down, the code will automatically look to see what the latest sermon in this Broadcaster’s account by that speaker is and display that sermon.  When a new sermon by that speaker is posted the embed will dynamically change the sermon listed for you. Pretty neat, huh?

Width Selection

The player width setting is customizable if you need a specific width player for your site, but we recommend the default “auto” setting for most implementations as the player is responsive and will automatically adjust to any size screen on its own.

Mini Player

A player for tight places or for those that just like things small.

Custom Start Time

There is even an option to begin the sermon at a particular time. Simply check the “Use Custom Time” box and slide the start time over to where you wish the sermon to begin playing. You can fine-tune your start time second by second with the arrows on each end of the timeline and hear or see the new start time by clicking the play button on the preview below. (Note: this option is only available when you have the single sermon option selected. It cannot be set with a dynamically changing sermon embed.)

Autoplay

Checking this box will start the sermon automatically when the page it is embedded on loads. (Note: This can be an annoyance to some listeners so use this sparingly. This is especially important if you embed more than one sermon on a single page. If they both have the autoplay option enabled they will both start playing at the same time.)

Themes

When the audio player is selected, two themes are available. Choose the dark theme for websites that need a darker player or stick with the lighter theme if that looks better.

SSL

Do you have a secure site?  Need a secure player? SSL is built into our embed codes so you do not need to worry about that, we have you covered!

Once you have created the embed with the options you want, jump down to the “Copy and Paste” section.

You are almost done!

Clicking over to the “Webcast” embed option will display the webcast player window and if there is a webcast in progress for that Broadcaster, it will show up in the preview window at the bottom.

The webcast embed options are as follows:

Width Selection

The first is the player width setting which is customizable if you need a specific width player for your site, but like the audio and video players, we recommend the default “auto” setting for most implementations as the player is responsive and will automatically adjust to any size screen on its own.

Autoplay

Checking this box will start the webcast automatically when the broadcaster goes live. This can be a great help to your viewers as there is no longer any need to refresh the page.  As long as the page you have the player embedded on is open the webcast will begin to play on its own without any user interaction. We recommend that you check the Autoplay box! It just makes it dead simple for people coming to your website to watch any live broadcasts in progress.

Button

If you wish to simply display a button that alerts your visitors to the fact that there is a live webcast in progress you can select the Button Only option and then choose from several colors and configurations.

Note: All single sermon (audio or video) and sermon browser embed codes will also display a notification automatically for your visitors alerting them to a webcast in progress. We do not want your visitors to miss your live broadcasts!

Once you have created the embed with the options you want, jump down to the “Copy and Paste” section.

You are almost done!

The sermon browser is so fully-functional that it can almost double as its own standalone sermon site! It allows users to display, page through, and filter then listen to, watch or download any of your sermons without ever leaving your website. All with a single line of copy and paste code! Best of all it is responsive so it will look great on any device!

We think the defaults are a great look but if you want to change things up, you can do that too. As you make changes, they will be immediately reflected in the preview at the bottom of the window.  You can interact fully with the preview and it will act and look exactly as it would when embedded elsewhere.  So let’s get started and take a look at what you can do.

First, you can choose either to display All Sermons or filter the sermons and only display a subset of all the sermons in your account.  The options for this are to show a particular Series, Event, Speaker, Language, Bible book, or Year.

Selecting a subset will display a second filter drop down where you can then select which one of the speakers, etc. that you wish to display by default.

Next, once you have selected the set of sermons you wish to display by default, you can also select how they are sorted or what order they will appear in.

All your sermons are still available to the user and you will notice that the filter and sort menus will also appear in the browser.  So if a visitor to your site wishes to see a larger set or perhaps a different set of sermons they can do that using the filter and sort menus in the browser itself.

However, you can override this and remove the filtering and sorting from the embed code. This is helpful when you only want to display a certain set of sermons like a series but do not want to include the rest of your sermon content in that particular embed. To turn off the ability to filter and sort the sermons in your embed just uncheck the “Show Filter Options” box. It’s that simple.The “Show Header” checkbox will toggle the header on and off in your embed.“Show Page Options” toggles the pagination controls at the bottom of the browser embed on and off.

You can also Remove the Background, toggle between light and dark themes, and add or remove an outside border to the browser with the click of a mouse.

But we are not finished just yet!

Width Selection

The browser width setting is customizable if you need a specific width browser for your site, but like the embed codes, we recommend the default “auto” setting for most implementations as the browser is responsive and will automatically adjust to any size screen on its own.

Height and Sermons Per Page

You can also specify how many sermons to display on a page and how tall the browser window is in pixels.  The height drop-down and the “Sermons per page” value work together to control how large overall the sermon browser is on your page and how many sermons are displayed on each page of the browser.  If you set the height too high and the number of sermons per page too low, you will end up with empty space at the bottom of the browser. If you wish to avoid this (and we really think you should) and you need to change the default height we highly recommend that you try different values in the sermons per page box to ensure that you do not leave a blank space at the bottom.  If you have more sermons than will fit in the browser window, a scrollbar will appear along the right-hand side of the browser window to allow the user to smoothly scroll through the sermons on a page within the browser.

Once you get it looking the way you like it all that is left is to copy and paste the code into your website.

The next section will show you how!

Once you have your embed configured the way you like, simply click the “Copy” button next to the line of code in the center of the window and copy it to your website.

You will know that you have captured the code on your clipboard when it says “Copied!”You can now open a new page in your CMS (content management system) and paste the code into it. It is really that simple!

[alert style=”note”] And last but not least, be sure that when you paste the code into your website you paste it “as code” and not as HTML. Some CMSs like WordPress Joomla, or Drupal, etc. will alter the code and insert characters in an attempt to make it into HTML if it is not pasted into the page “as code.” Doing so breaks the functionality of the embed code so make sure the text of the embed code that you paste into your page is not altered by your CMS (Content Management System).[/alert]

 

That’s it!  You just embedded a sermon, webcast player or fully functional sermon browser into your site!