Offer

Part ofEmbedded Banking↗

An offer card and modal that invites the user to apply for a product (today, a bank account) and then shows where their application stands.

The card and its "Learn more" modal present your product copy (logo, captions, "How it works" steps, benefits). Its Apply now and modal CTAs call onPrimaryCtaClick, which you typically wire to show BankAccountOnboardingWidget inline. Once an application exists, the card swaps its CTAs for the application's status (see Behaviour), and it hides itself when the user already has an account.

Quick Start

Pass your tenant-specific content; the package looks up no white-label or bank assets itself.

BankAccountOnboardingWidget renders inline and fills its container, so the CTA either navigates to a page that hosts it or swaps it in place of the card inside a container with a real height:

import { useState } from 'react';
import {
  OfferWidget,
  BankAccountOnboardingWidget,
} from '@tesouro/embedded-components-react';

function ProspectOnboarding({ content }) {
  const [isOnboarding, setIsOnboarding] = useState(false);

  if (isOnboarding) {
    return (
      <div style={{ height: '100vh', minHeight: 600 }}>
        <BankAccountOnboardingWidget
          onEmbeddedOnboardingCompletedSuccessfully={handleComplete}
          onNavigateToDashboard={goToDashboard}
        />
      </div>
    );
  }

  return (
    <OfferWidget
      content={content}
      onPrimaryCtaClick={() => setIsOnboarding(true)}
    />
  );
}

Behaviour

• Renders nothing until widget init and the organization's application status load.
• Hidden when the user is already ACTIVE / INACTIVE or INVITED, or the organization's bank-account application is COMPLETE.
• Otherwise the card follows the organization's application:

• Resume application calls the same onPrimaryCtaClick; BankAccountOnboardingWidget resumes the draft by itself.
• The bank name in status messages comes from widget init.
• The widget renders content as given, so your sponsor bank must approve that copy before it goes live.

Props

Widget props

TypeScript

import type {
  OfferWidgetProps,
  OfferWidgetContent,
  OfferWidgetLabels,
  OfferWidgetStatusLabels,
  OfferWidgetBenefit,
  OfferWidgetHowItWorksStep,
  OfferWidgetImage,
} from '@tesouro/embedded-components-react';
import { OfferBenefitIcon } from '@tesouro/embedded-components-react';