Call-to-Action

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

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

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

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

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

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

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

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

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

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.

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

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

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.