Did Webflow or Spotify make any changes that would prevent me from adding a Spotify link in my CMS posts?

Published on
September 22, 2023

Webflow has not made any specific changes that would prevent you from adding a Spotify link in your CMS posts. However, Spotify made changes to their platform in 2020 that affect how their embeds work. Previously, you could simply use the Spotify embed code in an HTML embed element in Webflow, and it would render the Spotify player. But now, Spotify requires you to use their JavaScript SDK to embed and control their players.

To add a Spotify link to your CMS posts in Webflow, you can follow these steps:

  1. Obtain the Spotify track, album, or playlist URL that you want to include in your CMS post.
  2. In your Webflow project, open the CMS Collection Editor and go to the post where you want to add the Spotify link.
  3. Add a new text field to the post collection specifically for the Spotify link.
  4. Paste the Spotify URL into the text field, make sure to include the full URL.
  5. Save and publish your changes in the CMS.

To display the Spotify player on your website, you will need to use custom code to embed it. Here's how:

  1. In your Webflow project, go to the page template where you want to display the Spotify player.
  2. Add an HTML embed element to the desired location on the page template.
  3. Inside the HTML embed element, paste the following code:
<div class="spotify-player" data-spotify-src="{ {CMS_FIELD_NAME} }"></div>

Replace { {CMS_FIELD_NAME} } with the name of the CMS field where you stored the Spotify URL.

  1. Add the JavaScript code to your project. You can either add it in the page settings or in the custom code section of your project settings:
<script>  document.addEventListener('DOMContentLoaded', function() {    const spotifyPlayers = document.querySelectorAll('.spotify-player');    spotifyPlayers.forEach((player) => {      const iframe = document.createElement('iframe');      const src = player.getAttribute('data-spotify-src');      iframe.src = `https://open.spotify.com/embed${src}`;      iframe.setAttribute('allow', 'encrypted-media');      iframe.setAttribute('allowtransparency', 'true');      player.appendChild(iframe);    });  });</script>
  1. Save and publish your changes to see the Spotify player rendered on your CMS posts.

Please note that while Webflow allows you to add Spotify links to your CMS posts, you need to ensure you comply with Spotify's terms of service and any licensing requirements for the music you are embedding.

Additional Questions:

  1. How do I add a Spotify link to my Webflow CMS posts?
  2. What changes did Spotify make to their embeds in 2020?
  3. Can I use the Spotify embed code directly in Webflow to display the player?