Embed Soundcloud tracks on your Webflow site
Display unique Soundcloud tracks on your site using dynamic embeds.
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:
- How to create a Webflow Collection for your song reviews
- How to add your Soundcloud tracks to the Webflow CMS
- 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:
- Open the CMS panel
- Click the “Create new Collection” icon
- Give your Collection a name (e.g., “Song reviews”)
- Click Add new field
- Choose Plain text
- Name your field “Soundcloud track ID”
- Click Save field
- (Optional) Add any additional Collection fields (e.g., artist, album artwork, review, rating, etc.)
- 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:
- Go to any Soundcloud track
- Click the Share icon
- Click Embed
- (Optional) Customize your Soundcloud player’s color, height, etc.
- 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:
- Highlight and copy the string of numbers after “/tracks/” in the Code field
- Return to your song reviews Collection in Webflow
- Create a new Collection item for a song review
- (Optional) Fill in any additional Collection fields (e.g., artist, album artwork, review, rating, etc.)
- Paste the string of numbers you copied from Soundcloud into the Soundcloud track ID field
- 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:
- Go to Add panel > Advanced
- Add an embed element to the canvas where you want the Soundcloud track to appear
- Paste the Soundcloud embed code in the Webflow code editor
- Highlight the string of numbers and letters after “/tracks/”
- Click Add field
- Choose the Soundcloud track ID field
- 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!