Embed Soundcloud tracks on your Webflow site

Display unique Soundcloud tracks on your site using dynamic embeds.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
Note: This tutorial uses Webflow’s embed element to add custom code. The embed element is available on any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans

With dynamic embeds, you can use your CMS Collection fields to dynamically update embedded code. Here, we’ll build a music site that uses dynamic embeds to display a Soundcloud track for each song review on the site. 

You can check out our live, published music site, or preview the site in the Designer

In this lesson, you’ll learn: 

  1. How to create a Webflow Collection for your song reviews
  2. How to add your Soundcloud tracks to the Webflow CMS 
  3. How to create a dynamic embed

How to create a Webflow Collection for your song reviews

First, you’ll need to create a CMS Collection to store your song reviews along with their Soundcloud track IDs (i.e., the unique identifiers for your Soundcloud tracks). 

To create a Collection with the necessary Collection fields: 

  1. Open the CMS panel
  2. Click the “Create new Collection icon
  3. Give your Collection a name (e.g., “Song reviews”) 
  4. Click Add new field 
  5. Choose Plain text 
  6. Name your field “Soundcloud track ID”
  7. Click Save field
  8. (Optional) Add any additional Collection fields (e.g., artist, album artwork, review, rating, etc.)
  9. Click Create Collection, and keep this tab open for later reference! 

How to add your Soundcloud tracks to the Webflow CMS 

To add your Soundcloud tracks to the Webflow CMS, you’ll need your track IDs from Soundcloud. These act as unique identifiers for your Soundcloud tracks and ensure that Webflow pulls in the correct track for each song review in your Collection. You can get the track IDs from your Soundcloud embed code. 

Generate your Soundcloud embed code 

To generate your Soundcloud embed code: 

  1. Go to any Soundcloud track 
  2. Click the Share icon
  3. Click Embed
  4. (Optional) Customize your Soundcloud player’s color, height, etc.
  5. Copy the code in the Code field, and keep this tab open for reference! 
Note: If you closed the tab where your Webflow site was open, go to the CMS panel and choose your song reviews Collection from the previous steps.

Create your song review with the Soundcloud track ID 

To get the value for your Soundcloud track ID: 

  1. Highlight and copy the string of numbers after “/tracks/” in the Code field
  2. Return to your song reviews Collection in Webflow
  3. Create a new Collection item for a song review
  4. (Optional) Fill in any additional Collection fields (e.g., artist, album artwork, review, rating, etc.) 
  5. Paste the string of numbers you copied from Soundcloud into the Soundcloud track ID field 
  6. Click Create
Pro tip: You can paste your Soundcloud code into a code editor like Sublime Text or Visual Studio Code to find your track ID more easily. 

Repeat the steps for generating your embed code and creating a song review with a Soundcloud track ID for each song review you want to add to Webflow (that is, to add more song reviews in the future, you’ll need create a new Collection item, pull the Soundcloud track ID from the Soundcloud embed code, and paste it into the corresponding Collection field). 

How to create a dynamic embed

Dynamic embeds only work with dynamic content, which means you can only add them on Collection pages or in a Collection list on a static page. Since you’re referencing your song reviews Collection, you’ll need to add your embed to the Collection page associated with your song reviews Collection, or connect a Collection list to your song reviews Collection. 

Note: If you closed the tab where your Soundcloud embed code was open, go to Soundcloud and copy the embed code you generated in the previous steps.

To create a dynamic embed, you’ll need to add the Soundcloud embed code to your Webflow site and replace the Soundcloud track ID in the embed with its corresponding Collection field: 

  1. Go to Add panel > Advanced
  2. Add an embed element to the canvas where you want the Soundcloud track to appear
  3. Paste the Soundcloud embed code in the Webflow code editor 
  4. Highlight the string of numbers and letters after “/tracks/” 
  5. Click Add field
  6. Choose the Soundcloud track ID field 
  7. Click Save & close 

This ensures the embed displays the song associated with each song review.

When you’re ready, publish your site to check out your newly embedded Soundcloud tracks! 

Pro tip: You can use conditional visibility on Collection pages and in Collection lists to hide the embedded Soundcloud player for song review items that don’t have a Soundtrack track ID.
Note: Your Soundcloud player won’t render on the Designer canvas — that is, you won’t be able to preview the embedded player in the Designer, and a placeholder will be shown in its place. Once you publish or export your site, the player will render (i.e., display) where you placed it. If you need to preview the embedded player before going live with your site on a custom domain, you can publish your site to the webflow.io staging subdomain

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top