Website Surveys

Website surveys are embedded directly on your website using the Formbricks JavaScript SDK. They can be triggered by user actions, page views, or custom events without requiring page navigation.

How Website Surveys Work

Website surveys use the @formbricks/js-core package to:

Initialize connection to your Formbricks environment
Track user actions and page views
Display surveys based on triggers and conditions
Submit responses without page reload

// Website surveys require type: "app"
interface TSurvey {
  type: "app" | "link";
  displayOption: "displayOnce" | "displayMultiple" | "respondMultiple" | "displaySome";
  triggers: Array<{ actionClass: TActionClass }>;
}

Installation

Install the SDK

npm install @formbricks/js-core

Initialize Formbricks

Add the initialization code to your app’s entry point:

import formbricks from "@formbricks/js-core";

formbricks.setup({
  environmentId: "your-environment-id",
  appUrl: "https://your-formbricks-instance.com"
});

Create an app survey

In Formbricks, create a new survey and ensure the type is set to App.

Configure triggers

Set up when and how the survey should appear (see Triggers section below).

Framework Integration

HTML / JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome</h1>
  
  <script type="module">
    import formbricks from "https://unpkg.com/@formbricks/js-core@latest";
    
    formbricks.setup({
      environmentId: "your-environment-id",
      appUrl: "https://your-formbricks-instance.com"
    });
  </script>
</body>
</html>

React

import { useEffect } from 'react';
import formbricks from '@formbricks/js-core';

function App() {
  useEffect(() => {
    formbricks.setup({
      environmentId: process.env.REACT_APP_FORMBRICKS_ENV_ID,
      appUrl: process.env.REACT_APP_FORMBRICKS_URL
    });
  }, []);
  
  return (
    <div className="App">
      <h1>My App</h1>
    </div>
  );
}

export default App;

Next.js

import { FormbricksProvider } from '@/components/formbricks-provider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <FormbricksProvider>
          {children}
        </FormbricksProvider>
      </body>
    </html>
  );
}

Vue.js

<template>
  <div id="app">
    <h1>My Vue App</h1>
  </div>
</template>

<script>
import formbricks from '@formbricks/js-core';

export default {
  name: 'App',
  mounted() {
    formbricks.setup({
      environmentId: import.meta.env.VITE_FORMBRICKS_ENV_ID,
      appUrl: import.meta.env.VITE_FORMBRICKS_URL
    });
  }
}
</script>

Survey Triggers

Website surveys can be triggered by various user actions:

No-Code Triggers

Configure these triggers directly in the Formbricks UI without writing code.

Page View
Click
Exit Intent
50% Scroll

Trigger surveys when users visit specific pages.

{
  type: "noCode",
  noCodeConfig: {
    type: "pageView",
    urlMatch: "contains",
    url: "/pricing"
  }
}

URL match options:

exactMatch - Exact URL match
contains - URL contains string
startsWith - URL starts with string
endsWith - URL ends with string
notMatch - URL doesn’t match
notContains - URL doesn’t contain string

Trigger when users click specific elements.

{
  type: "noCode",
  noCodeConfig: {
    type: "click",
    elementSelector: ".cta-button"
  }
}

Supports CSS selectors like:

.class-name
#element-id
button[data-action="signup"]

Show surveys when users are about to leave.

{
  type: "noCode",
  noCodeConfig: {
    type: "exitIntent"
  }
}

Detects when mouse moves toward browser close button.

Trigger after users scroll halfway down the page.

{
  type: "noCode",
  noCodeConfig: {
    type: "fiftyPercentScroll"
  }
}

Code Triggers

Trigger surveys programmatically from your application code.

// Track custom action
await formbricks.track("completed-checkout");

// Track with properties (hidden fields)
await formbricks.track("completed-checkout", {
  orderValue: "299",
  productCategory: "electronics"
});

Create matching action in Formbricks UI with identifier completed-checkout.

Display Options

Control how often surveys appear to users:

type TSurveyDisplayOption = 
  | "displayOnce"      // Show once per user
  | "displayMultiple"  // Show until submitted
  | "respondMultiple"  // Show every time conditions match
  | "displaySome";     // Show N times

Display Once

Show survey only once per user, whether they respond or not.

const survey = {
  displayOption: "displayOnce"
};

Display Multiple

Keep showing until user submits a response.

const survey = {
  displayOption: "displayMultiple"
};

Display Some

Show survey a specific number of times.

const survey = {
  displayOption: "displaySome",
  displayLimit: 3 // Show max 3 times
};

Respond Multiple

Allow users to respond multiple times.

const survey = {
  displayOption: "respondMultiple"
};

Display Criteria

Recontact Days

Set minimum time between survey displays:

const survey = {
  recontactDays: 7 // Wait 7 days before showing again
};

Display Percentage

Show surveys to a percentage of qualifying users:

const survey = {
  displayPercentage: 50 // Show to 50% of users
};

Audience Targeting

