How to host a podcast on a Bubble.io app: Step-by-Step Guide

Go to the Data tab and create a new Data Type called Episode. Add these fields: Title (text), Description (text), Audio File (file), Cover Image (image), Season Number (number), Episode Number (number), Duration (text such as 45:30), Published Date (date), Is Published (yes/no, default no), and Show Notes (text). This structure stores everything needed for both your app player and external podcast directories.

Create an admin page called manage-episodes. Add a File Uploader element configured to accept only audio files (mp3, m4a, wav). Add Input fields for Title, a Multiline Input for Description, an Image Uploader for the cover art, number Inputs for Season and Episode numbers, and a Multiline Input for Show Notes. Add a Save Draft button with this workflow: Create a new thing of type Episode, mapping each field. Set Is Published to no initially so the creator can review before publishing.

Create a page called podcast. Add a hero section with your podcast title, cover image, and a brief description. Below that, add a Repeating Group with Type set to Episode, Data source set to Do a Search for Episodes where Is Published is yes, sorted by Published Date descending. In each cell, display the episode cover, title, episode number, published date, duration, and a truncated description. Add a Play button in each cell.

At the bottom of the podcast page, add a Floating Group pinned to the bottom of the viewport. Inside it, add an HTML element with an HTML5 audio tag with controls. Use a custom state on the Floating Group called Current Episode (type: Episode) to track what is playing. Add a Text element next to the player showing the current episode title. Create a workflow on each episode's Play button: Set state of the Floating Group to Current Episode equals Current cell's Episode. Use a JavaScript workflow action to update the audio element source and call play.

1<audio id="podcast-player" controls style="width:100%;">
2  <source src="" type="audio/mpeg">
3  Your browser does not support the audio element.
4</audio>

Above the Repeating Group, add a Search Input and a Dropdown for Season number. Modify the Repeating Group's data source to include constraints: Title contains Search Input's value and Season Number equals Dropdown's value. Check Ignore empty constraints on both so the list shows all episodes when filters are empty. Add a text counter above the list showing the count of the filtered results.

Enable Backend Workflows in Settings then API tab. Create a new Backend Workflow called rss-feed and check Expose as a public API workflow. In this workflow, use the Return data from API action to return XML content. Build the RSS XML structure with channel metadata including title, description, link, and image, then iterate through published episodes generating an item tag for each with title, description, enclosure with the audio file URL, pubDate, and duration. The endpoint URL becomes your RSS feed link for podcast directories.