There are a few options when it comes to connecting with your Spotify audience from your website, including:
- Follow Playlist
- Add Track to Library
- Follow User
To start, setup AE JS on your website as usual then add the following to your markup depending on which button you want:
1. Follow Playlist
<a href="#" data-ae-follow-link="spotify" data-ae-playlist-id="37i9dQZF1DZ06evO3RrwKJ">Spotify playlist follow</a>
This process requires your Spotify app to have the playlist-modify-public scope (or playlist-modify-private if the playlist in question is private).
Here's how you do it:
- From the AE dashboard, click on AE Connect, found in the top right menu bar.
- Next, click on the Spotify icon. You need to have the Spotify Social App set up already.
- A box will pop up and you will see two tabs: "Basic Settings" and "Advanced Settings." Click on "Advanced Settings."
- In the box that says "Add Additional Permissions," type in: playlist-modify-public or playlist-modify-private
- Scroll down and click "Save Changes."
2. Add Track to Library
<a href="#" data-ae-follow-link="spotify" data-ae-track-id="7DaPRV3dvr1QUfN4HIQCrH">Spotify track presave</a>
This process requires your Spotify app to have the user-library-modify scope. Follow the same steps as in Section 1, "Follow Playlist."
3. Follow User
<a href="#" data-ae-follow-link="spotify" data-ae-user-id="greendayofficial">Spotify user follow</a>
This process requires your Spotify app to have the user-follow-modify scope. Follow the same steps as in Section 1, "Follow Playlist."
Make sure you fill in you 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.
Developers Note: The HTML will also accept IDs in the Spotify URI format. For example:
If the incorrect HTML tag is used, the ID type will take precedence. For example, data-ae-album-id="spotify:track:4KXwFI9pgJLpUIAc9oSL8j" will be treated as a track follow.
How This Will Look to the User
The user will see a “Login to follow” button on the site (text can be customized to your needs). 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 Spotify button.
A click on the button will trigger the Spotify registration process. This will act exactly like a regular Spotify Register, however the follow 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 followed the playlist x” message.
With a custom Spotify Pre-save button, you get valuable data about your fans, allowing you to target and segment with precision. Learn how to use this data to create a killer campaign here!