Custom CTA

In the Custom CTA state, the CTA button displays text provided by the developer and optionally opens a custom URL specified by the developer.

'use client';

import { OneTap, SyncstreamProvider } from "syncstream-ai";
import "syncstream-ai/dist/index.css";

export default function App() {
  return (
    <SyncstreamProvider
      clientId="EXAMPLE_CLIENT_ID"
      signInRequired
    >
      <OneTap 
        spotifyDefaultLink="spotify:artist:2hlmm7s2ICUX0LVIhVFlZQ"
        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

Last updated