Skip to content


Adding Spotify playlist to your gatsby site

web-development, music1 min read

Last updated : 26/April/2020

Follow below steps to setup Spotify Music Player in a Gatsby site,

  1. Create a account in Spotify

  2. Create a new playlist

  3. Search and Add songs to your playlist

  4. Go to your homepage in Spotify, click Your Library and then your playlist and then click on the 3 dots(...) and from submenu, copy the playlist link
    Spotify - Copy playlist link

    For me playlist link look like this,

    Update the link like below(add /embed/),

    Note : If you miss the above step, you will get to play only 30 seconds of song in Web player

  5. Add this to your gatsby mdx file

  6. SpotifyPlay.js looks like this

All this in Spotify comes under Play Button, thats what its called. Here is the link

Preview the Spotify Player here

# Resources