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.

Requirements

An initialized FrakSetup configuration object

More information about the FrakSetup 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.
`classname`	`string`	—	CSS class names applied to the root element.

Usage Examples

Basic Button

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

With Custom Text

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

With Placement

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

With Custom Class

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

CSS

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

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

Component-specific CSS can also be configured via placements in the Frak Ads Manager dashboard.