Is there a way to embed a Spotify playlist within a collection field on Webflow, similar to how you can link a YouTube video?

Published on
September 22, 2023

Yes, it is possible to embed a Spotify playlist within a collection field on Webflow. Follow the steps below to achieve this:

  1. Get the Spotify Playlist URI:
  • Open the Spotify desktop app and navigate to the desired playlist.
  • Right-click on the playlist and click on "Share" and then "Copy Playlist Link" or "URI."
  • Paste the copied link in a text editor and extract the playlist URI, which looks like spotify:playlist:xxxxxx.
  1. Add a new text field to your collection:
  • In the Webflow Designer, go to the Collection Editor for the desired collection.
  • Click on "Add Field" and choose the "Plain Text" field type.
  • Give the field a name, such as "Spotify Playlist URI," and save it.
  1. Embed the Spotify playlist:
  • Go to the page where you want to display the playlist.
  • Add an embed component to the page by dragging and dropping it from the Add Panel or using the shortcut "E" and selecting "Embed."
  • Click on the embed component to open its settings.
  • In the code editor, paste the following code, replacing {{playlistURI}} with the dynamic field from your collection:
    ```html \`\`\`
  1. Style and customize the embed component:
  • Use the Webflow Designer to customize the embed component's dimensions, positioning, and styling to match your design.

Remember to publish your site for the changes to take effect. Each item within your collection will now have a field to enter the Spotify Playlist URI, and the corresponding playlist will be embedded on the page.

Note: This method uses Webflow's embed component to display the Spotify playlist. As a result, any customization to the embed component's appearance will be limited to the options available within Webflow.

Additional Resources:

Q&A:

  1. How do I embed a Spotify playlist on Webflow using the embed component?
  2. Can I dynamically link Spotify playlists to my Webflow collection items?
  3. What is the process to customize the appearance of a Spotify playlist embed on Webflow?