Listen Notes

Webflow does not include a built-in podcast player, podcast search engine, or any native connection to podcast directories. If you want visitors to browse, search, or listen to podcast episodes on your site, you need to bring that functionality in from an external source. Without it, podcast content lives exclusively on platforms like Spotify and Apple Podcasts, pulling traffic away from your owned domain.

Listen Notes connects Webflow to a database of over 3.7 million podcasts and 188 million episodes. You can embed individual episode players, add a full podcast search bar, or pull episode metadata into Webflow CMS collections through the Listen Notes API. The combination keeps podcast listeners on your site instead of sending them to third-party apps.

This integration works well for marketing teams embedding a branded podcast on a company site, media entrepreneurs building podcast directories, EdTech platforms curating audio learning resources, and PR agencies researching shows for guest pitching. Any Webflow site that needs podcast content, whether a single player or a searchable database, can use Listen Notes to get it there.

How to integrate Listen Notes with Webflow

What is Listen Notes? Listen Notes is a podcast search engine and API provider that indexes over 3.7 million podcasts and 188 million episodes across 29 languages. It offers embeddable players, a custom search widget, and a REST API (Listen API v2) used by over 12,600 companies and developers to build podcast-powered applications.

Teams typically pair Listen Notes with Webflow when they need podcast content on pages they fully control. A SaaS company might embed episode players on a marketing site. A niche community might build a filterable podcast directory. A content team might populate CMS collection items with episode metadata so each episode gets its own SEO-indexed page. The approach you choose depends on how much control you need and how many episodes you plan to feature.

The Listen Notes-Webflow integration supports 3 approaches:

• Listen Notes embed widgets let you add podcast players and search bars to any Webflow page without writing code or using an API key.
• CMS dynamic embeds let you store episode embed URLs in Webflow CMS fields and render unique players on each collection page from a single template.
• The Webflow and Listen Notes APIs give you full control over podcast search, episode data retrieval, and CMS population, but require server-side development.

Most implementations combine the embed approach for quick wins with API-based methods for more complex, data-driven features.

Add Listen Notes players with Code Embed elements

Listen Notes provides embeddable iframe players for individual episodes, full podcast shows, audio clips, and Listen Later playlists. It also offers a custom search widget that lets visitors search the entire podcast database from your site. All of these work inside Webflow's Code Embed element, which accepts HTML, CSS, and JavaScript. No API key or coding is required for any embed type.

Embed an episode or podcast player

Each podcast page, episode page, clip, and playlist on Listen Notes has an EMBED tab that generates an iframe snippet. You copy that snippet and paste it into a Code Embed element in Webflow.

To embed a player:

1. Go to listennotes.com and find the podcast, episode, clip, or playlist you want to feature.
2. Click the EMBED tab on that page and copy the iframe HTML code.
3. In Webflow, open the Add panel (the + icon in the left sidebar), find Components, and drag an Embed element onto your canvas.
4. Double-click the element to open the code editor, paste the iframe code, and click Save & Close.
5. Publish your site or use preview mode to see the working player.

The player does not render on the Webflow canvas. You must publish or preview to confirm it works. To make the player responsive on smaller screens, change the iframe's width attribute to width="100%" before saving.

Embed the custom search widget

The custom search widget adds a Listen Notes search bar directly to your page. Visitors can search across episodes and podcasts without leaving your site.

To add the search widget:

1. Go to listennotes.com/podcast-integrations and click Get Code under the Custom Search section.
2. Copy the generated embed code.
3. In Webflow, drag a Code Embed element onto your page, paste the code, and click Save & Close.
4. Publish to see the search widget in action.

This widget requires no API key, no proxy server, and no JavaScript configuration.

Add a Listen Score badge

Listen Notes assigns a Listen Score to podcasts based on popularity. You can display this as a static image badge on your site using an <img> tag from the Listen Notes podcast widget page.

To add the badge:

1. Get the badge image tag from listennotes.com/podcast-widget/ for the podcast you want to feature.
2. Place it inside a Code Embed element in Webflow using the same steps as above.

The badge is a static image, not an interactive player. It does not require an API key.

Place embeds site-wide using custom code settings

For persistent elements like a footer player across all pages, you can add embed code through Webflow's Site Settings custom code options. Open Site settings, go to the Custom Code tab, and paste iframe code in the footer code area to load it on every page. You can also add code to individual pages through the page-level custom code settings.

Build dynamic episode pages with Webflow CMS

When your site features many podcast episodes, manually placing a Code Embed element on each page becomes impractical. A better approach stores episode embed URLs in CMS collection items and uses a single collection template to render the correct player on each episode page. This method requires a Webflow Business plan or higher but no Listen Notes API key.

To set up CMS-driven episode pages:

1. Open the CMS panel in Webflow and create a new collection (for example, "Podcast Episodes").
2. Add a plain text field named "Episode Embed URL" along with other fields like Episode Title, Description, and Publish Date.
3. For each episode, go to listennotes.com, find the episode, click the EMBED tab, and copy only the URL inside the src="..." attribute of the iframe code. Do not copy the full iframe HTML.
4. Create a new CMS item, paste the URL into the "Episode Embed URL" field, fill in the other fields, and save.
5. Open the collection template page by clicking Edit Collection Page in the CMS panel.
6. Drag a Code Embed element onto the template and type this iframe shell into the code editor:

<iframe src="" width="100%" height="180" frameborder="0" scrolling="no"></iframe>

