How to Add the Spotify Widget to Your Site

By Niklas Nordlof on Wednesday, April 02, 2014

How to Add the Spotify Widget to Your Site
The Spotify widget is a music player, and you can play any music that’s available through Spotify, including albums, playlists, or individual songs. 

When you play a song, the widget launches the Spotify desktop app or web player—depending on your browser or whether you have the app installed. 

So to listen to music, your visitors must sign in with a Spotify account. Also, to properly configure the widget, you need:


Add the widget


Like any widget, to add the Spotify widget to a page:

  1. Get it from the Market.
  2. Then, from your Widgets drawer, drag it onto a page.


Pick out your music


This is the point where you need the Spotify app installed. In the app, pick out some music. This can be:

  • An album
  • A playlist
  • An individual song

Once you pick out what you want to play, get it’s Spotify URI:

  • Right click on the music, and then select Copy Spotify URI.


Edit the widget Settings


Next, back in the Moboom Studio, in the Settings of the Spotify widget, paste the URI:

  1. Click the Spotify widget to open its Settings.
  2. In the Spotify URI field, paste the URI that you copied.



You now have a Spotify player on your site. The widget also has some other settings that you can configure. 

Layout


You can change the size of the player:

  1. Large (default). The Large size is taller and provides more information, such as a track listing or cover art.
  2. Compact. The Compact size is essentially only the top part of the Large player, so it’s much shorter, and it doesn’t show a list of tracks or the large cover art. 

Color scheme


The widget offers a couple color choices for the Large layout:

  • Dark (default). The Dark theme is a black background with white text.
  • Light. The Light theme is a white background with black text. This affects the color of the track listing—the top part of the widget will still have a black background with white text. 


Include cover art or track listing


In the Large layout, you can include either:

  • Track listing (default). Shows a list of all tracks to be played. This view is useful if you have several tracks so users can skip around.
  • Cover art. Shows the cover art associated with each song. You might use this view if you only have one song or if you have a playlist with songs from several different albums.


Now that you know how, go add a Spotify widget to your site. Login to your DevKit account and get started.

image via Spotify

DevKit Templates

Find the website template you want in the Moboom Market