Integrate Soundcloud tracks on your Webflow website

Important: This guide utilizes Webflow’s embed feature to include customized code. The embed feature is accessible with any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans. 

By employing dynamic embedding, you can utilize your CMS Collection fields for dynamically refreshing embedded code. In this guide, we’ll design a music website that leverages dynamic embedding to showcase a Soundcloud track for each song review on the site. 

You can visit our live music site or preview the site in the Designer. 

This tutorial covers the following: 

1. Guidance on crafting a Webflow Collection for your song reviews
2. Incorporating your Soundcloud tracks into the Webflow CMS 
3. Constructing a dynamic embed

Creating a Webflow Collection for your song reviews

Initially, establish a CMS Collection for storing your song reviews along with their respective Soundcloud track IDs (i.e., the distinctive identifiers for your Soundcloud tracks). 

To set up a Collection with the required fields: 

1. Access the CMS panel
2. Tap on the “Create new Collection”icon
3. Assign a title to your Collection (e.g., “Song reviews”) 
4. Hit Add new field 
5. Select Plain text 
6. Label your field as “Soundcloud track ID”
7. Press Save field
8. (Optional) Append any extra Collection fields (e.g., artist, album art, review, rating, etc.)
9. Click Create Collection, and remember to keep this tab open for future reference! 

Incorporating your Soundcloud tracks into the Webflow CMS 

To insert your Soundcloud tracks into the Webflow CMS, you must obtain your track IDs from Soundcloud. These IDs serve as distinct markers for your Soundcloud tracks and ensure accurate track representation for each song review within your Collection. Extract the track IDs from your Soundcloud embed code. 

Generating your Soundcloud embed code 

To create your Soundcloud embed code: 

1. Visit any Soundcloud track 
2. Click the Share icon
3. Select Embed
4. (Optional) Customize your Soundcloud player’s appearance, size, etc.
5. Copy the code from the Code section, and retain this tab for reference! 

Important: In case you closed the tab with your Webflow site, revisit the CMS panel and choose your song reviews Collection from the earlier steps.

Formulating your song review with the Soundcloud track ID 

To fetch the value for your Soundcloud track ID: 

1. Copy the series of characters post “/tracks/” in the Code section
2. Go back to your song reviews Collection in Webflow
3. Initiate a new Collection item for a song review
4. (Optional) Populate any additional Collection fields (e.g., artist, album art, review, rating, etc.) 
5. Paste the character series copied from Soundcloud into the Soundcloud track ID field 
6. Click Create

Top suggestion: You can insert your Soundcloud code into a code editor like Sublime Text or Visual Studio Code for easier track ID identification. 

Repeat the process for generating your embed code and forming a song review with a Soundcloud track ID for each song review you wish to include in Webflow (i.e., to add more song reviews in the future, you’ll need to form a new Collection item, retrieve the Soundcloud track ID from the Soundcloud embed code, and insert it into the appropriate Collection field). 

Constructing a dynamic embed

Dynamic embeddings exclusively function with dynamic content, indicating their application to Collection pages or within a Collection list on a static page. Given that you’re referring to your song reviews Collection, you should insert your embed into the Collection page linked with your song reviews Collection or attach a Collection list to your song reviews Collection. 

Important: In case you closed the tab with your Soundcloud embed code, navigate to Soundcloud and copy the embed code crafted in the previous steps.

To generate a dynamic embed, insert the Soundcloud embed code into your Webflow site and substitute the Soundcloud track ID within the embed with the corresponding Collection field: 

1. Navigate to Add panel > Advanced
2. Include an embed element to the area where you desire the Soundcloud track to be displayed
3. Paste the Soundcloud embed code in the Webflow code editor 
4. Highlight the character and letter series post “/tracks/” 
5. Click Add field
6. Select the Soundcloud track ID field 
7. Press Save & close 

This process guarantees that the embed showcases the song corresponding to each song review.

When you’re prepared, publish your website to view your newly integrated Soundcloud tracks! 

Top suggestion: Extend the use of conditional visibility on Collection pages and within Collection lists to conceal the embedded Soundcloud player for song review items lacking a Soundtrack track ID.

Important: The Soundcloud player will not be displayed on the Designer canvas — the preview of the embedded player in the Designer is inaccessible, and a placeholder will substitute it. Post publication or site export, the player will be visible (i.e., displayed) in its designated position. Should you wish to preview the embedded player before site deployment on a custom domain, you can publish your site to the webflow.io staging subdomain.