Listen Notes
Connect Listen Notes with Webflow to embed podcast players and sync podcast content to your CMS automatically.

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:
- A server-side proxy (using Netlify Functions, Vercel Edge Functions, or custom backend)
- The Listen Notes API for podcast data
- 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.
Frequently asked questions
Yes. Copy iframe embed codes from Listen Notes and paste them into Webflow's Embed element.
Locate content on Listen Notes, click the EMBED tab, and copy the provided iframe code. Then, in Webflow, add an Embed element to your page and paste the code. This method handles audio streaming and playback without additional configuration.
Yes. Copy iframe embed codes from Listen Notes and paste them into Webflow's Embed element.
Locate content on Listen Notes, click the EMBED tab, and copy the provided iframe code. Then, in Webflow, add an Embed element to your page and paste the code. This method handles audio streaming and playback without additional configuration.
Listen Notes blocks browser-based API requests through CORS policies. Direct JavaScript calls from Webflow pages fail with cross-origin errors. You need a server-side proxy to make API requests. Deploy serverless functions on Netlify or Vercel, or run a custom backend server.
Your proxy receives requests from Webflow, adds the Listen Notes API authentication key, calls Listen Notes, and returns data to your site. The ListenApiDemo code repository provides working proxy examples in Node.js, Python, Ruby, and other languages.
Listen Notes blocks browser-based API requests through CORS policies. Direct JavaScript calls from Webflow pages fail with cross-origin errors. You need a server-side proxy to make API requests. Deploy serverless functions on Netlify or Vercel, or run a custom backend server.
Your proxy receives requests from Webflow, adds the Listen Notes API authentication key, calls Listen Notes, and returns data to your site. The ListenApiDemo code repository provides working proxy examples in Node.js, Python, Ruby, and other languages.
Listen Notes doesn't provide webhooks for new episode releases. You'll implement polling-based synchronization using scheduled serverless functions. Your function queries the Listen Notes search API on a schedule (daily or weekly), retrieves new episodes matching your criteria, and creates Webflow CMS items using the Webflow CMS staged items API.
Store episode IDs to prevent duplicates. Both platforms enforce rate limits that vary by account tier as documented in the Webflow rate limits documentation and your Listen Notes account dashboard.
Listen Notes doesn't provide webhooks for new episode releases. You'll implement polling-based synchronization using scheduled serverless functions. Your function queries the Listen Notes search API on a schedule (daily or weekly), retrieves new episodes matching your criteria, and creates Webflow CMS items using the Webflow CMS staged items API.
Store episode IDs to prevent duplicates. Both platforms enforce rate limits that vary by account tier as documented in the Webflow rate limits documentation and your Listen Notes account dashboard.

Description
Listen Notes is a podcast search engine and database that provides access to over 3 million podcasts. The platform offers an API for podcast search, metadata retrieval, and content management. It also provides embeddable podcast players for websites.
This integration page is provided for informational and convenience purposes only.

Hugeicons
Connect Hugeicons with Webflow to get scalable, professional icons to your projects with direct access to 40,000+ SVG assets.

Vectary 3D & AR
Connect Vectary's browser-based 3D and AR platform with Webflow to create interactive product visualizations, AR experiences, and immersive web content without complex coding.

AI Image Enhancer
Connect AI Image Enhancer by OLAI to your Webflow site to upgrade image quality and generate custom visuals without leaving your workspace.

Vimeo
Connect Vimeo's professional video hosting platform with Webflow to create engaging websites with high-quality video content, custom players, and seamless CMS integration. Display portfolio reels, educational content, or background videos while maintaining complete control over playback and design.

Videezy Webflow Integration
Connect Videezy (HD stock video library) with Webflow to create engaging backgrounds, hero sections, and dynamic galleries using free and premium footage — no complex production required.

Unsplash
Seamlessly integrate Unsplash's library of over 5 million high-quality, royalty-free images directly into your Webflow Designer. Search, filter, and insert professional photography without leaving your design environment, accelerating content creation while maintaining visual excellence.

Uploadcare
Connect Uploadcare's powerful file handling capabilities with Webflow to enable advanced file uploads, image optimization, and content delivery for your websites. This integration allows site visitors to upload files directly through your Webflow forms, automatically processes images for optimal delivery, and stores files securely in the cloud — all without complex backend infrastructure.

SVGator
Add SVGator animations to Webflow sites for scalable vector motion graphics with interactive triggers.

StickPNG
Explore our curation of thousands of free transparent PNGs.