The <OneTap /> component provides Spotify & Apple services.

The <OneTap /> component includes pre-save services for Apple Music and Spotify.

Users can pre-save the track before it will be released. Once the song / playlist / album is released, everyone who pre-saved will automatically have the track saved in their library.

Recoup's Webplayer provides utilities to help the user experience of <OneTap />.

'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:artist:2hlmm7s2ICUX0LVIhVFlZQ" />
    </SyncstreamProvider>
  );
}

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:artist:2hlmm7s2ICUX0LVIhVFlZQ" />
    </SyncstreamProvider>
  );
}

SyncstreamProvider component takes 2 properties:

resume play / resume music playback from the authenticated provider.

Example

The <OneTap /> component provides Apple Music services for Premium subscribers.

You can use it as is, without any required props. 👋

Enjoy the music. 🥳

Click here to integrate Recoup's Webplayer SDK into your app. 📝

Example:

<OneTap 
  spotifyDefaultLink="spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ"
  appleDefaultLink="https://music.apple.com/us/playlist/dale-play/pl.4b364b8b182f4115acbf6deb83bd5222"
/>

What is the Recoup Webplayer?

It’s a free tool that lets your fans sign-in and stream music right on your website—in one click.

How does it work?

With the Recoup Webplayer, you can send fans directly TO YOUR OWN WEBSITE when promoting new music (instead of third parties). When fans land on your site they sign in with Spotify or Apple Music with one click - and start streaming directly on your site. It's so eay

Why should you care?

Capture fan emails and increase song streams (a lot).

How do I install it?

Just follow our Quickstart installation guide to embed the Webplayer on your site in minutes. No coding expertise needed! (If you need help, feel free to reach out to [email protected])

Get Started with These Popular Docs

pause music playback from the authenticated provider.

Example

Spotify Presave

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

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 .

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

Prerequisites

Before integrating the Webplayer, ensure your project meets the following requirements:

• version 18 or higher

• version 5 or higher

Installation

You can install the Webplayer using npm or yarn. Choose your preferred package manager and run the following command:

Set Up Your App with Recoup's Webplayer

After installing the package, import the SyncstreamProvider component into your project and wrap your app with it. The SyncStreamProvider should wrap any component or page that will use SyncStream. It is recommended to place it as close to the root of your application as possible.

Example or :

Property Descriptions

SyncstreamProvider Component

In the examples above, notice that the SyncstreamProvider component takes one property:

OneTap Component In the examples above, notice that the OneTap component takes two properties:

The URI, or Uniform Resource Indicator, is a unique code that identifies a specific element on Spotify or Apple Music, such as an artist, album, track, playlist, or user. to convert any Spotify song or album URL into a URI. Please refer to the for more information about this.

Just use Recoup's Webplayer! 🎉

Once you've wrapped your app with the SyncstreamProvider, you can now use it throughout your components and pages via the OneTap!

'use client';

import { OneTap, SyncstreamProvider } from "syncstream-ai";
import "syncstream-ai/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"}
        cta={{
	  url: "https://play.syncstream.ai",
	  text: "Sign in to Play Game"
        }}
      />
    </SyncstreamProvider>
  );
}

import React from 'react';
import { OneTap, SyncstreamProvider } from "syncstream-ai";
import "syncstream-ai/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"}
        cta={{
	  url: "https://play.syncstream.ai",
	  text: "Sign in to Play Game"
        }}
      />
    </SyncstreamProvider>
  );
}

The <OneTap /> component accepts a prop named cta.

User Experience

After signing in successfully, a custom CTA button will appear. When you click this button, the cta.url will open in a new tab.

To learn more about the user experience on Spotify and Apple, click here: Spotify | Apple

The <OneTap /> component provides Spotify services for Premium & Free subscribers.

Spotify Premium User

Spotify Premium users can enjoy the Recoup Webplayer with their Spotify account after signing in.

'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:album:1HOMjYmPvDpCNbb44JnFaa" 
        spotifyFreeAudioUrl={"https://boa-v2.vercel.app/audio/song.mp3"}
        spotifyStartIndex={18}
      />
    </SyncstreamProvider>
  );
}

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:album:1HOMjYmPvDpCNbb44JnFaa" 
         spotifyFreeAudioUrl={"https://boa-v2.vercel.app/audio/song.mp3"}
         spotifyStartIndex={18}
      />
    </SyncstreamProvider>
  );
}

Please refer to the Spotify documentation to learn more about this.

Spotify Free User

We provide a music player for users without a Spotify subscription as well. If you have non-premium users, you can pass in a custom audio file to play.

Example:

<OneTap 
    contextUri="spotify:artist:0TnOYISbd1XYRBk9myaseg" 
    spotifyFreeAudioUrl={"https://boa-v2.vercel.app/audio/song.mp3"}
/>

Example:

<OneTap 
  spotifyDefaultLink="spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ"
  appleDefaultLink="https://music.apple.com/us/playlist/dale-play/pl.4b364b8b182f4115acbf6deb83bd5222"
/>

Presave UX

1. First, click the dropdown arrow to change the sign in to Apple Music.

2. Click the Sign In to Presave button.

3. Once signed in, track is presaved and you'll be redirected back to the artist's website.

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