Banner Component

Summary

The <frak-banner> component displays contextual banners on your website. It automatically detects the user’s context and shows one of two variants:

Referral banner — Promotes sharing and rewards to eligible users.
In-app browser banner — Prompts users browsing in an in-app browser (Instagram, TikTok, etc.) to open the page in their default browser for a better experience. This variant is opt-in: enable it with the allowInappRedirect attribute.

Requirements

An initialized FrakSetup configuration object

More information about the FrakSetup object.

Parameters

Attribute	Type	Description
`placement`	`string`	Placement ID for backend-driven configuration.
`classname`	`string`	CSS class names applied to the root element.
`interaction`	`string`	Filter rewards by interaction type (e.g. `"purchase"`, `"referral"`). When omitted, the best reward across all types is shown.
`referralTitle`	`string`	Override the referral banner title.
`referralDescription`	`string`	Override the referral banner description.
`referralCta`	`string`	Override the referral banner CTA button text.
`inappTitle`	`string`	Override the in-app browser banner title.
`inappDescription`	`string`	Override the in-app browser banner description.
`inappCta`	`string`	Override the in-app browser banner CTA button text.
`imageUrl`	`string`	Override the image shown on the left of the referral banner. Falls back to the built-in gift icon when omitted.
`preview`	`string`	When set, forces the banner to render in preview mode (e.g. in Shopify theme editor).
`previewMode`	`"referral"` \| `"inapp"`	Which variant to preview. Only used when `preview` is set. Defaults to `"referral"`.
`allowInappRedirect`	`boolean` \| `"true"` \| `"false"`	Allow the banner to switch to in-app browser mode and prompt users to open the system browser. Opt-in, defaults to `false`.

Usage Examples

<frak-banner></frak-banner>

With Custom Referral Text

<frak-banner
    referralTitle="Share and earn rewards!"
    referralDescription="Invite your friends and earn up to 5% cashback."
    referralCta="Start sharing"
></frak-banner>

With In-App Browser Text

<frak-banner
    allowInappRedirect="true"
    inappTitle="Open in your browser"
    inappDescription="For the best experience, open this page in your default browser."
    inappCta="Open now"
></frak-banner>

With Placement

<frak-banner placement="homepage"></frak-banner>

Banner text and styling are resolved from the placement configuration set in the business dashboard.

With Custom Class

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

Preview Mode (Theme Editors)

When building a theme editor integration (e.g. Shopify), use preview to render static content without requiring an active SDK connection:

<frak-banner preview="true" previewMode="referral"></frak-banner>
<frak-banner preview="true" previewMode="inapp"></frak-banner>

CSS

Target the component using the frak-banner selector:

frak-banner .override {
  background-color: #f5f5f5;
  border-radius: 8px;
}

Component-specific CSS can also be configured via placements in the business dashboard.

Banner