Adding a Spotify Pre-save Button to Your Website

A Spotify Pre-save button allows fans to save tracks or albums before they’re released. On the artists side, it provides rich customer data and a huge boost in first week streaming activity. Keep reading to learn how to install this valuable little button on to your website! 

Set Up Spotify Pre-Save

Setting up a Pre-save button is very similar to a regular "Log in with Spotify" button.

1. To start, head over to your website.

Set up your AE JS on your website as usual then add the following code to your HTML:

<a href="#" data-ae-follow-link="spotify" data-ae-album-id="2jUjrmnCfEEwvC4H2twuTI">Spotify presave</a>

Make sure you fill in your own album ID. Assuming you've added the right album ID that's all you need to do to set up the pre-save on your site. Continue with step 2.

2. Modify your Spotify app permissions.

1. From the AE dashboard, click on AE Connect, found in the top right menu bar.
2. Next, click on the Spotify icon. You need to have the Spotify Social App set up already.
3. A box will pop up and you will see two tabs: "Basic Settings" and "Advanced Settings." Click on "Advanced Settings."
4. In the box that says "Add Additional Permissions," type in: user-follow-modify
5. Scroll down and click "Save Changes.

How this will look to your Spotify user

Your user will see a “Pre-save on Spotify” button on the site. The look of the button will depend on how you have styled it. Our help docs on styling AE Connect can also be used to customize your pre-save button.

A click on the Pre-save button will trigger the Spotify registration process. This will act exactly like a regular Spotify Register, however the pre-save action will happen right after registration. The user will not have to take any extra steps and will be returned to the page as per usual, with an optional “You have now pre-saved X” message.

That's it! Enjoy watching the data roll in.