Banner
Ce contenu n’est pas encore disponible dans votre langue.
Banner(
__namedParameters):Element|null
Defined in: vendor/wallet/sdk/components/src/components/Banner/Banner.tsx:75
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
Section titled “Parameters”__namedParameters
Section titled “__namedParameters”allowInappRedirect?
Section titled “allowInappRedirect?”boolean | "true" | "false"
When true (default false), the banner is allowed to switch to
in-app browser mode (Instagram / Facebook WebView) and prompt the
user to escape to the system browser.
Most flows now work inside in-app browsers via the anonymous-id flow, so the redirect is opt-in. Enable it only on surfaces that actually drive users into a WebAuthn-bound action (login, sendTransaction, SIWE authenticate).
Accepts the boolean true (TS/JSX) or the string "true" (HTML
attribute). Any other value — including false, "false", the
empty string, or attribute absence — keeps the redirect disabled.
classname?
Section titled “classname?”string = ""
CSS class names passed through to the root element (Light DOM).
imageUrl?
Section titled “imageUrl?”string
Override the image displayed on the left of the referral banner.
Accepts an image URL. Falls back to the built-in gift icon when omitted.
The image is constrained to the icon slot via object-fit: contain,
so any aspect ratio renders correctly.
inappCta?
Section titled “inappCta?”string
Override the in-app browser banner CTA button text.
inappDescription?
Section titled “inappDescription?”string
Override the in-app browser banner description.
inappTitle?
Section titled “inappTitle?”string
Override the in-app browser banner title.
interaction?
Section titled “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?
Section titled “placement?”string
Placement ID for backend-driven CSS customization.
preview?
Section titled “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?
Section titled “previewMode?”"referral" | "inapp"
Which banner variant to preview: “referral” or “inapp”. Only used when preview is set. Defaults to “referral”.
referralCta?
Section titled “referralCta?”string
Override the referral banner CTA button text.
referralDescription?
Section titled “referralDescription?”string
Override the referral banner description.
referralTitle?
Section titled “referralTitle?”string
Override the referral banner title.
Returns
Section titled “Returns”Element | null
Examples
Section titled “Examples”Basic usage (auto-detects mode):
<frak-banner></frak-banner>With a custom class:
<frak-banner classname="my-custom-banner"></frak-banner>