Introducing the iFrame API
Posted March 31st, 2022
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.
How the iFrame API works
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.
What can podcasters use the iFrame API to build?
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:
Podcast episode highlights
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.
Episode categories and recommendations
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.
New episode notifications
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!