Posted March 31, 2022

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.
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.
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.
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
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.
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.
Get started
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!