Spotify

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

'use client';

import { OneTap, SyncstreamProvider } from "@syncstreamai/syncstream";
import "@syncstreamai/syncstream/dist/index.css";

export default function App() {
  return (
    <SyncstreamProvider
      campaignId="EXAMPLE_CAMPAIGN_ID"
      signInRequired
    >
      <OneTap 
        spotifyDefaultLink="spotify:album:1HOMjYmPvDpCNbb44JnFaa" 
        spotifyFreeAudioUrl={"https://boa-v2.vercel.app/audio/song.mp3"}
        spotifyPresave={{
          id: "BOA by Megan thee Stallion",
          releaseDate: "2026-07-16"
        }}
      />
    </SyncstreamProvider>
  );
}

Create React App

import React from 'react';
import { OneTap, SyncstreamProvider } from "@syncstreamai/syncstream";
import "@syncstreamai/syncstream/dist/index.css";

export default function App() {
  return (
    <SyncstreamProvider
      campaignId="EXAMPLE_CAMPAIGN_ID"
      signInRequired
    >
      <OneTap 
        spotifyDefaultLink="spotify:album:1HOMjYmPvDpCNbb44JnFaa" 
        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 .

Property	Description
spotifyPresave	Optional. { id: string, releaseDate: string } Id to pre-save in spotify. releaseDate to pre-save in spotify.
spotifyFreeAudioUrl	Optional. Audio for Spotify free users.

Presave UX

1. First, click the Sign In to Presave button.

2. Once signed in, you'll be redirected back to the artist's website.

1. Clicking on the Big Blue Button presaves the track.

1. Finally, enjoy music by clicking the web player here button. 🎼 🥳