Spotify Presave

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. 🎼 🥳