Listen Notes

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

Install app
View website
View lesson
A record settings
CNAME record settings
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.

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.

Listen Notes
Listen Notes
Joined in

Category

Assets

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.

Install app

This integration page is provided for informational and convenience purposes only.


Other Assets integrations

Other Assets integrations

Hugeicons

Hugeicons

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

Assets
Learn more
Vectary 3D & AR

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.

Assets
Learn more
AI Image Enhancer

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.

Assets
Learn more
Vimeo

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.

Assets
Learn more
Videezy Webflow Integration

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.

Assets
Learn more
Unsplash

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.

Assets
Learn more
Uploadcare

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.

Assets
Learn more
SVGator

SVGator

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

Assets
Learn more
StickPNG

StickPNG

Explore our curation of thousands of free transparent PNGs.

Assets
Learn more

Related integrations

No items found.

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free