Embed a Spotify Playlist on Website/Notion/WordPress [Step-by-Step Guide]

Embedding a Spotify playlist is as simple as a quick copy-paste. There’s no coding or app juggling required here. Spotify hands you a simple Embed code and it’s all in your hands from there. Just pop that code into the space you want, whether it’s Notion, your website, or a personal blog like WordPress. And it’ll be done.

However, if you want to familiarize yourself with the process, this guide covers step-by-step guidance to embed a Spotify playlist on all three major platforms. We’ll also show you a solid way to keep your playlist accessible offline. Before diving into the process, let’s start with the fundamentals.

Part 1: What Does Spotify Embed Playlist Mean

Embedding a Spotify playlist is like dropping a mini Spotify player right onto a random page. However, the magic only works on HTML-supported platforms (blogs or website builders) or a page with dedicated embedding options (like Notion).

Unlike simple playlist sharing, embeds don’t redirect users to the Spotify player or app on their device. Instead, it will blend in with the existing content. Anyone can play, pause, skip tracks, or scroll through the playlist.

What’s more, the embedded playlist is a living mirror: any updates you make on the original Spotify playlist will reflect instantly. For listeners, the experience depends on their Spotify setup. Those logged into Spotify on the same browser can enjoy full tracks, while free and non-Spotify users will only hear 30-second previews.

Part 2: How to Embed a Spotify Playlist on Website/Notion/WordPress

No membership is required: both free and premium Spotify users can create these embeds. It’s the listener's experience that will vary based on their own Spotify setup.

Quick Tips: 

• Make sure the playlist you’re embedding is set to Public on Spotify.
• Collaborative playlists are welcome too, as long as they’re public.

Now, let’s walk through how to copy the embed code and then discuss the steps for each platform:

Preparation: Copy the Embed Code from Spotify

Start by launching Spotify, but remember, this will only work on the desktop app or web player. The mobile app has limitations on embedding. Here’s how to get the code:

Step 1. Open the playlist page you want to embed via the Spotify desktop app or web player.

Step 2. Click on the three dots (More Options) below the title. In the drop-down menu, go to Share and then Embed Playlist.

Step 3. A preview of the embed will appear within the Spotify window itself. There are a few customizable settings:

• Choose the size between compact and normal layouts.
• Adjust the width percentage to fit your site’s style (100% is ideal for most web layouts: mobile or desktop).

Once done, click Copy. You can also click Show Code if you’d like to preview it. This code will stay the same no matter how many times you use it across different platforms or pages.

Embed a Spotify Playlist on Website

On websites, embedding a Spotify playlist falls into two realms. For HTML-based sites, you’ll have to paste the code directly into the HTML. Meanwhile, with drag-and-drop builders, think Wix or Squarespace, simply let you drop the embed code. Here’s a look at each method one by one.

Embed Playlists on HTML Sites

Step 1. Create or open an existing HTML file. Find the spot where you’d like your playlist to appear.

Step 2. Insert the code inside a <div> tag or wherever you’d like it to live.

Step 3. Publish the page and you can view it on your live website.

Embed a Spotify Playlist on Drag-and-drop Builders (Wix as an Example)

Step 1. Open the Wix editor for your website. Look for the big blue Add button on the left to go to the code options. Scroll down to HTML code in the Web section.

Step 2. When you see the blank box on your page, select HTML Code from the options. There’s no coding needed here: in this HTML box, simply drop the embed playlist code you copied from Spotify. Hit Save to lock in your changes.

Step 3. Check that your playlist looks as it should and you can adjust as needed. When satisfied, click Publish.

Step 4. Your playlist will be seamlessly embedded and be live. Visitors can interact with it.

Embed a Spotify Playlist on Notion

If you’re embedding a Spotify playlist on Notion workspace, it means you’re trying to bring music in for your own enjoyment and flow. However, here’s a quick reminder: the playback will be limited to 30-second previews across any Notion setup.

And the rule applies to the Notion app on Windows, Mac, Android, or iOS, as well as the Notion.sowebsite, and holds true even if you publish your Notion page as a public site. Notion simply lacks Spotify integration. Still, embedding still will work by generating a clickable preview.

Follow these steps:

Step 1. Open the desired Notion page. Type /embed to summon the block options. Select Embed: you’ll see it marked as available for PDFs, Google Maps, and more.

Step 2. Paste the Spotify embed link into the provided field and hit Embed Link.

Step 3. Notion will process it and the embedded player will appear right on your Notion page. You can adjust the height or width using the resize handles.

Embed a Spotify Playlist on WordPress

WordPress.com and WordPress.org both feature a dedicated Spotify block.  You can just drop in your Spotify playlist link (not the embed code), and it will transform seamlessly into a music player. No coding or extra hassle.

If you’re in the mood for a bit more style, you can switch to an HTML block option. Yes, the default Spotify block is sleek, but only offers a classic radio-style feel. The HTML option, on the other hand, lets you play with more styling. Adjust the width and height, or add rounded edges (even when working with the default editor).

Steps to Embed Your Spotify Playlist on WordPress.com or WordPress.org’s Gutenberg Editor:

Step 1. Open the editor for your page or post. Type /embed or simply click on the plus + icon to open the block selector. And select Custom HTML.

Step 2. Paste your Spotify iframe code directly into the field.

Step 3. Click Preview to see your player within the editor. Change the dimensions if needed.  Click Publish or Update to make the mini player live on your blog.

Part 3: How to Listen to Embed Spotify Playlist Offline

Embedded Spotify playlists work beautifully for streaming if you’re a Premium user. However,  it has its shortcoming: the embed will cease to play once you move off the grid.

StreamFox for Music, the Eassiy All-in-one Music Converter steps in here, which is  a tool that downloads your Spotify music including playlists as local files. It is designed to let you enjoy your Spotify music on your terms: no ads, no forced shuffles, no interruptions. It breaks the download restrictions of the Spotify app, such as the limitation that downloaded music can only be played within Spotify and that only playlists can be downloaded, not individual songs.

To download a Spotify playlist that you embed on your site, you can log in StreamFox for Music’s  built-in browser, choose the audio quality and format, and make them offline. The output audio remains absolutely untouched, both in terms of the sound quality or song metadata. You even get a preview feature, so you can listen, verify, and then download the songs on your computer. Furthermore, it comes with a 14-day trial period that lets you save unlimited songs up to three minutes long.

Step-by-Step Guide to Use StreamFox for Music:

Step 1. Click on the above Mac or Windows button to download StreamFox for Music on your computer. Follow the on-screen instructions and set it up. Then, select Spotify from the main menu.

Step 2. Log in to Spotify using either a free or premium account credential to quickly access the desired playlist.

Step 3. Open the desired playlist or track page and click on the red + button to queue for conversion.

Step 4. Preview your tracks in the Converting tab to test the quality. You can also choose other formats. Once ready, hit the Convert All button. Once the tracks are converted, you can find them in the Downloads folder on your Windows or Mac computer and listen offline.  

Conclusion

Embedding a Spotify playlist is simple and it does add a layer of charm to your website and workspace. It also delivers a seamless experience for Premium users, offering full-length playback right on any page.

That said, if you’re looking to use this feature to elevate your personal music experience, it's better to bring the music offline and ditch Spotify's embedded 30-second previews altogether. With StreamFox for Music, you can do that easily. Use it and you can get high-quality music with all metadata intact right on your computer for offline playback.