Josh Brown

For years, podcasters have been adding Spotify shows to their own websites using Spotify Embeds. Today we're introducing the iFrame API: a new way to integrate Spotify podcast content into your website. Using the iFrame API, a website can programmatically start or stop podcast playback, change the episode displayed to users, and customize the look and feel of an embedded Spotify podcast. Read on to learn more.

When you add a podcast to your website using the iFrame API, a DOM element of your choice is replaced by a Spotify-powered iFrame. The iFrame includes an interactive Spotify podcast episode — called an Embed — with a height, width, and podcast episode that you define.

After the Embed has been created, your website can use the methods of the iFrame API to start or stop playback of the podcast, load new content in the Embed, or even seek to a point in the podcast of your choosing. Each web page can have one Embed created by the iFrame API or several Embeds. The iFrame API emits JavaScripts events – like playback_update — that your website can use to create an even deeper integration.

We hope that podcasters and web developers will use the iFrame API to share their content with fans in new ways. Some applications of the iFrame API include:

Using the seek() method, websites can show buttons that begin playback of a specific segment of the podcast episode. For example, next to a podcast episode with three guest interviews, you could display a panel that helps users find and begin listening to the segment with their favorite guest.

Some podcasts have episodes about a wide range of topics. You can use the iFrame API to build a user interface that helps users find episodes that match their interests.

For example, if a user is browsing the front end development category of your blog then you could display a panel at the bottom with a selection of podcast episodes that relate to front end engineering. Use the loadUri() method to switch the content of the Embed when the user selects one.

Are your listeners desperately awaiting your next episode? Consider offering visitors to your website the option to be notified when there is a new episode online. If your website displays an Embed with the latest show then you could dynamically refresh it using the loadUri() method — even when the user hasn't left the page.

Check out our new guide, Using the iFrame API for more information about implementing the iFrame API. If you have questions or feedback about this new feature then come join us in the Spotify for Developers community and let us know. Happy coding!