Custom Spotify Buttons

AE has built-in Spotify buttons that perform additional actions when your member registers through Spotify.

Jump to:

For Spotify pre-save campaigns where an album or track is added to your members' library once it becomes available see: Create a Spotify Pre-Save Campaign.

Add album to library

This will create an "Add album to library" button on your site that will act like a regular Spotify AE Connect register, but will also add the specified track to the member's library immediately after registration.

Once AEJS is set up on your website, add the following code to your HTML:

<a href="#" data-ae-follow-link="spotify" data-ae-track-id="TRACKID">Add track to library</a>

NOTE: The HTML will accept album IDs (from the album URL) and IDs in the Spotify URI format. For example: 0BwWUstDMUbgq2NYONRqlu and spotify:album:0BwWUstDMUbgq2NYONRqlu

IMPORTANT: If the incorrect HTML tag is used, the Spotify URI ID type will take precedence. For example: data-ae-album-ID="spotify:track:0ofHAoxe9vBkTCp2UQIavz" will be treated as a track follow.

Now you need to modify your Spotify app permissions. From the AE dashboard, navigate to the AE Connect page by clicking AE Connect in the quick links section of the homepage or by clicking the gear in the upper right menu, and choosing AE Connect.
Under Social Apps -> Streaming, click the Spotify icon.
In the pop-up window, select Advanced settings.
In the Add Additional Permissions field, input: user-library-modify and click Add.
The permission will show in the list of Current permissions. Click Update app.
On your site, your user will see a "Add album to library" button. You can style this button however you like (see our article on styling AE Connect)

Add track to library

Once AEJS is set up on your website, add the following code to your HTML:

<a href="#" data-ae-follow-link="spotify" data-ae-track-id="TRACKID">Add track to library</a>

NOTE: The HTML will accept track IDs (from the track URL) and IDs in the Spotify URI format. For example: 0ofHAoxe9vBkTCp2UQIavz and spotify:track:0ofHAoxe9vBkTCp2UQIavz

IMPORTANT: If the incorrect HTML tag is used, the Spotify URI ID type will take precedence. For example: data-ae-album-ID="spotify:album:0BwWUstDMUbgq2NYONRqlu" will be treated as an album follow.

Now you need to modify your Spotify app permissions. From the AE dashboard, navigate to the AE Connect page by clicking AE Connect in the quick links section of the homepage or by clicking the gear in the upper right menu, and choosing AE Connect.
Under Social Apps -> Streaming, click the Spotify icon.
In the pop-up window, select Advanced settings.
In the Add Additional Permissions field, input: user-library-modify and click Add.
The permission will show in the list of Current permissions. Click Update app.
On your site, your user will see a "Add track to library" button. You can style this button however you like (see our article on styling AE Connect)

Follow Artist

Once AEJS is set up on your website, add the following code to your HTML:

<a href="#" data-ae-follow-link="spotify" data-ae-artist-id="08GQAI4eElDnROBrJRGE0X">Spotify Artist follow</a>

NOTE: The HTML will accept artist IDs (from the artist's URL) and IDs in the Spotify URI format. For example: 08GQAI4eElDnROBrJRGE0X and spotify:artist:08GQAI4eElDnROBrJRGE0X

Now you need to modify your Spotify app permissions. From the AE dashboard, navigate to the AE Connect page by clicking AE Connect in the quick links section of the homepage or by clicking the gear in the upper right menu, and choosing AE Connect.
Under Social Apps -> Streaming, click the Spotify icon.
In the pop-up window, select Advanced settings.
In the Add Additional Permissions field, input: user-follow-modify and click Add.
The permission will show in the list of Current permissions. Click Update app.
On your site, your user will see a "Add track to library" button. You can style this button however you like (see our article on styling AE Connect)

Follow Playlist

Once AEJS is set up on your website, add the following code to your HTML:

<a href="#" data-ae-follow-link="spotify" data-ae-playlist-id="37i9dQZF1DWXRqgorJj26U">Spotify playlist follow</a>

NOTE: The HTML will accept playlist IDs (from the playlist URL) and IDs in the Spotify URI format. For example: 37i9dQZF1DWXRqgorJj26U and spotify:playlist:37i9dQZF1DWXRqgorJj26U

Now you need to modify your Spotify app permissions. From the AE dashboard, navigate to the AE Connect page by clicking AE Connect in the quick links section of the homepage or by clicking the gear in the upper right menu, and choosing AE Connect.
Under Social Apps -> Streaming, click the Spotify icon.
In the pop-up window, select Advanced settings.
In the Add Additional Permissions field, input: user-follow-modify and click Add.
The permission will show in the list of Current permissions. Click Update app.
On your site, your user will see a "Add track to library" button. You can style this button however you like (see our article on styling AE Connect)