LogoLogo
  • Overview
  • Quickstart
  • <SyncstreamProvider />
  • <OneTap />
    • Spotify
    • Apple Music
    • Presave
      • Apple Music Presave
      • Spotify Presave
    • Custom CTA
  • Utilities
    • Resume
    • Pause
Powered by GitBook
On this page
  • Prerequisites
  • Installation
  • Set Up Your App with Recoup's Webplayer
  • Property Descriptions
  • Just use Recoup's Webplayer! 🎉

Was this helpful?

Export as PDF

Quickstart

Recoup's Webplayer is the easiest way to bring Spotify & Apple Music into your app.

PreviousOverviewNext<SyncstreamProvider />

Last updated 5 months ago

Was this helpful?

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:

npm install @syncstreamai/syncstream

yarn add @syncstreamai/syncstream

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 :

'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 "syncstream-ai";
import "syncstream-ai/dist/index.css";

export default function App() {
  return (
    <SyncstreamProvider
      campaignId="EXAMPLE_CAMPAIGN_ID"
      signInRequired
    >
      <OneTap spotifyDefaultLink="spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ" />
    </SyncstreamProvider>
  );
}

Property Descriptions

SyncstreamProvider Component

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

Property
Description

campaignId

signInRequired

(Optional) Use this to add a blur overlay and prevent the user from accessing the site without first connecting a streaming provider.

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

Property
Description

spotifyDefaultLink

Optional.

  • Spotify URI of the context to play. Valid contexts are albums, artists & playlists. "spotify:album:1Je1IMUlBXcx1Fz0WE7oPT"

  • A JSON array of the Spotify track URIs to play. For example: ["spotify:track:4iV5W9uYEdYUVa79Axb7Rh", "spotify:track:1301WleyT98MSxVHPZCA6M"]

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!

(Required) Your campaign ID assigned by .

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.

React
TypeScript
NextJS
Create React App
Click here
Spotify documentation
Recoup