---
title: "Call-to-Action"
description: "Learn how the CTA banner works in the Embedded Journey and how to handle its different states"
url: "https://docs.wayflyer.com/embedded-journey-v5-overview/call-to-action"
image: "https://docs.wayflyer.com/_og/d/c_Ocean.takumi,title_Call-to-Action,description_Learn+how+the+CTA+banner+works+in+the+Embedded+Journey+and+how+to+handle+its+different+states,props_eyJ0aGVtZSI6eyJtb2RlIjoibGlnaHQiLCJjb2xvcnMiOnsicHJpbWFyeSI6IiMyMzIzMmQifX19,p_Ii9lbWJlZGRlZC1qb3VybmV5LXY1LW92ZXJ2aWV3L2NhbGwtdG8tYWN0aW9uIg,s_MBxFLwpxU2NGMQY4.png"
---

## Call-to-Action

Understanding the CTA banner states and how they drive the Embedded Journey.

## [Overview](#overview)

The Call-to-Action (CTA) is the entry point for the Embedded Journey. It appears as a banner within your platform, prompting eligible users to apply for financing or continue an in-progress application.

Partners using the **UI SDK** get the CTA banner rendered automatically via the `mountCta` method. Partners using the **Headless SDK** should call `getCta()` to retrieve the CTA configuration and render their own UI.

## [CTA states](#cta-states)

The CTA endpoint returns a `BannerResponse` object with a `state` field indicating what should be displayed. In the Embedded Journey, the banner operates in two modes:

### [Offer states](#offer-states)

These states are shown when a user has not yet started an application:

| State            | Description                                                                      |
| :--------------- | :------------------------------------------------------------------------------- |
| indicative_offer | The user is eligible for financing. The CTA displays a personalised indicative offer amount based on the anonymised data uploaded by the partner. This is the preferred approach for the best user experience. |
| generic_offer    | The user may be eligible for financing but no specific offer amount is available. The CTA displays a general invitation to apply. To show personalised indicative offers instead, see the Uploading Data for Indicative Offers page. |

### [Continue state](#continue-state)

This state is shown when a user has an in-progress embedded application:

| State                         | Description                                                                      |
| :---------------------------- | :------------------------------------------------------------------------------- |
| continue_embedded_application | The user has an in-progress embedded application. The CTA prompts them to continue where they left off. |

If no CTA should be shown (e.g. the user has dismissed it, or is ineligible), the `getCta()` method returns `null`.

## [Using the CTA with the UI SDK](#using-the-cta-with-the-ui-sdk)

When using the UI SDK, the CTA is handled automatically. Call `mountCta` with the target DOM element ID and a prefill callback:

```typescript
import { WayflyerUiSdk, type EmbeddedJourneyPrefillCallback } from '@wf-financing/ui-sdk';

const wayflyerUiSdk = await WayflyerUiSdk.loadSdk(companyToken);

const prefillCallback: EmbeddedJourneyPrefillCallback = async () => ({
  email: 'merchant@example.com',
  companyName: 'Acme Ltd',
});

wayflyerUiSdk.mountCta('wayflyer-cta', prefillCallback);
```

The SDK will fetch the CTA, render the appropriate banner, and handle user interactions including opening the embedded journey panel.

## [Using the CTA with the Headless SDK](#using-the-cta-with-the-headless-sdk)

When using the Headless SDK, call `getCta()` to retrieve the CTA configuration and render your own UI:

```typescript
import { WayflyerHeadlessSdk } from '@wf-financing/headless-sdk';
import type { BannerResponse } from '@wf-financing/headless-sdk';

const sdk = await WayflyerHeadlessSdk.loadSdk(companyToken);
const cta: BannerResponse | null = await sdk.getCta();

if (cta) {
  // Render your CTA UI based on cta.state and cta.data
}
```

The API response includes suggested copy that you can use directly in your UI. The `data.config` object contains:

| Field         | Type     | Description                               |
| :------------ | :------- | :---------------------------------------- |
| text          | string   | Display text for the CTA banner           |
| button_label  | string   | Label for the action button               |
| bullet_points | string[] | Optional list of bullet points to display |

We recommend using the copy provided by the API to ensure a consistent experience. The copy is managed by Wayflyer and localised for each supported language.

## [Dismissing the CTA](#dismissing-the-cta)

Users can dismiss the CTA banner. When dismissed, subsequent calls to `getCta()` will return `null` for a cooling-off period. Repeated dismissals result in an exponentially increasing backoff.

When a user dismisses the CTA, it is hidden for that user and reappears after an exponential backoff period: 3 days after the first dismissal, then 9, 27, and 81 days. After a fifth dismissal, the CTA is permanently hidden for that user. Dismissals are tracked per user and per CTA context, a new funding cycle or a new application stage resets the schedule.

```typescript
// UI SDK: dismissal is handled automatically by the rendered banner.

// Headless SDK:
await sdk.dismissCta();
```

## [Recommended placement](#recommended-placement)

For best results, the CTA banner should be placed at the top of the page, before any other content. It should span the full width of the content area. If that is not possible, place it after the most important element on the page, but ensure it remains visible above the fold for higher conversion rates.