# Open In App Component

# Open In App

## Summary

The `<frak-open-in-app>` component renders a button that redirects users from in-app browsers (Instagram, TikTok, Facebook, etc.) to the device's default browser. This ensures a better user experience for features like WebAuthn authentication that don't work well in WebViews.

:::note
This component only renders on mobile devices. On desktop, it returns nothing.
:::

## Requirements

- An initialized `FrakSetup` configuration object

More information about the [FrakSetup](/developers/components/frak-setup) object.

## Parameters

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `text` | `string` | `"Open in App"` | Text to display on the button. |
| `placement` | `string` | — | Placement ID for [backend-driven configuration](/developers/concepts/placements). |
| `classname` | `string` | — | CSS class names applied to the root element. |

## Usage Examples

### Basic Button

```html
<frak-open-in-app></frak-open-in-app>
```

### With Custom Text

```html
<frak-open-in-app text="Get the full experience"></frak-open-in-app>
```

### With Placement

```html
<frak-open-in-app placement="mobile-landing"></frak-open-in-app>
```

### With Custom Class

```html
<frak-open-in-app classname="button button-primary"></frak-open-in-app>
```

## CSS

Target the component using the `frak-open-in-app` selector:

```css
frak-open-in-app .override {
  background-color: #1a1a1a;
  color: #fff;
  border-radius: 8px;
}
```

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