How to add podcasts to your Bubble app?
Bubble
is a no-code visual programming platform to build web apps.
You can easily add playable podcasts, episodes, and playlists to web apps on Bubble.
Live Demo 1: listen-api-demo.bubbleapps.io
Live Demo 2: listen-notes-embed.bubbleapps.io
Approach 1: Use Listen API
Listen API is simple and no-nonsense podcast API that powers more
than 1,300 apps and services.
You can easily use Listen API in your Bubble apps to access to all podcasts on the Internet.
Basically, you will use the API Connector plugin to send requests to Listen API, then fetch podcast data for
your Bubble app.
You have to apply to use Listen API on this page first, because you will need an API
key.
Install the API Connector plugin
Image: Add the API Connector plugin to your Bubble app.
Set up Listen API
Click on "Add another API". Select "Private key in header" for Authentication. Put "X-ListenAPI-Key" as Key
name, and your API key as Key value.
Once your application to use Listen API is approved, you can find your API key on the DOCS
page or the DASHBOARD page.
Image: Add Listen API to your Bubble app.
Set up API endpoints
Click on "Add another call". Put the absolute url of an API endpoint and add parameters.
Click on "Initialize call" to setup the response data model.
You can find all API endpoints and parameters on the DOCS page.
You don't need to add all endpoints and parameters at once. You can do that on demand and come back to modify
those settings later.
Image: Add API endpoints your Bubble app.
Access to podcast data in your app
If you set up Listen API correctly, then you can access to podcast data via Type of content and Data source.
Image: Search podcasts right from your Bubble app.
Approach 2: Use the embed code
If you just want to embed a playable podcast, an episode, or a playlist to your Bubble app, then you just need
the embed code without using Listen API.
On ListenNotes.com, you can find the embed code on the EMBED tab of a podcast page (Example),
an
episode page (Example),
a
clip page (Example),
or a Listen Later playlist page (Example).
Image: Find the embed code under the EMBED tab.
Add HTML visual element and paste the embed code.
Image: Paste the embed code to Bubble.
You have to click on the "Preview" link at the top right corner to preview the embedded player.
Image: Preview the embedded player on Bubble.
