Skip to content

Documentation / @frak-labs/components / Banner

Function: Banner()

Banner(__namedParameters): Element | null

Defined in: sdk/components/src/components/Banner/Banner.tsx:58

Auto-detecting notification banner component.

Renders an inline banner on the merchant page with one of two distinct visual styles depending on the detected mode:

  • Referral mode (white): Shown after a successful referral link processing. Displays a gift icon, reward copy, and a "Got it" CTA.
  • In-app browser mode (dark transparent): Shown when the page is opened inside a social media in-app browser (Instagram, Facebook). Offers an inline link to redirect to the default browser plus a close button to dismiss.

In-app browser mode takes priority over referral mode. Uses Light DOM + vanilla-extract styles from @frak-labs/design-system.

Parameters

__namedParameters

classname?

string = ""

CSS class names passed through to the root element (Light DOM).

inappCta?

string

Override the in-app browser banner CTA button text.

inappDescription?

string

Override the in-app browser banner description.

inappTitle?

string

Override the in-app browser banner title.

interaction?

"referral" | "create_referral_link" | "purchase" | `custom.${string}`

Filter rewards by interaction type (e.g. "purchase", "referral"). When omitted, the best reward across all interaction types is shown.

placement?

string

Placement ID for backend-driven CSS customization.

preview?

string

When set, forces the banner to render in preview mode (e.g. in Shopify theme editor). Bypasses normal event/browser detection and shows static content.

previewMode?

"referral" | "inapp"

Which banner variant to preview: "referral" or "inapp". Only used when preview is set. Defaults to "referral".

referralCta?

string

Override the referral banner CTA button text.

referralDescription?

string

Override the referral banner description.

referralTitle?

string

Override the referral banner title.

Returns

Element | null

Examples

Basic usage (auto-detects mode):

<frak-banner></frak-banner>

With a custom class:

<frak-banner classname="my-custom-banner"></frak-banner>