Guide
How to embed an audio player in Webflow.
Webflow's Code Embed element can hold a lossless SoundToggle player — A/B or standard — on any page. Here's the click path, the one plan requirement that trips people up first (it needs a paid Site plan), and why the Designer shows a placeholder instead of the real thing while you're still editing.
This is what you'll be embedding
A live SoundToggle A/B player — the same one that ends up on your Webflow page. Toggle it and hear the difference for yourself.
Two things to know before you start
Between them, these account for most "it didn't work" or "it's blank" reports on Webflow specifically.
Custom code needs a paid Site plan
Webflow gates the Code Embed element, Head Code, and Before </body> Code behind a paid Site plan (Basic or above). That's stricter than the other platforms in this guide series: Squarespace's Embed Block works on every plan, self-hosted WordPress has no plan gates at all, and Wix allows the Embed Code element even on its free plan. On Webflow's free Starter plan the Code Embed element stays visible in the Add panel but wears a green upgrade badge and simply can't be placed — clicking or dragging it does nothing, and hovering the badge explains: "This element requires a paid site or account plan."
The box can render invisible until you size it
A newly placed Code Embed element can come in at zero width and height, which looks identical to "nothing happened." Give it a starting size in the Style panel right after placing it — use the layout table below — and set Height to Auto so it can grow past that starting point instead of clipping your player later.
A blank Designer canvas isn't proof it's broken — check the live page
Because the SoundToggle snippet includes a script tag, Webflow shows a placeholder in the Designer instead of a live render — that's how Webflow treats every script-based embed, not just this one. Publish and open the live URL before you assume something's wrong, or turn on "Run custom code in Preview" in Site Settings → Custom code to check it in Preview mode instead.
The click path, in 6 steps
The Responsive Embed in a Code Embed element — no custom code beyond copy-paste, but you do need a paid Webflow Site plan.
Copy the Responsive Embed from SoundToggle
In your SoundToggle dashboard, click the share/embed icon on the project card you want to publish, and choose Responsive Embed as the sharing method. Copy the whole snippet, script tag included.
Confirm your Webflow site is on a paid Site plan
Custom code — including the Code Embed element — is disabled on Webflow’s free Starter plan. You need an active paid Site plan (Basic or above) on this site, or a Workspace plan that includes custom code, before the steps below will work.
Add a Code Embed element
In the Webflow Designer, click the + icon in the left toolbar (or press A) to open the Add panel. Search "Embed" — it's the only result — or scroll to the Advanced section for Code Embed. Drag it onto the page, inside the Section or Div where the player should sit.
Open the code editor and paste the snippet
Double-click the element on the canvas to open its code editor — or select it and use the code-editor button in the Settings panel (the gear icon in the right sidebar). Paste the whole snippet, script tag included, and save.
Give the element a starting size
A freshly placed Code Embed can render at zero height until you size it. In the Style panel, set a starting width and height using the layout table further down this guide, and set Height to Auto rather than a fixed pixel value so the box can grow instead of clipping the player.
Publish, then confirm on the live page
Because the snippet includes a script tag, the Designer canvas shows a placeholder while you’re editing — that’s expected, not a broken paste. Publish and open the live URL to see the real player. Turn on "Run custom code in Preview" in Site Settings → Custom code first if you’d rather check it in Preview without publishing.
Plan requirements, and Preview vs. Publish
Does this need a paid Webflow plan?
- The gate is on custom code generally, not specifically on embedding audio: Head Code, Before </body> Code (Project and Page Settings), and the Code Embed element are all blocked together on the free Starter plan.
- You need either an active Site plan of Basic or above on this specific site, or a Workspace plan that covers custom code — check Site Settings → Plan if you’re not sure which applies.
Why the player doesn't show up while you're editing
- Any Code Embed containing a <script> tag — which SoundToggle’s Responsive Embed is — shows only as a placeholder on the Designer canvas itself. That’s normal; it doesn’t mean the paste failed.
- Webflow runs the script once you publish or export the site. Preview mode doesn't run it by default: the "Run custom code in Preview" toggle in Site settings → Custom code ships switched off. Turn it on to see custom-code effects in Preview and Commenting modes — each collaborator also gets their own choice when opening Preview. Either way, the published live page is the definitive test.
Starting height by player layout
A freshly placed Code Embed can default to zero height, so pick a starting size here — then set Height to Auto in the Style panel so it can grow past this if your project has a longer title or a playlist.
| Player layout | Suggested height |
|---|---|
| Minimal | 80px |
| Compact | 260px |
| Full Width | 320px |
| Default | 420px |
| Waveform | 420px |
| Social | 480px |
| Playlist | 500px |
| Video | 600px |
Which layouts you can pick depends on your SoundToggle plan. Free includes the Default and Minimal layouts. Pro adds Compact, Waveform, Social, and Full Width. The Video layout is on Studio. "Playlist" above isn't a separate layout — it's the height a playlist project needs.
If something looks off
Nothing appears while I'm editing
Expected — script-based embeds show a placeholder in the Designer canvas. Enable "Run custom code in Preview" to check it in Preview mode, or publish and open the live page.
Code Embed is badged and won't place
The site is on Webflow's free Starter plan, which blocks custom code entirely — the element sits in the Add panel with an upgrade badge and can't be dragged in. Move to a paid Site plan to unlock it.
Player is blank or cut off after publishing
The Code Embed element likely still has a zero or fixed height. Select it, set a starting width/height in the Style panel from the table above, and set Height to Auto.
Height doesn't grow when I add a longer title or playlist
Check that Height is set to Auto (not a fixed pixel value) and that Overflow isn't set to Hidden on the Code Embed element or a parent Div/Section — either one will clip the player instead of letting it grow.
More detail in the help center: Getting your embed code · Player embed not showing · Embed not resizing on mobile
Questions people ask
Can I embed a SoundToggle player on Webflow?
Yes. Add a Code Embed element from the Add panel (search "Embed", or find it under Advanced), open its code editor, and paste either SoundToggle embed code. Give the element a starting size in the Style panel, then publish and check the live page — script-based embeds only show as a placeholder while you’re still in the Designer.
Do I need a paid Webflow plan to embed a player?
Yes, for this specifically. Webflow’s free Starter plan blocks custom code entirely, including the Code Embed element — you need an active paid Site plan (Basic or above), or a Workspace plan that includes it. That’s stricter than the other platforms we cover: Squarespace’s Embed Block works on every plan, self-hosted WordPress has no plan gates, and Wix allows HTML embeds on its free plan.
Why don’t I see the player while I’m designing the page?
That’s expected. Because SoundToggle’s embed snippet includes a <script> tag, Webflow shows a placeholder for it on the Designer canvas rather than a live render. It becomes a real, working player once you Preview (with "Run custom code in Preview" enabled in Site Settings → Custom code) or once you Publish. Publishing and opening the live page is the most reliable way to confirm it worked.
The Code Embed element has a green badge and won't drag onto the page — why?
The site is on Webflow’s free Starter plan, which doesn’t include custom code. The element stays listed in the Add panel but can’t be placed; hovering its badge shows "This element requires a paid site or account plan." Move the site to a paid Site plan to unlock the Code Embed element, then the steps on this page will work as written.
My embed shows as a blank box, or looks cut off
Newly placed Code Embed elements can default to zero height, and pasting code into one doesn’t automatically resize it. Select the element and set a starting width and height in the Style panel — use the table on this page — and set Height to Auto so the box can grow rather than clip the player if a title or playlist makes it taller later.
Can I see the player working without publishing my whole site?
Turn on "Run custom code in Preview" in Site Settings → Custom code, then use Webflow’s Preview mode — script-based embeds like SoundToggle’s will run there too, not just on the published site. If Preview still shows a placeholder, publish to a staging or live URL — the published page is always the definitive test.
Can I password-protect a player before I show it to a client?
Yes. Set the project to Unlisted in SoundToggle and add an access password (available on the Pro plan and above) — the password applies wherever the player is embedded, including inside your Webflow page, so only people with the password can hear it.
Does the embedded player support lossless WAV or FLAC playback?
It can, on a paid SoundToggle plan. The Free plan accepts lossy formats only (MP3, AAC, OGG, Opus, M4A, WebM); Pro and above add lossless WAV, FLAC, AIFF, and ALAC up to 500 MB per file, which is what you want for an accurate before/after comparison.
Free plan · No credit card
Your Webflow site deserves a real A/B player.
Create your first project, grab the embed code, and you'll be toggling before/after audio on your site in a few minutes.
Get started free