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!

Vue.js

Learn how to use Formbricks’ React Native SDK to integrate your surveys into React Native applications.

​
Prerequisites

Before getting started, make sure you have:

  • A running web application with user authentication in your chosen framework.

  • A Formbricks account with your environment ID and API host, available in the Setup Checklist under Settings.

​
HTML

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

<!-- START Formbricks Surveys -->
<script type="text/javascript">
!function(){
    var apiHost = "https://app.formbricks.com";
    var environmentId = "<your-environment-id>";
    var userId = "<your-user-id>"; //optional
    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=apiHost+"/js/formbricks.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: environmentId, apiHost: apiHost, userId: userId})},500)}();
</script>
<!-- END Formbricks Surveys -->

​
Required Customizations

NameTypeDescription
environment-idstringFormbricks Environment ID.
api-hoststringURL of the hosted Formbricks instance.

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 project.

npm
npm install @formbricks/js zod
pnpm
pnpm add @formbricks/js zod
yarn
yarn add @formbricks/js zod

Update your App.js/ts file to initialize Formbricks.

src/App.js
// other imports
import formbricks from "@formbricks/js";

if (typeof window !== "undefined") {
  formbricks.init({
    environmentId: "<environment-id>",
    apiHost: "<api-host>",
    userId: "<user-id>", //optional
  });
}

function App() {
  // your own app
}

export default App;

​
Required Customizations

NameTypeDescription
environment-idstringFormbricks Environment ID.
api-hoststringURL of the hosted Formbricks instance.

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

​
Next.js

Next.js projects 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
npm install @formbricks/js zod
pnpm
pnpm add @formbricks/js zod
yarn
yarn add @formbricks/js zod

​
App directory

app/formbricks.tsx
"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import formbricks from "@formbricks/js";

export default function FormbricksProvider() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    formbricks.init({
      environmentId: "<environment-id>",
      apiHost: "<api-host>",
      userId: "<user-id>", //optional
    });
  }, []);

  useEffect(() => {
    formbricks?.registerRouteChange();
  }, [pathname, searchParams]);

  return null;
}
app/layout.tsx
// other imports
import FormbricksProvider from "./formbricks";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <FormbricksProvider />
      <body>{children}</body>
    </html>
  );
}

​
Pages directory

src/pages/_app.tsx
// other import
import { useRouter } from "next/router";
import { useEffect } from "react";
import formbricks from "@formbricks/js";

if (typeof window !== "undefined") {
  formbricks.init({
    environmentId: "<environment-id>",
    apiHost: "<api-host>",
    userId: "<user-id>", //optional
  });
}

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    // Connect next.js router to Formbricks
    const handleRouteChange = formbricks?.registerRouteChange;
    router.events.on("routeChangeComplete", handleRouteChange);

    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, []);
  return <Component {...pageProps} />;
}

​
Required Customizations

NameTypeDescription
environment-idstringFormbricks Environment ID.
api-hoststringURL of the hosted Formbricks instance.

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
npm install @formbricks/js
pnpm
pnpm add @formbricks/js
yarn
yarn add @formbricks/js
src/formbricks.js
import formbricks from "@formbricks/js";

if (typeof window !== "undefined") {
  formbricks.init({
    environmentId: "<environment-id>",
    apiHost: "<api-host>",
    userId: "<user-id>", //optional
  });
}

export default formbricks;
src/main.js
// other imports
import formbricks from "@/formbricks";

const app = createApp(App);

app.use(router);

app.mount("#app");

router.afterEach((to, from) => {
  if (typeof formbricks !== "undefined") {
    formbricks.registerRouteChange();
  }
});

​
Required Customizations

NameTypeDescription
environment-idstringFormbricks Environment ID.
api-hoststringURL of the hosted Formbricks instance.

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
npm install @formbricks/react-native
pnpm
pnpm add @formbricks/react-native
yarn
yarn add @formbricks/react-native

Now, update your App.js/App.tsx file to initialize Formbricks:

src/App.js
// other imports
import Formbricks from "@formbricks/react-native";

const config = {
  environmentId: "<environment-id>",
  apiHost: "<api-host>",
  userId: "<user-id>", // optional
};

export default function App() {
  return (
    <>
      {/* Your app content */}
      <Formbricks initConfig={config} />
    </>
  );
}

​
Required Customizations

NameTypeDescription
environment-idstringFormbricks Environment ID.
api-hoststringURL of the hosted Formbricks instance.

​
Validate your setup

Once you’ve completed the steps above, validate your setup by checking the Setup Checklist in the Settings. The widget status indicator should change from this:

To this:

​
Debugging Formbricks Integration

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.

Was this page helpful?

QuickstartActions