Formbricks Docs | Quickstart | Open-Source Survey Software

Welcome to Formbricks! In this quickstart guide, we'll walk you through the initial steps to get up and running with our in-product micro-surveys. Choose between self-hosted and cloud options, create an account, and set up the JavaScript widget. Let's dive in!

Step 1: Choose between self-hosted and cloud

First, you need to decide whether you want to use the self-hosted or cloud version of Formbricks.

Self-hosted: If you prefer to host Formbricks on your own servers, check out the dedicated Self-hosted Documentation page.
Cloud: For a hassle-free experience, choose our cloud offering, which takes care of server maintenance and updates for you. Sign Up now.

Step 2: Create an account

Visit the Formbricks Sign up page.
Enter your email address, choose a password, and click Sign Up to create your account. Alternatively you can sign up using your GitHub account.

Step 3: Switch to the Development Environment

In Formbricks, you can work in different environments to manage your surveys and settings. We recommend using the Development environment for your local testing and staging environments to keep your Production environment and it's data clean. To get started, switch to the Development Environment:

Log in to your Formbricks dashboard.
Click the your profile picture in the top right corner and in the dropdown under your current Environment select Development.
Select Development from the list.

Step 4: Set up the JavaScript widget

You can find all the setup instructions as well as a check if your installation was successful in the Setup Checklist in the Formbricks settings.

HTML

Add the following script to the <head> tag of your HTML file:

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

Replace your-environment-id with your actual environment ID. You can find your environment ID in the Setup Checklist in the Formbricks settings.

Npm

Install the Formbricks package using npm:

npm install -s @formbricks/js

Import Formbricks and initialize the widget in your main component (e.g., App.tsx or App.js):

import formbricks from "@formbricks/js";

if (typeof window !== "undefined") {
  formbricks.init({
    environmentId: "your-environment-id",
    apiHost: "https://app.formbricks.com",
  });
}

Replace your-environment-id with your actual environment ID. You can find your environment ID in the Setup Checklist in the Formbricks settings.

For more detailed guides for different frameworks, check out our Next.js and Vue.js guides.

Step 5: Verify your setup

After setting up the widget, head back to the Formbricks dashboard:

Navigate to Settings in the top menubar.
Check the Setup Checklist to ensure everything is working correctly.

If you see confetti and a green box saying "Receiving data" you've successfully set up Formbricks. You're ready to start creating and customizing your in-product surveys.