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.

NextJS

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

Create React App

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.

Property	Description
cta	Optional. { url: string, text: string } text: Custom CTA button text. url: Custom CTA url (optional).

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