Target specific user segments:

const survey = {
  segment: {
    filters: [
      {
        connector: "and",
        resource: { type: "attribute", id: "plan" },
        qualifier: { operator: "equals" },
        value: "pro"
      }
    ]
  }
};

User Identification

Identify users to track responses and enable advanced targeting:

// Set user ID
await formbricks.setUserId("user_12345");

// Set user email
await formbricks.setEmail("user@example.com");

// Set custom attributes
await formbricks.setAttributes({
  plan: "pro",
  role: "admin",
  company: "Acme Inc"
});

User data is stored locally and synced with your Formbricks instance for targeting and response tracking.

Page Change Tracking

For single-page applications, manually register route changes:

// React Router
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import formbricks from '@formbricks/js-core';

function RouteChangeTracker() {
  const location = useLocation();
  
  useEffect(() => {
    formbricks.registerRouteChange();
  }, [location]);
  
  return null;
}

// Next.js App Router
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';
import formbricks from '@formbricks/js-core';

export function RouteTracker() {
  const pathname = usePathname();
  
  useEffect(() => {
    formbricks.registerRouteChange();
  }, [pathname]);
  
  return null;
}

Survey Display Modes

Website surveys support two display modes: Survey appears as an overlay modal:

const survey = {
  styling: {
    placement: "center",      // center, bottomRight, topRight
    overlay: true,            // Show backdrop
    clickOutside: false       // Close on backdrop click
  }
};

Inline

Embed survey directly in page content:

<div id="formbricks-survey-container"></div>

<script>
  // Survey automatically renders in container when triggered
</script>

Styling Customization

Customize survey appearance to match your brand:

const survey = {
  styling: {
    brandColor: "#00C4B8",
    questionColor: "#000000",
    inputColor: "#ffffff",
    inputBorderColor: "#e5e7eb",
    cardBackgroundColor: "#ffffff",
    highlightBorderColor: "#00C4B8",
    roundness: 8,
    cardBorderColor: "#e5e7eb"
  }
};

Test styling changes in the survey editor preview before publishing.

Best Practices

Initialize early

Call formbricks.setup() as early as possible in your app lifecycle to ensure surveys can trigger on first page load.

Use meaningful action names

Choose descriptive action identifiers like viewed-pricing-page instead of generic names like action1.

Test thoroughly

Use your development environment to test trigger conditions before deploying to production.

Respect user experience

Set appropriate recontactDays to avoid survey fatigue. 7-14 days is recommended for most use cases.

Monitor performance

The SDK is lightweight (~15KB gzipped) but test performance impact on your site.

Troubleshooting

Survey not appearing

Check browser console for errors
Verify environmentId and appUrl are correct
Ensure survey type is set to App
Confirm trigger conditions are met
Check if user has already seen survey (displayOption)
Verify survey status is inProgress

Actions not tracking

Verify action code matches exactly (case-sensitive)
Check network tab for failed API calls
Ensure formbricks.setup() completed before tracking

Styling not applying

Clear browser cache
Check for CSS conflicts with your site styles
Verify styling object structure matches schema

App Surveys

Implement surveys in mobile apps

JavaScript SDK

Complete SDK reference

Conditional Logic

Create dynamic survey flows

Custom Styling

Advanced styling options

Survey Types

Question Types

Features

How Website Surveys Work

Installation

Framework Integration

HTML / JavaScript

React

Next.js

Vue.js

Survey Triggers

No-Code Triggers

Code Triggers

Display Options

Display Once

Display Multiple

Display Some

Respond Multiple

Display Criteria

Recontact Days

Display Percentage

Audience Targeting

User Identification

Page Change Tracking

Survey Display Modes

Inline

Styling Customization

Best Practices

Troubleshooting

App Surveys

JavaScript SDK

Conditional Logic

Custom Styling

Survey Types

Question Types

Features

Documentation Index

​How Website Surveys Work

​Installation

​Framework Integration

​HTML / JavaScript

​React

​Next.js

​Vue.js

​Survey Triggers

​No-Code Triggers

​Code Triggers

​Display Options

​Display Once

​Display Multiple

​Display Some

​Respond Multiple

​Display Criteria

​Recontact Days

​Display Percentage

​Audience Targeting

​User Identification

​Page Change Tracking

​Survey Display Modes

​Modal (Default)

​Inline

​Styling Customization

​Best Practices

​Troubleshooting

​Related Resources

App Surveys

JavaScript SDK

Conditional Logic

Custom Styling

How Website Surveys Work

Installation

Framework Integration

HTML / JavaScript

React

Next.js

Vue.js

Survey Triggers

No-Code Triggers

Code Triggers

Display Options

Display Once

Display Multiple

Display Some

Respond Multiple

Display Criteria

Recontact Days

Display Percentage

Audience Targeting

User Identification

Page Change Tracking

Survey Display Modes

Modal (Default)

Inline

Styling Customization

Best Practices

Troubleshooting

Related Resources