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>
);
}
import React from 'react';
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