How to Add Spotify Player to Your Website

Jotform makes it easy to add a Spotify Player to your website so visitors can listen to music, podcasts, and other audio content without leaving your site. It’s a simple way to share your favorite Spotify content while keeping visitors engaged with your website.

Whether you’re promoting a playlist, sharing your podcast, featuring an album, or adding music to your site, the Spotify Player widget gives visitors an easy way to listen to your content directly from your website.

Setting Up Your Spotify Embed Widget

To embed a Spotify Player on your website, you’ll first need to configure the Spotify Embed widget and copy its embed code. Here’s how to get going:

1. On the top-left side of your Workspace page, click on Create.

2. Then, in the menu that opens, select Website Widget.

3. Next, in the Search bar in the upper-left corner of Choose Website Widget, enter Spotify Embed.
4. Then, at the bottom of the Spotify Embed widget in the Choose Website Widget window, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General tab, set up these properties:
   • Spotify URL — Enter the Spotify link for the track, album, playlist, artist, show, or episode you want to embed. 
   • Spotify Logo — Keep this on to display the Spotify logo above the player, or toggle it off to hide it. 
   • Title — Keep this on to display a heading above the Spotify player, or toggle it off to hide the title.
   • Description — Enter supporting text to display below the title. Toggle this off to hide it. 
   • Spotify Button — Keep this on to display a button that opens the Spotify content in a new tab, or toggle it off to hide it.

6. Now, under the Style tab, customize these properties:
   • Theme — Choose between light and dark treatments for the Spotify widget. 
   • Corner Radius— Choose the corner radius style for the Spotify widget:
     • Square Corners — Displays the widget with square corners. 
     • Rounded Corners — Displays the widget with rounded corners. 
     • Circular Corners — Displays the widget with fully rounded corners. 
   • Jotform Branding — Show or hide Powered by Jotform in the widget.
   • Font — Toggle this on, click on the Downward Arrow icon below it, and in the Dropdown menu, select Site Font to match your website’s font, System to use each visitor’s device font, or another available font.
   • Custom CSS — Toggle this on, and then in the Code Editor below it, enter custom CSS code to apply advanced styling to your widget.

7. Next, under the Layout tab, configure these options:
   • Player Size — Choose the size of the Spotify player:
     • Compact — Display a smaller player for single tracks.
     • Regular — Display the standard player for playlists, albums, artists, shows, and episodes.
   • Full Width — Toggle this on to set the widget to its full width.
   • Text Alignment — Choose how the Spotify player content is aligned within the embed area:
     • Left — Align the player content to the left.
     • Center — Center the player content.
     • Right — Align the player content to the right.
   • Devices to Display On — Click on the Downward Arrow icon and in the Dropdown menu, select which devices to display the widget on. 
8. Once you’ve finished configuring the widget, in the pink navigation bar on the top of the page, click on Publish.

9. Then, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.

10. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.
11. Next, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily.

12. Then, follow the steps in the How to Embed Your Widget section to add it to your website.

That’s it! Your Spotify Embed widget will appear on your website with the design and settings you selected for it. Take a look at the example below to see how it’ll look on a website.

Updating Your Spotify Content

You can update your Spotify Player widget at any time after it’s embedded on your website. Here’s a quick how-to:

1. At the top of your Workspace page, click on Filter.
2. Then, in the Dropdown menu that opens, hover your mouse over Website Widgets, and on the right side of it, click on Only.

3. Next, hover your mouse over the Spotify Content widget you want to update, and then click on Edit Widget on the right side of the page.

4. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General tab, update the Spotify URL by deleting the existing URL in the input box and entering the Spotify track, album, playlist, artist, show, or episode link you want to display. 

That’s it. You’ve successfully updated your Spotify Embed content.