Framework Guides

One can integrate Formbricks into their app using multiple options! Checkout the options below that we provide! If you are looking for something else, please join our Discord! and we would be glad to help.


Prerequisites

Before getting started, make sure you have:

  1. A web application in your desired framework is set up and running.
  2. A Formbricks account with access to your environment ID and API host. You can find these in the Setup Checklist in the Settings:
Step 2 - Setup Checklist

HTML

All you need to do is copy a <script> tag to your HTML head, and that’s about it!

HTML

<!-- START Formbricks Surveys -->
<script type="text/javascript">
!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.5.1/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
</script>
<!-- END Formbricks Surveys -->

Required Customizations to be Made

  • Name
    environment-id
    Type
    string
    Description

    Formbricks Environment ID.

  • Name
    api-host
    Type
    string
    Description

    URL of the hosted Formbricks instance.

Refer to our Example HTML project for more help! Now visit the Validate your Setup section to verify your setup!


ReactJS

Install the Formbricks SDK using one of the package managers ie npm,pnpm,yarn.

Install Formbricks JS library

npm install --save @formbricks/js

Now, update your App.js/ts file to initialise Formbricks.

src/App.js

// other imports
import formbricks from "@formbricks/js";

if (typeof window !== "undefined") {
  formbricks.init({
    environmentId: "<environment-id>",
    apiHost: "<api-host>",
    debug: true, // remove when in production
  });
}

function App() {
  // your own app
}

export default App;

Required Customizations to be Made

  • Name
    environment-id
    Type
    string
    Description

    Formbricks Environment ID.

  • Name
    api-host
    Type
    string
    Description

    URL of the hosted Formbricks instance.

What are we doing here?

The app initializes 'formbricks' when it's loaded in a browser environment (due to the typeof window !== "undefined" check) and then renders your components or content.

In app survey in React app for micro surveys

Refer to our Example ReactJs project for more help! Now visit the Validate your Setup section to verify your setup!


NextJS

NextJs projects typically follow two main conventions: the App Directory and the Pages Directory. To ensure smooth integration with the Formbricks SDK, which operates solely on the client side, follow the guidelines for each convention below:

  • App directory: You will have to define a new component in app/formbricks.tsx file and call it in your app/layout.tsx file.
  • Pages directory: You will have to visit your _app.tsx and just initialise Formbricks there.

Code snippets for the integration for both conventions are provided to further assist you.

Install Formbricks JS library

npm install --save @formbricks/js

App Directory

app/formbricks.tsx

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

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

useEffect(() => {
formbricks.init({
environmentId: "<environment-id>",
apiHost: "<api-host>",
debug: true, // remove when in production
});
}, []);

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>
  );
}

Refer to our Example NextJS App Directory project for more help!

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>",
    debug: true, // remove when in production
  });
}

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} />;
}

Refer to our Example NextJS Pages Directory project for more help!

Required Customizations to be Made

  • Name
    environment-id
    Type
    string
    Description

    Formbricks Environment ID.

  • Name
    api-host
    Type
    string
    Description

    URL of the hosted Formbricks instance.

Optional Customizations to be Made

  • Name
    debug
    Type
    boolean
    Description

    Whether you want to see debug messages from Formbricks on your client-side console.

What are we doing here?

First we need to initialize the Formbricks SDK, making sure it only runs on the client side. To connect the Next.js router to Formbricks and ensure the SDK can keep track of every page change, we are registering the route change event.

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


VueJs

Integrating the Formbricks SDK with Vue.js is a straightforward process. We will make sure the SDK is only loaded and used on the client side, as it's not intended for server-side usage.

Install Formbricks JS library

npm install --save @formbricks/js

src/formbricks.js

import formbricks from "@formbricks/js";

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

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 to be Made

  • Name
    environment-id
    Type
    string
    Description

    Formbricks Environment ID.

  • Name
    api-host
    Type
    string
    Description

    URL of the hosted Formbricks instance.

Optional Customizations to be Made

  • Name
    debug
    Type
    boolean
    Description

    Whether you want to see debug messages from Formbricks on your client-side console.

Refer to our Example VueJs project for more help! Now visit the Validate your Setup section to verify your setup!

Validate your setup

Once you have completed the steps above, you can validate your setup by checking the Setup Checklist in the Settings. Your widget status indicator should go from this:

Widget isnt connected

To this:

Widget is connected

Debugging Formbricks Integration

Enabling Formbricks debug mode in your browser is a useful troubleshooting step for identifying and resolving complex issues. This section outlines how to activate debug mode, covers common use cases, and provides insights into specific debug log messages.

Activate Debug Mode

To activate Formbricks debug mode:

  1. In Your Integration Code:

    • Locate the initialization code for Formbricks in your application (HTML, ReactJS, NextJS, VueJS).
    • Set the debug option to true when initializing Formbricks.
  2. View Debug Logs:

    • Open your browser's developer tools by pressing F12 or right-clicking and selecting "Inspect."

    • Navigate to the "Console" tab to view Formbricks debugging information.

      How to Open Browser Console:

      • Google Chrome: Press F12 or right-click, select "Inspect," and go to the "Console" tab.
      • Firefox: Press F12 or right-click, select "Inspect Element," and go to the "Console" tab.
      • Safari: Press Option + Command + C to open the developer tools and navigate to the "Console" tab.
      • Edge: Press F12 or right-click, select "Inspect Element," and go to the "Console" tab.
  3. Via URL Parameter:

    • For quick activation, add ?formbricksDebug=true to your application's URL.

    This parameter will enable debugging for the current session.

Common Use Cases

Debug mode is beneficial for scenarios such as:

  • Verifying Formbricks functionality.
  • Identifying integration issues.
  • Troubleshooting unexpected behavior.

Debug Log Messages

Specific debug log messages may provide insights into:

  • API calls and responses.
  • Event tracking and form interactions.
  • Integration errors.

Note: Disable debugging in production to prevent unnecessary logs and improve performance.

Overwrite CSS Styles for In-App Surveys

You can overwrite the default CSS styles for the in-app surveys by adding the following CSS to your global CSS file (eg. globals.css):

Make sure that you do not change the CSS variable names as they are used by Formbricks to identify the CSS variables. You can change the values to your liking. We have filled in some sample values for you to change according to your desired appearance.

Overwrite Formbricks CSS

/* Formbricks CSS */
--fb-brand-color: red;
--fb-brand-text-color: white;
--fb-border-color: green;
--fb-border-color-highlight: rgb(13, 13, 12);
--fb-focus-color: red;
--fb-heading-color: yellow;
--fb-subheading-color: green;
--fb-info-text-color: orange;
--fb-signature-text-color: blue;
--fb-survey-background-color: black;
--fb-accent-background-color: rgb(13, 13, 12);
--fb-accent-background-color-selected: red;
--fb-placeholder-color: white;
--fb-shadow-color: var(--fb-brand-color);
--fb-rating-fill: rgb(13, 13, 12);
--fb-rating-hover: green;
--fb-back-btn-border: blue;
--fb-submit-btn-border: transparent;
--fb-rating-selected: black;

We have an example of this in our Demo project here.

Can’t figure it out? Join our Discord!


Was this page helpful?