# Banner Component

# Banner

## 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](/developers/components/frak-setup) object.

## Parameters

| Attribute | Type | Description |
|-----------|------|-------------|
| `placement` | `string` | Placement ID for [backend-driven configuration](/developers/concepts/placements). |
| `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

### Basic Banner

```html
<frak-banner></frak-banner>
```

### With Custom Referral Text

```html
<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

```html
<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

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

Banner text and styling are resolved from the [placement configuration](/developers/concepts/placements) set in the business dashboard.

### With Custom Class

```html
<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:

```html
<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:

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

Component-specific CSS can also be configured via [placements](/developers/concepts/placements) in the business dashboard.