7. Place your cursor inside the empty src="" quotes, click + Add Field in the embed modal, and select the "Episode Embed URL" CMS field.
8. Click Save & Close and publish the site.

Each episode page now auto-displays its correct Listen Notes player based on the CMS data. Store only the src URL in a plain text field. Storing full iframe HTML in a rich text field causes Webflow to sanitize the code and break the embed.

The CMS plan supports up to 2,000 items per collection, and the Business plan supports up to 10,000. Collection List elements display a maximum of 100 items per page, so larger episode libraries need pagination or filtering scripts.

Build with the Webflow and Listen Notes APIs

For full control over podcast search, dynamic content rendering, and automated CMS population, you can connect the Listen Notes REST API with Webflow Data API. This approach requires server-side development because of two hard constraints: Listen Notes blocks direct browser-to-API calls through CORS policies, and the API key must never appear in client-side code where it would be visible in browser DevTools.

Every API-based implementation needs a server-side proxy (Netlify Functions and Vercel Edge Functions both offer free tiers) that receives requests from your Webflow front end, calls the Listen Notes API with the key stored server-side, and returns the results.

The relevant APIs are:

• The Listen Notes API v2 handles podcast search, episode metadata, recommendations, and playlist data. SDKs are available for Node.js, Python, Ruby, PHP, Swift, Go, Java, Kotlin, C#, Scala, and Rust.
• Webflow's Data API v2 handles CMS collection creation, item management, and publishing.
• Webflow webhooks trigger real-time events when CMS items or forms change.

All Listen Notes API requests use the X-ListenAPI-Key header for authentication. Webflow's API uses Bearer token authentication. Both return JSON responses.

Add podcast search to a Webflow page

You can build a custom search experience where visitors type a query, your proxy calls Listen Notes, and JavaScript renders the results into Webflow page elements.

To implement search:

1. Add a search input and results container to your Webflow page using standard elements.
2. Add a Code Embed element with JavaScript that listens for input events, sends a fetch() request to your proxy server, and renders the returned results into the DOM.
3. On the proxy server, forward the query to GET /api/v2/search with parameters like q (the search string), type (set to episode or podcast), and page_size for result count. The proxy returns the JSON response to the Webflow front end.
4. Parse the response in your front-end JavaScript and populate the results container with episode titles, thumbnails, descriptions, and audio player controls.

The Listen Notes custom search widget embed covers this use case without any API work. Use the API path only when you need full control over the UI, filtering behavior, or result formatting.

Sync episode data to Webflow CMS

Automated CMS sync pulls episode metadata from Listen Notes and creates or updates Webflow CMS items programmatically. A scheduled serverless function (using Netlify Scheduled Functions, Vercel Cron Jobs, or similar) runs the sync on a set interval.

To implement CMS sync:

1. Create a CMS collection in Webflow with fields that map to Listen Notes data: Name (episode title), a plain text field for audio URL, a rich text field for description, a date field for publish date, an image field for thumbnail, and a number field for duration.
2. Set up a server-side script that calls GET /api/v2/podcasts/{id} to retrieve podcast metadata and episode lists. Paginate through episodes using the next_episode_pub_date cursor from each response.
3. For each new episode, send a POST request to https://api.webflow.com/v2/collections/{collection_id}/items/live with the episode data formatted to match your collection field slugs.

Listen Notes terms of service prohibit storing API response data on FREE and PRO plans. Only the id and pub_date fields may be stored on those plans. The CMS sync pattern, which writes episode titles, descriptions, and audio URLs into Webflow CMS items, requires a Listen Notes Enterprise plan to be terms-compliant.

Display episode recommendations dynamically

The GET /api/v2/episodes/{id}/recommendations endpoint returns related episodes for any given episode ID. You can use this to build a "you might also like" section on episode pages.

To add recommendations:

1. Store each episode's Listen Notes ID in a CMS plain text field.
2. On page load, use a Code Embed element with JavaScript that reads the episode ID, sends a request to your proxy, and calls the recommendations endpoint.
3. Render the returned array of episode objects (each includes title, thumbnail, audio_length_sec, and podcast.title) into a card layout on the page.

This approach works on all Listen Notes API plans because it fetches data dynamically without storing it. The FREE plan's 300-request monthly cap limits how many page views can trigger recommendations before the quota runs out.

What can you build with the Listen Notes Webflow integration?

Integrating Listen Notes with Webflow lets you add podcast discovery, playback, and episode data to any Webflow site without building a custom audio infrastructure.

• Branded podcast hub: Embed episode players and show artwork on a company marketing site so visitors listen directly on your domain. A SaaS company could feature each episode of their branded podcast on a dedicated page with full show notes stored in CMS items.
• Niche podcast directory: Build a searchable, filterable directory of podcasts on a specific topic using the Listen Notes search API. A community for women in fintech, for example, could offer a curated directory with genre filters and Listen Score rankings.
• E-learning resource library: Curate podcast episodes as supplementary learning material organized by topic or skill level. A professional development platform could pair written course content with relevant podcast episodes pulled via the API and rendered as playable cards.
• Podcast PR research portal: Use the search and metadata APIs to identify and prioritize podcasts for guest pitching, filtered by topic, audience size, and episode frequency. A PR agency could build an internal tool on Webflow where team members research shows and track outreach.

If you need more control over CMS sync schedules, custom player UI, or recommendation algorithms, the API integration path covers those cases with full flexibility.