The Presave Sequence is used when artists / labels need to run a Presave campaign before a release. This specific sequence ensures the best fan experience for Presave promo campaigns. This sequence requires the developer to add a Presave URI and Release Date
Spotify Presave
NextJS Create React App
Copy 'use client' ;
import { OneTap , SyncstreamProvider } from "@syncstreamai/syncstream" ;
import "@syncstreamai/syncstream/dist/index.css" ;
export default function App () {
return (
< SyncstreamProvider
clientId = "EXAMPLE_CLIENT_ID"
signInRequired
>
< OneTap
spotifyDefaultLink = "spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ"
spotifyFreeAudioUrl = { "https://boa-v2.vercel.app/audio/song.mp3" }
spotifyPresave = {{
id : "BOA by Megan thee Stallion" ,
releaseDate : "2026-07-16"
}}
/>
</ SyncstreamProvider >
);
}
Copy import React from 'react' ;
import { OneTap , SyncstreamProvider } from "@syncstreamai/syncstream" ;
import "@syncstreamai/syncstream/dist/index.css" ;
export default function App () {
return (
< SyncstreamProvider
clientId = "EXAMPLE_CLIENT_ID"
signInRequired
>
< OneTap
spotifyDefaultLink = "spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ"
spotifyFreeAudioUrl = { "https://boa-v2.vercel.app/audio/song.mp3" }
spotifyPresave = {{
id : "BOA by Megan thee Stallion" ,
releaseDate : "2026-07-16"
}}
/>
</ SyncstreamProvider >
);
}
<OneTap />
component takes new prop as named sportifyPresave .
Presave UX
First, click the Sign In to Presave button.
Once signed in, you'll be redirected back to the artist's website.
Clicking on the Big Blue Button presaves the track.