# Custom CTA

{% tabs %}
{% tab title="NextJS" %}

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

{% endtab %}

{% tab title="Create React App" %}

```typescript
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>
  );
}
```

{% endtab %}
{% endtabs %}

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

| Property | Description                                                                                                                   |
| -------- | ----------------------------------------------------------------------------------------------------------------------------- |
| cta      | <p>Optional. <br>{ url: string, text: string }</p><p>text: Custom CTA button text.<br>url: Custom CTA url (optional).<br></p> |

## 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](https://webplayer.recoupable.com/spotify#user-experience) | [Apple](https://webplayer.recoupable.com/apple-music#user-experience)

<figure><img src="https://1130630245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuY3RdaMtpjfYCthEEjjK%2Fuploads%2FrxMZeTWz0IvoYxQsBhKW%2Fimage.png?alt=media&#x26;token=dfb220ce-9789-4a54-bb90-985795a9a5d2" alt=""><figcaption></figcaption></figure>
