How to integrate SoundCloud in Bubble

A direct way to integrate SoundCloud in Bubble is to use SoundCloud’s oEmbed endpoint. Bubble can call this without authentication, return an embeddable HTML player, and then you display that HTML using an HTML element. This is the easiest and most reliable approach because SoundCloud’s full API requires OAuth 2.0 (which is deprecated for public apps), but oEmbed still works well for embedding tracks and playlists.

Two ways to integrate SoundCloud

The practical approach in Bubble depends on what you need:

• If you only need to display a SoundCloud track/playlist: use the oEmbed API (simple, no login needed).
• If you need advanced actions like searching SoundCloud or account‑level features: this is no longer supported for new apps because SoundCloud’s public API access is restricted. So stick with oEmbed unless you already have API keys approved.

How to embed a SoundCloud track using oEmbed (recommended)

This lets you enter a SoundCloud URL and display the player in Bubble.

• Create an API Connector call:
  • Set it as GET
  • URL: https://soundcloud.com/oembed
• Add a query parameter url that you pass dynamically from Bubble.
• Set Return type = JSON.

// Example API call in Bubble's API Connector
GET https://soundcloud.com/oembed?format=json&url=https://soundcloud.com/forss/flickermood

This returns JSON containing html, which is the ready‑to‑use embed code.

• Place an HTML element on the page.
• Set its content to the API call’s html field.

<!-- In the HTML element inside Bubble -->
<div>
  {{Get oEmbed's html}}  <!-- dynamic expression -->
</div>

Typical flow inside Bubble

• User inputs a SoundCloud URL.
• Workflow triggers the API call (or use it directly as a Data Source).
• You display the returned html in an HTML element.

This gives you a working SoundCloud player, responsive, no plugins needed, and no OAuth workflow required.