Listen Notes

How to integrate Listen Notes with Webflow

Listen Notes lets you add podcast content to Webflow sites without managing audio hosting or building custom players. You can embed episode players directly on pages, automate podcast content updates in your CMS, or build custom search interfaces for podcast discovery.

Connect Listen Notes with Webflow by using iframe embeds to add podcast players using Webflow's Custom Code Embed element. For automated content management and custom search, use the Listen Notes API with Webflow's APIs through a server-side proxy.

Use Webflow Code Embeds and Listen Notes widgets

Listen Notes provides iframe embeds for podcast episodes, shows, playlists, and clips. Add these to Webflow pages using the Custom Code Embed element.

To implement this, find your content on Listen Notes and copy the embed code from the EMBED tab. Then, paste it into a Webflow Embed component.

You can embed:

• Episode players with playback controls and artwork
• Show embeds displaying recent episodes with automatic updates
• Listen Later playlists for curated episode collections
• Podcast clips for specific segments

Embedded players handle audio streaming and licensing. The players work with Webflow's responsive breakpoints, though you may need to adjust embed dimensions in custom code settings for mobile display.

CMS Collections can store multiple podcast embeds. Create a Collection field for embed codes, then add Listen Notes iframe code. Content editors can add podcast content without accessing Webflow.

Build with Webflow and Listen Notes APIs

API integration enables automated podcast content management, custom search interfaces, and real-time CMS synchronization. You'll need server-side code because Listen Notes blocks direct browser API calls through Cross-Origin Resource Sharing (CORS) policies.

Your implementation needs three components:

1. A server-side proxy (using Netlify Functions, Vercel Edge Functions, or custom backend)
2. The Listen Notes API for podcast data
3. Webflow's Data API for CMS operations

The proxy receives requests from your Webflow site, calls Listen Notes with your API key, and returns formatted data. The ListenApiDemo repository provides working proxy examples in multiple languages.

The APIs enable:

• Searching across 3M+ podcasts in Listen Notes' database
• Retrieving episode metadata including transcripts, show notes, and audio URLs
• Submitting podcasts with POST /podcasts/submit endpoint
• Managing podcast listings using DELETE /podcasts/{id} endpoint
• Updating Webflow CMS via staged items API

Automate podcast content to Webflow CMS

Podcast content automation pulls episode data from Listen Notes and creates or updates Webflow CMS items. This works for podcast directories, episode archives, or sites featuring podcast content.

Set up a scheduled function that queries the Listen Notes search API for episodes matching your criteria. Parse the response JSON to extract episode titles, descriptions, audio URLs, and artwork. Use Webflow's CMS API to create Collection items with this data.

Authentication for both APIs happens server-side. Listen Notes requires an X-ListenAPI-Key header:

curl -H "X-ListenAPI-Key: YOUR_API_KEY" \
  -X GET "https://listen-api.listennotes.com/api/v2/search?q=javascript"

While Webflow uses OAuth tokens for API requests.

Listen Notes provides webhooks for podcast submissions (podcastsSubmitAccepted, podcastsSubmitRejected, podcastDeleted), but not for episode releases or content updates, so you'll need polling-based sync for new episode detection.

Build custom podcast search interfaces

Custom search interfaces let you query Listen Notes' podcast database and display results in Webflow layouts.

Your server-side function accepts search queries from Webflow forms or client-side JavaScript, forwards them to Listen Notes' search endpoint, and returns formatted results. You can filter by genre, language, publication date, or other metadata fields documented in the Listen Notes API tutorials.

Webflow Collection Lists display search results dynamically. Use custom JavaScript to populate Collection items with search data. The ListenApiDemo repository shows working implementations in multiple languages.

Consider implementing client-side caching for repeated searches to reduce API calls and stay within rate limits.

What you can build

Integrating Listen Notes with Webflow enables podcast showcase sites, automated content directories, and media platforms:

• Podcast showcase sites: Build portfolio sites for podcast creators with embedded players for each episode, automated episode archives that update when new content publishes, and dynamic show pages pulling metadata from Listen Notes.
• Automated podcast directories: Create searchable podcast databases that sync with Listen Notes' catalog, filter by category or genre, and display episode counts and subscriber metrics.
• Content marketing hubs: Embed relevant podcast episodes alongside blog posts, pull podcast transcripts into CMS items, and create curated listening lists organized by topic.
• Media company websites: Build publisher sites featuring multiple podcast shows, centralized episode management through Webflow CMS, and cross-promotional content between articles and podcast episodes.