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 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 business dashboard.