Skip to main content
Integrate the Formbricks App Survey SDK into your app using multiple options. Explore the available choices below. If you need something else, open a GitHub Discussion, and we’ll be happy to help!
Important for Self-Hosted Setups:Multi-Domain Setup: If you are using the multi-domain setup, the appUrl parameter in all SDK configurations should point to your public domain (PUBLIC_URL environment variable). This is the domain where surveys and public-facing content are served, which may be different from your admin interface domain (WEBAPP_URL).Single Domain Setup: If you are using the single domain setup, the appUrl parameter in all SDK configurations should point to your admin domain (WEBAPP_URL environment variable).

HTML

All you need to do is add three lines of code to your HTML script, and that’s it!

React.js

Load our JavaScript library with your Workspace ID, and you’re ready to go!

Next.js

Natively add us to your Next.js app, with support for both App Router and Pages Router setups.

Vue.js

Learn how to use Formbricks’ Vue.js SDK to integrate your surveys into Vue.js applications.

React Native

Easily integrate our SDK with your React Native app for seamless survey support.

Swift

Use our iOS SDK to quickly integrate surveys into your iOS applications.

Android

Integrate surveys into your Android applications using our native Kotlin SDK.

Flutter

Add surveys to your Flutter app on iOS and Android with our Dart SDK.

Prerequisites

Before getting started, make sure you have:
  • A running web application with user authentication in your chosen framework.
  • A Formbricks account with your Workspace ID and API host, available on the Connect Your App page under Settings → Workspace.

HTML

All you need to do is copy a <script> tag to your HTML head:

Required Customizations

Now, visit the Validate Your Setup section to verify your setup!

React.js

Install the Formbricks SDK using one of the following package managers: npm, pnpm, or yarn. Note that zod is required as a peer dependency and must also be installed in your app.
npm
pnpm
yarn
Update your App.js/ts file to initialize Formbricks.
src/App.js

Required Customizations

Now, visit the Validate Your Setup section to verify your setup!

Next.js

Next.js apps use either the App Directory or the Pages Directory. Since the Formbricks SDK runs on the client side, follow these steps based on your setup:
  • App Directory: Create a new component in app/formbricks.tsx and call it in app/layout.tsx.
  • Pages Directory: Initialize Formbricks directly in _app.tsx.
Code snippets for the integration for both conventions are provided to further assist you.
npm
pnpm
yarn

App directory

app/formbricks.tsx
app/layout.tsx

Pages directory

src/pages/_app.tsx

Required Customizations

First, initialize the Formbricks SDK to run only on the client side. To track page changes, register the route change event with the Next.js router. Next, go to the Validate Your Setup section to verify your setup!

Vue.js

Integrating the Formbricks SDK with Vue.js is easy. We’ll ensure the SDK is only loaded and used on the client side, as it’s not meant for server-side use.
npm
pnpm
yarn
src/formbricks.js
src/main.js

Required Customizations

Now, visit the Validate Your Setup section to verify your setup!

React Native

Install the Formbricks React Native SDK using one of the package managers, i.e., npm, pnpm, or yarn.
npm
pnpm
yarn
Now, update your App.js/App.tsx file to initialize Formbricks:
src/App.js

Required Customizations

Now, visit the Validate Your Setup section to verify your setup!

Swift

Minimum iOS Version: The Formbricks iOS SDK requires iOS 16.4 or higher.
Install the Formbricks iOS SDK using the following steps: Swift Package Manager
  1. In Xcode choose File → Add Packages…
  2. Enter your repo URL (e.g. https://github.com/formbricks/ios.git)
  3. Choose version rule (e.g. “Up to Next Major” starting at 1.0.0).
  4. Import in your code:
CocoaPods
  1. Add the following to your Podfile:
  2. Run pod install in your app directory
  3. Import in your code:
Now start using FormbricksSDK

Required Customizations

Now, visit the Validate Your Setup section to verify your setup!

Android

Minimum Android Version: The Formbricks Android SDK requires Android 10 (API level 29) or higher.
Install the Formbricks Android SDK using the following steps:

Installation

Add the Maven Central repository and the Formbricks SDK dependency to your application’s build.gradle.kts:
Enable DataBinding in your app’s module build.gradle.kts:

Usage

Required Customizations

Flutter

Platform Support: The Formbricks Flutter SDK targets iOS and Android only. Flutter Web and desktop are not supported.
Install the Formbricks Flutter SDK from pub.dev:

Usage

Mount the Formbricks widget once, high in your widget tree (e.g. alongside your app’s home). It initializes the SDK on mount and renders any triggered survey in a modal overlay:
Then drive the SDK through its static API from anywhere:
Prefer to initialize before any UI mounts? Call Formbricks.setup(appUrl: ..., workspaceId: ...) directly — the widget still needs to be in the tree to render surveys, but it won’t re-run setup (setup is idempotent). All static methods are sequenced through an internal command queue, so calls run in submission order and return a Future<Result<void, FormbricksError>>.

Public API

Attribute keys must be lowercase letters, numbers, and underscores, and start with a letter. DateTime values are sent as UTC ISO-8601 strings; numbers stay numbers. Identity and attribute changes are debounced (~500 ms) and coalesced into a single backend request.

Required Customizations

Surveys render by loading {appUrl}/js/surveys.umd.cjs in a WebView, so that URL must be reachable from the device. Formbricks Cloud and standard self-hosted instances serve this script automatically. Config is persisted with shared_preferences and is not encrypted at rest — avoid putting sensitive PII in attribute values.
Now, visit the Validate Your Setup section to verify your setup!

Validate your setup

Once you’ve completed the steps above, validate your setup by checking the Setup Checklist on the Connect Your App page under Settings → Workspace. The widget status indicator should change from this: first validate To this: second validate

Debugging Formbricks Integration

The debug mode is only available in the JavaScript SDK and works exclusively in the browser. It is not supported in mobile SDKs such as React Native, iOS, Android, or Flutter.
Enabling debug mode in your browser can help troubleshoot issues with Formbricks. Here’s how to activate it and what to look for in the logs.

Activate Debug Mode

To enable debug mode, add ?formbricksDebug=true to your app’s URL (e.g., https://example.com?formbricksDebug=true).

View Debug Logs

  1. Open your browser’s developer tools:
  • Google Chrome/Edge: Press F12 or right-click and select “Inspect” > “Console”.
  • Firefox: Press F12 or right-click and select “Inspect Element” > “Console”.
  • Safari: Press Option + Command + C to open developer tools and go to the “Console” tab.

Common Use Cases

Debug mode is helpful for:
  • Verifying Formbricks initialization.
  • Identifying issues with survey triggers.
  • Troubleshooting unexpected behavior.

Debug Log Messages

Logs provide insights into:
  • API calls and responses.
  • Survey triggers and form interactions.
  • Initialization errors.
If you’re stuck, visit GitHub Discussions for assistance.