Spotify Embed Plugin

Introduction

Spotify Embed plugin provides an embeddable view of a track, artist, album, user, playlist, podcast, or episode for use within your web project. It comes with two elements for two kinds of widgets - the Spotify Embed and the Follow Button.

Prerequisites:

No prerequisites are required.

How to Setup

Place the 'Spotify Embed' and/or 'Spotify Follow' plugin element on the page and set its properties according to your requirements.

Plugin Elements

The plugin contains 2 visual elements, 'Spotify Embed' and 'Spotify Follow', that can be used on the page.

Spotify Embed element

Element properties:

1. What to embed - dropdown. Choose an entity to embed. Available values: album, track, artist, playlist. The default value is 'album'.
2. ID (type: text) - id of the entity to be embedded.
3. Widget width (type: number) - width of the Spotify widget.
4. Widget height (type: number) - the height of the Spotify widget.

Element actions, states, events:

This plugin element has no actions, states, or events associated with it.

Spotify Follow element

Element properties:

1. Artist ID (type: text) - ID of the artist to follow.
2. Button width (type: number) - width of the Follow button.
3. Button height (type: number) - height of the Follow button.
4. Button layout - dropdown. Choose the layout to be used for the button. Available values: basic, detail. The default value is 'basic'.
5. Page theme - dropdown. Choose the theme to be applied to the button. Available values: light, dark. The default value is 'light'. NB: This property has effect only when the 'Button layout' property is set to 'detail'.
6. Show followers count - checkbox. Indicates whether to show followers count on the button.

Element actions, states, events:

This plugin element has no actions, states or events associated with it.

Plugin setup examples

  1. Example Spotify Embed setup
Image without caption
2. Example Spotify Follow setup
Image without caption
โœ…
Please note, that the background color of the widget is set by Spotify based on the "context"-image (artist, album, playlist). If you want to change the background color, try changing the "context"-image to something similar to your web app color scheme.
โ—
Also note that for users who are not logged in on their Spotify account, the Spotify Embed plays a 30-second long audio preview, and then the users are prompted to either login or to sign up.

Changelogs

Update 02.08.22 - Version 1.3.0
  • Updated Spotify Embed URLs
Update 28.09.22 - Version 1.4.0.
  • Spotifyโ€™s โ€œfollowโ€ element is deprecated.
  • Added element resizing option
Update 28.03.23 - Version 1.8.0
  • Added episode option

Demo to preview the settings