# Spotify Presave

## Spotify Presave

{% tabs %}
{% tab title="NextJS" %}

```typescript
'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>
  );
}
```

{% endtab %}

{% tab title="Create React App" %}

<pre class="language-typescript"><code class="lang-typescript">import React from 'react';
import { OneTap, SyncstreamProvider } from "@syncstreamai/syncstream";
import "@syncstreamai/syncstream/dist/index.css";

export default function App() {
  return (
    &#x3C;SyncstreamProvider
<strong>      campaignId="EXAMPLE_CAMPAIGN_ID"
</strong>      signInRequired
    >
      &#x3C;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"
        }}
      />
    &#x3C;/SyncstreamProvider>
  );
}
</code></pre>

{% endtab %}
{% endtabs %}

`<OneTap />` component takes new prop as named *<mark style="color:blue;">**sportifyPresave**</mark>* .

| Property            | Description                                                                                                                                          |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| spotifyPresave      | <p>Optional. </p><p>{ id: string, releaseDate: string  }</p><ul><li>Id to pre-save in spotify.</li><li>releaseDate to pre-save in spotify.</li></ul> |
| spotifyFreeAudioUrl | Optional. Audio for Spotify `free` users.                                                                                                            |

## Presave UX

1. First, click the <mark style="color:blue;">**Sign In to Presave**</mark> button.
2. Once signed in, you'll be redirected back to the artist's website.

<figure><img src="https://1130630245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuY3RdaMtpjfYCthEEjjK%2Fuploads%2FqLVy0NhHjCsLFnGw3GB7%2Fimage.png?alt=media&#x26;token=db19c8c5-703b-4d56-949d-def58fdc75aa" alt="" width="375"><figcaption></figcaption></figure>

3. Clicking on the <mark style="color:blue;">Big Blue Button</mark> presaves the track.

<figure><img src="https://1130630245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuY3RdaMtpjfYCthEEjjK%2Fuploads%2Fk8IKUFLPZxXUuuSlS71J%2Fimage.png?alt=media&#x26;token=8c47f50d-6f38-4248-a1c6-0ccf0e30cf7a" alt=""><figcaption></figcaption></figure>

4. Finally, enjoy music by clicking the `web player here` button. :musical\_score: :partying\_face: