fix: github action

.env.example

@@ -88,7 +88,7 @@ PASSWORD_RESET_DISABLED=1
 # Email login. Disable the ability for users to login with email.
 # EMAIL_AUTH_DISABLED=1
 
-# Organization Invite. Disable the ability for invited users to create an account.
+# Team Invite. Disable the ability for invited users to create an account.
 # INVITE_DISABLED=1
 
 ##########
@@ -154,11 +154,11 @@ SLACK_CLIENT_SECRET=
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=
 
-# Automatically assign new users to a specific organization and role within that organization
+# Automatically assign new users to a specific team and role within that team
-# Insert an existing organization id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
+# Insert an existing team id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
 # (Role Management is an Enterprise feature)
-# DEFAULT_ORGANIZATION_ID=
+# DEFAULT_TEAM_ID=
-# DEFAULT_ORGANIZATION_ROLE=admin
+# DEFAULT_TEAM_ROLE=admin
 
 # set to 1 to skip onboarding for new users
 # ONBOARDING_DISABLED=1

.github/actions/cache-build-web/action.yml

@@ -16,6 +16,9 @@ runs:
 
     - uses: ./.github/actions/dangerous-git-checkout
 
+    - run: echo "E2E Testing Mode is ${{ inputs.e2e_testing_mode }}"
+      shell: bash
+
     - name: Cache Build
       uses: actions/cache@v3
       id: cache-build

.github/workflows/build-formbricks-com.yml

@@ -0,0 +1,26 @@
+name: Build formbricks-com
+on:
+  workflow_call:
+jobs:
+  build:
+    name: Build Formbricks-com
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+
+      - name: Build Formbricks-com
+        run: pnpm build --filter=formbricks-com...

.github/workflows/e2e.yml

@@ -2,6 +2,9 @@ name: E2E Tests
 on:
   workflow_call:
   workflow_dispatch:
+  push:
+    branches:
+      - action-test
 jobs:
   build:
     name: Run E2E Tests

.github/workflows/kamal-deploy.yml

@@ -56,7 +56,7 @@ jobs:
       GOOGLE_SHEETS_REDIRECT_URL: ${{ secrets.GOOGLE_SHEETS_REDIRECT_URL }}
       AIRTABLE_CLIENT_ID: ${{ secrets.AIRTABLE_CLIENT_ID }}
       ENTERPRISE_LICENSE_KEY: ${{ secrets.ENTERPRISE_LICENSE_KEY }}
-      DEFAULT_ORGANIZATION_ID: ${{ vars.DEFAULT_ORGANIZATION_ID }}
+      DEFAULT_TEAM_ID: ${{ vars.DEFAULT_TEAM_ID }}
       ONBOARDING_DISABLED: ${{ vars.ONBOARDING_DISABLED }}
       CUSTOMER_IO_API_KEY: ${{ secrets.CUSTOMER_IO_API_KEY }}
       CUSTOMER_IO_SITE_ID: ${{ secrets.CUSTOMER_IO_SITE_ID }}

.github/workflows/kamal-setup.yml

@@ -53,7 +53,7 @@ jobs:
       GOOGLE_SHEETS_REDIRECT_URL: ${{ secrets.GOOGLE_SHEETS_REDIRECT_URL }}
       AIRTABLE_CLIENT_ID: ${{ secrets.AIRTABLE_CLIENT_ID }}
       ENTERPRISE_LICENSE_KEY: ${{ secrets.ENTERPRISE_LICENSE_KEY }}
-      DEFAULT_ORGANIZATION_ID: ${{ vars.DEFAULT_ORGANIZATION_ID }}
+      DEFAULT_TEAM_ID: ${{ vars.DEFAULT_TEAM_ID }}
       ONBOARDING_DISABLED: ${{ vars.ONBOARDING_DISABLED }}
       CUSTOMER_IO_API_KEY: ${{ secrets.CUSTOMER_IO_API_KEY }}
       CUSTOMER_IO_SITE_ID: ${{ secrets.CUSTOMER_IO_SITE_ID }}

.github/workflows/release-docker-github-data-migration.yml

@@ -33,7 +33,9 @@ jobs:
 
       - name: Install cosign
         if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@v3.5.0
+        uses: sigstore/cosign-installer@6e04d228eb30da1757ee4e1dd75a0ec73a653e06 #v3.1.1
+        with:
+          cosign-release: "v2.1.1"
 
       - name: Log in to GitHub Container Registry
         uses: docker/login-action@v3

.github/workflows/release-docker-github.yml

@@ -1,4 +1,4 @@
-name: Docker Release to Github
+name: Docker
 
 # This workflow uses actions that are not certified by GitHub.
 # They are provided by a third-party and are governed by
@@ -41,7 +41,9 @@ jobs:
       # https://github.com/sigstore/cosign-installer
       - name: Install cosign
         if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@v3.5.0
+        uses: sigstore/cosign-installer@6e04d228eb30da1757ee4e1dd75a0ec73a653e06 #v3.1.1
+        with:
+          cosign-release: "v2.1.1"
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action

README.md

@@ -82,7 +82,7 @@ Formbricks is both a free and open source survey platform - and a privacy-first
 
 - 🔗 Create shareable **link surveys**.
 
-- 👨‍👩‍👦 Invite your organization members to **collaborate** on your surveys.
+- 👨‍👩‍👦 Invite your team members to **collaborate** on your surveys.
 
 - 🔌 Integrate Formbricks with **Slack, Notion, Zapier, n8n and more**.
 
@@ -224,7 +224,7 @@ Additional to the AGPL licensed Formbricks core, this repository contains code l
 
 ### White-Labeling Formbricks and Other Licensing Needs
 
-We currently do not offer Formbricks white-labeled. Any other needs? [Send us an email](mailto:hola@formbricks.com).
+If you have other licensing requirements such as White-Labeling please [send us an email](mailto:hola@formbricks.com).
 
 ### Why charge for Enterprise Features?
 

apps/demo/components/LayoutApp.tsx

@@ -1,6 +1,6 @@
-import { Sidebar } from "./Sidebar";
+import Sidebar from "./Sidebar";
 
-export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
+export default function LayoutApp({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-full">
       {/* Static sidebar for desktop */}
@@ -10,4 +10,4 @@ export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
       <div className="flex flex-1 flex-col lg:pl-64">{children}</div>
     </div>
   );
-};
+}

apps/demo/components/Sidebar.tsx

@@ -26,7 +26,7 @@ const secondaryNavigation = [
   { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];
 
-export const Sidebar = () => {
+export default function Sidebar({}) {
   return (
     <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
       <nav
@@ -63,4 +63,4 @@ export const Sidebar = () => {
       </nav>
     </div>
   );
-};
+}

apps/demo/components/SurveySwitch.tsx

@@ -1,3 +1,5 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
+
 interface SurveySwitchProps {
   value: "website" | "app";
   formbricks: any;
@@ -5,18 +7,19 @@ interface SurveySwitchProps {
 
 export const SurveySwitch = ({ value, formbricks }: SurveySwitchProps) => {
   return (
-    <select
+    <Select
       value={value}
-      onChange={(v) => {
+      onValueChange={(v) => {
         formbricks.logout();
-        window.location.href = `/${v.target.value}`;
+        window.location.href = `/${v}`;
       }}>
-      <option value="website" className="h-10 px-4 hover:bg-slate-100">
+      <SelectTrigger className="w-[180px]">
-        Website Surveys
+        <SelectValue placeholder="Theme" />
-      </option>
+      </SelectTrigger>
-      <option value="app" className="hover:bg-slate-10 h-10 px-4">
+      <SelectContent>
-        App Surveys
+        <SelectItem value="website">Website Surveys</SelectItem>
-      </option>
+        <SelectItem value="app">App Surveys</SelectItem>
-    </select>
+      </SelectContent>
+    </Select>
   );
 };

apps/demo/lib/utils.ts

@@ -1,3 +1,3 @@
-export const classNames = (...classes: any) => {
+export function classNames(...classes: any) {
   return classes.filter(Boolean).join(" ");
-};
+}

apps/demo/next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  transpilePackages: ["@formbricks/ui"],
   async redirects() {
     return [
       {
@@ -24,4 +25,4 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+module.exports = nextConfig;

apps/demo/package.json

@@ -13,10 +13,10 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@formbricks/ui": "workspace:*",
-    "lucide-react": "^0.379.0",
+    "lucide-react": "^0.373.0",
     "next": "14.2.3",
-    "react": "18.3.1",
+    "react": "18.2.0",
-    "react-dom": "18.3.1"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "eslint-config-formbricks": "workspace:*",

apps/demo/pages/_app.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 
 import "../styles/globals.css";
 
-const App = ({ Component, pageProps }: AppProps) => {
+export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
@@ -18,6 +18,4 @@ const App = ({ Component, pageProps }: AppProps) => {
       <Component {...pageProps} />
     </>
   );
-};
+}
-
-export default App;

apps/demo/pages/_document.tsx

@@ -1,6 +1,6 @@
 import { Head, Html, Main, NextScript } from "next/document";
 
-const Document = () => {
+export default function Document() {
   return (
     <Html lang="en" className="h-full bg-slate-50">
       <Head />
@@ -10,6 +10,4 @@ const Document = () => {
       </body>
     </Html>
   );
-};
+}
-
-export default Document;

apps/demo/pages/app/index.tsx

@@ -9,7 +9,7 @@ import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
-const AppPage = ({}) => {
+export default function AppPage({}) {
   const [darkMode, setDarkMode] = useState(false);
   const router = useRouter();
 
@@ -36,11 +36,7 @@ const AppPage = ({}) => {
 
     if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
       const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
-      const userInitAttributes = {
+      const userInitAttributes = { language: "de", "Init Attribute 1": "eight", "Init Attribute 2": "two" };
-        language: "de",
-        "Init Attribute 1": "eight",
-        "Init Attribute 2": "two",
-      };
 
       formbricks.init({
         environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
@@ -119,7 +115,7 @@ const AppPage = ({}) => {
         </div>
 
         <div className="md:grid md:grid-cols-3">
-          <div className="col-span-3 self-start rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-800">
+          <div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-800">
             <h3 className="text-lg font-semibold dark:text-white">
               Reset person / pull data from Formbricks app
             </h3>
@@ -140,6 +136,26 @@ const AppPage = ({}) => {
             </p>
           </div>
 
+          <div className="p-6">
+            <div>
+              <button
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
+                onClick={() => {
+                  formbricks.track("Code Action");
+                }}>
+                Code Action
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sends a{" "}
+                <a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
+                  Code Action
+                </a>{" "}
+                to the Formbricks API called &apos;Code Action&apos;. You will find it in the Actions Tab.
+              </p>
+            </div>
+          </div>
           <div className="p-6">
             <div>
               <button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-slate-700 dark:hover:bg-slate-600">
@@ -238,6 +254,4 @@ const AppPage = ({}) => {
       </div>
     </div>
   );
-};
+}
-
-export default AppPage;

apps/demo/pages/website/index.tsx

@@ -9,7 +9,7 @@ import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
-const AppPage = ({}) => {
+export default function AppPage({}) {
   const [darkMode, setDarkMode] = useState(false);
   const router = useRouter();
 
@@ -115,7 +115,7 @@ const AppPage = ({}) => {
         </div>
 
         <div className="md:grid md:grid-cols-3">
-          <div className="col-span-3 self-start rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-800">
+          <div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-800">
             <h3 className="text-lg font-semibold dark:text-white">
               Reset person / pull data from Formbricks app
             </h3>
@@ -135,10 +135,62 @@ const AppPage = ({}) => {
               try again.
             </p>
           </div>
+
+          <div className="pt-6">
+            <div>
+              <button
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
+                onClick={() => {
+                  formbricks.track("New Session");
+                }}>
+                Track New Session
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sends an Action to the Formbricks API called &apos;New Session&apos;. You will
+                find it in the Actions Tab.
+              </p>
+            </div>
+          </div>
+
+          <div className="pt-6">
+            <div>
+              <button
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
+                onClick={() => {
+                  formbricks.track("Exit Intent");
+                }}>
+                Track Exit Intent
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sends an Action to the Formbricks API called &apos;Exit Intent&apos;. You can also
+                move your mouse to the top of the browser to trigger the exit intent.
+              </p>
+            </div>
+          </div>
+
+          <div className="pt-6">
+            <div>
+              <button
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
+                onClick={() => {
+                  formbricks.track("50% Scroll");
+                }}>
+                Track 50% Scroll
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sends an Action to the Formbricks API called &apos;50% Scroll&apos;. You can also
+                scroll down to trigger the 50% scroll.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   );
-};
+}
-
-export default AppPage;

apps/docs/.gitignore

@@ -35,4 +35,3 @@ yarn-error.log*
 next-env.d.ts
 
 public/sitemap*.xml
-public/robots.txt

apps/docs/app/app-surveys/actions/page.mdx

@@ -1,12 +1,12 @@
 import { MdxImage } from "@/components/MdxImage";
 
-import I1 from "./images/I1.webp";
+import I1 from "./images/I1.png";
-import I2 from "./images/I2.webp";
+import I2 from "./images/I2.png";
 
 export const metadata = {
   title: "Using Actions in Formbricks | Fine-tuning User Moments",
   description:
-    "Dive deep into how actions in Formbricks help products and organizations to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",
+    "Dive deep into how actions in Formbricks help products and teams to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",
 };
 
 #### App Surveys
@@ -22,7 +22,7 @@ Understanding user thoughts and feelings at critical moments in their journey is
 
 ## **How Do Actions Work?**
 
-Actions in Formbricks App Surveys are deeply integrated with user activities within your app. When a user performs a specified action, the Formbricks widget detects this activity and can present a survey to that specific user if the trigger conditions match of that survey, while also recording the event. This capability ensures that surveys are not only triggered at the right time but are also tailored to the user’s recent interactions within the app. You can set up these actions through a user-friendly No-Code interface within the Formbricks dashboard.
+Actions in Formbricks App Surveys are deeply integrated with user activities within your app. When a user performs a specified action, the Formbricks widget detects this activity and can present a survey to that specific user if the trigger conditions match of that survey, while also recording the event. This capability ensures that surveys are not only triggered at the right time but are also tailored to the user’s recent interactions within the app. You can set up these actions either programmatically in your code or through a user-friendly No-Code interface within the Formbricks dashboard.
 
 ## **Why Are Actions Useful?**
 
@@ -33,6 +33,13 @@ Actions are invaluable for enhancing survey relevance and effectiveness:
 - **User Segments**: Analyze action data to create detailed user segments, targeting specific groups with surveys that are pertinent to their behaviors or interactions within the app.
 - **User Targeting**: Precise targeting based on user actions and attributes ensures that surveys are shown only to users who meet certain criteria, enhancing the relevance and effectiveness of each survey.
 
+<Note>
+  You now have the option to create survey-specific action classes directly within the survey editor. These
+  actions are exclusive to the individual survey and won't appear in the global action list, helping to keep
+  it uncluttered. For actions that are needed across multiple surveys, we recommend creating them from the
+  Actions tab.
+</Note>
+
 ## **Setting Up No-Code Actions**
 
 Formbricks offers an intuitive No-Code interface that allows you to configure actions without needing to write any code.

apps/docs/app/app-surveys/advanced-targeting/page.mdx

@@ -1,5 +1,4 @@
 import { MdxImage } from "@/components/MdxImage";
-import { ResponsiveVideo } from "@/components/ResponsiveVideo";
 
 import GermansGpt from "./germans-gpt.webp";
 import Hni from "./hni.webp";
@@ -19,9 +18,13 @@ export const metadata = {
 
 Advanced Targeting allows you to show surveys to the right group of people. You can target surveys based on user attributes, user events, and more instead of spraying and praying. This helps you get more relevant feedback and make data-driven decisions. All of this without writing a single line of code.
 
-<ResponsiveVideo title="Formbricks Multi-language Surveys"
+<iframe
- src="https://www.youtube-nocookie.com/embed/0BQp6N4cXzU?si=KeBM7G7Ch1xtrsOm&amp;controls=0" />
+  width="700"
-
+  height="450"
+  src="https://www.youtube.com/embed/0BQp6N4cXzU?si=gyeEZRXZ6Kei1zzm"
+  title="YouTube video player: Formbricks"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
 
 ## How to setup Advanced Targeting
 

apps/docs/app/app-surveys/framework-guides/components/Libraries.tsx

@@ -33,7 +33,7 @@ const libraries = [
   },
 ];
 
-export const Libraries = () => {
+export function Libraries() {
   return (
     <div className="my-16 xl:max-w-none">
       <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-slate-900/5 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3 dark:border-white/5">
@@ -57,4 +57,4 @@ export const Libraries = () => {
       </div>
     </div>
   );
-};
+}

apps/docs/app/app-surveys/framework-guides/page.mdx

@@ -2,6 +2,7 @@ import { MdxImage } from "@/components/MdxImage";
 
 import { Libraries } from "./components/Libraries";
 
+import SetupChecklist from "./images/env-id.png";
 import ReactApp from "./images/react-in-app-survey-app-popup-form.webp";
 import WidgetConnected from "./images/widget-connected.webp";
 import WidgetNotConnected from "./images/widget-not-connected.webp";
@@ -26,7 +27,14 @@ for something else, please [join our Discord!](https://formbricks.com/discord) a
 Before getting started, make sure you have:
 
 1. A web application (behind your user authentication system) 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.
+2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings:
+
+<MdxImage
+  src={SetupChecklist}
+  alt="Step 2 - Setup Checklist"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
 
 ---
 

apps/docs/app/app-surveys/quickstart/page.mdx

@@ -1,13 +1,14 @@
 import { MdxImage } from "@/components/MdxImage";
 
-import I1 from "./images/I1.webp";
+import I1 from "./images/I1.png";
-import I2 from "./images/I2.webp";
+import I2 from "./images/I2.png";
-import I3 from "./images/I3.webp";
+import I3 from "./images/I3.png";
-import I4 from "./images/I4.webp";
+import I4 from "./images/I4.png";
-import I5 from "./images/I5.webp";
+import I5 from "./images/I5.png";
-import I6 from "./images/I6.webp";
+import I6 from "./images/I6.png";
-import I7 from "./images/I7.webp";
+import I7 from "./images/I7.png";
-import I8 from "./images/I8.webp";
+import I8 from "./images/I8.png";
+
 
 export const metadata = {
   title: "Formbricks Quickstart Guide: App Surveys Made Easier & Faster",
@@ -16,21 +17,18 @@ export const metadata = {
 };
 
 #### App Surveys
-
 # Quickstart
 
 App surveys have 6-10x better conversion rates than emailed out surveys. This tutorial explains how to run an app survey in your web app in 10 to 15 minutes. Let’s go!
 
 <Note>
-  App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run
+App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run surveys on your public facing website, head over to the [Website Surveys Quickstart Guide](/website-surveys/quickstart).
-  surveys on your public facing website, head over to the [Website Surveys Quickstart
-  Guide](/website-surveys/quickstart).
 </Note>
 
 1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and you'll be guided to our onboarding like below:
 
 <Note>
-  Website & App Surveys have the same integration process. The difference will come when we setup our survey.
+Website & App Surveys have the same integration process. The difference will come when we setup our survey.
 </Note>
 
 <MdxImage
@@ -72,41 +70,41 @@ Onboarding is complete! Now let’s create our first survey as you should see te
 Pick the Survey Type as **App Survey**.
 
 <MdxImage
-  src={I5}
+    src={I5}
-  alt="Survey settings for app survey"
+    alt="Survey settings for app survey"
-  quality="100"
+    quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
+    className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-4. **Set Trigger for the Survey**: Scroll down to Survey Trigger and click on **+ Add action**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
+4. **Set Trigger for the Survey**: Scroll down to Survey Trigger and inside **When**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
 
 <MdxImage
-  src={I6}
+    src={I6}
-  alt="Survey trigger settings for app survey"
+    alt="Survey trigger settings for app survey"
-  quality="100"
+    quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
+    className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 5. **Set Recontact Options for debugging**: In Recontact Options we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once to each user to prevent survey fatigue:
 
 <Note>
-  Please change this setting later on after testing your survey to prevent survey fatigue for your users.
+Please change this setting later on after testing your survey to prevent survey fatigue for your users.
 </Note>
 
 <MdxImage
-  src={I7}
+    src={I7}
-  alt="Recontact options for app survey"
+    alt="Recontact options for app survey"
-  quality="100"
+    quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
+    className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 6. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey.
 
 <MdxImage
-  src={I8}
+    src={I8}
-  alt="Survey published successfully"
+    alt="Survey published successfully"
-  quality="100"
+    quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
+    className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 ---

apps/docs/app/app-surveys/user-identification/page.mdx

@@ -80,11 +80,6 @@ formbricks.init({
 
 You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
 
-<Note>
-  Please note that the number of different attribute classes (e.g., "Plan," "First Name," etc.) is currently
-  limited to 150 attributes per environment.
-</Note>
-
 <Col>
 <CodeGroup title="Setting Custom Attributes">
 
@@ -120,4 +115,4 @@ formbricks.logout();
 ```
 
 </CodeGroup>
-</Col>
+</Col>

apps/docs/app/best-practices/cancel-subscription/page.mdx

@@ -41,8 +41,8 @@ To run the Churn Survey in your app you want to proceed as follows:
 4. Prevent that churn!
 
 <Note>
-  ## Formbricks Widget running?
+  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web
-  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
+  app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
   (takes 15mins max.)](/app-surveys/quickstart)
 </Note>
 
@@ -152,7 +152,8 @@ These settings make sure the survey is always displayed, when a user wants to Ca
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Churn Survey
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
+  to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/docs-feedback/page.mdx

@@ -5,9 +5,9 @@ import ChangeId from "./change-id.webp";
 import CopyIds from "./copy-ids.webp";
 import DocsNavi from "./docs-navi.webp";
 import DocsTemplate from "./docs-template.webp";
-import SelectAction from "./select-action.webp";
+import SelectNonevent from "./select-nonevent.webp";
-import SurveyTrigger from "./survey-trigger.webp";
 import SwitchToDev from "./switch-to-dev.webp";
+import WhenToAsk from "./when-to-ask.webp";
 
 export const metadata = {
   title:
@@ -73,10 +73,10 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   choices accordingly. They have to be identical to the frontend we're building in the next step.
 </Note>
 
-6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “Survey Trigger” and create a new Action:
+6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “When to ask” and create a new Action:
 
 <MdxImage
-  src={SurveyTrigger}
+  src={WhenToAsk}
   alt="set up when to ask card"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
@@ -89,7 +89,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 8. Select the Non-Event in the dropdown. Now you see that the “Publish survey” button is active. Publish your survey 🤝
 
 <MdxImage
-  src={SelectAction}
+  src={SelectNonevent}
   alt="select nonevent"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
@@ -135,7 +135,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover"
 
 import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
 
-export const DocsFeedback = () => {
+export default function DocsFeedback() {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const [sharedFeedback, setSharedFeedback] = useState(false);
@@ -199,7 +199,7 @@ export const DocsFeedback = () => {
       )}
     </div>
   );
-};
+}
 ```
 
 </CodeGroup>

apps/docs/app/best-practices/feature-chaser/page.mdx

@@ -1,7 +1,7 @@
 import { MdxImage } from "@/components/MdxImage";
 
 import ActionCSS from "./action-css.webp";
-import ActionText from "./action-innertext.webp";
+import ActionText from "./action-text.webp";
 import ChangeText from "./change-text.webp";
 import CreateSurvey from "./create-survey.webp";
 import Publish from "./publish.webp";
@@ -38,8 +38,8 @@ To run the Feature Chaser survey in your app you want to proceed as follows:
 2. Setup a user action to display survey at the right point in time
 
 <Note>
-  ## Formbricks Widget running?
+  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web
-  We assume that you have already installed the Formbricks Widget in your web wapp. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
+  app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
   (takes 15mins max.)](/app-surveys/quickstart)
 </Note>
 
@@ -123,7 +123,8 @@ Lastly, scroll down to “Recontact Options”. Here you have full freedom to de
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feature Chaser
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
+  to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/feedback-box/page.mdx

@@ -1,13 +1,13 @@
 import { MdxImage } from "@/components/MdxImage";
 import Link from "next/link";
 
-import ActionCSS from "./action-css.webp";
-import ActionText from "./action-innertext.webp";
 import AddAction from "./add-action.webp";
+import AddCSSAction from "./add-css-action.webp";
+import AddHTMLAction from "./add-html-action.webp";
 import ChangeTextContent from "./change-text-content.webp";
 import CreateFeedbackBox from "./create-feedback-box-by-template.webp";
 import PublishSurvey from "./publish-survey.webp";
-import SelectAction from "./select-action.webp";
+import SelectAction from "./select-feedback-button-action.webp";
 import RecontactOptions from "./set-recontact-options.webp";
 
 export const metadata = {
@@ -69,14 +69,20 @@ Go to the “Audience” tab, find the “When to send” card and choose “Add
 
 <MdxImage src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
+<Note>
+  ## You can also add actions in your code You can also create [Code Actions](/actions/code) using
+  `formbricks.track("Eventname")` - they will automatically appear in your Actions overview as long as the SDK
+  is embedded.
+</Note>
+
 We have two options to track the Feedback Button in your application: innerText and CSS-Selector:
 
 1. **innerText:** This means that whenever a user clicks any HTML item in your app which has an `innerText` of `Feedback` the Feedback Box will be displayed.
 2. **CSS-Selector:** This means that when an element with a specific CSS-Selector like `#feedback-button` is clicked, your Feedback Box is triggered.
 
 <div className="grid max-w-full grid-cols-2 space-x-2 sm:max-w-3xl">
-  <MdxImage src={ActionText} alt="Add HTML action" quality="100" className="rounded-lg" />
+  <MdxImage src={AddHTMLAction} alt="Add HTML action" quality="100" className="rounded-lg" />
-  <MdxImage src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
+  <MdxImage src={AddCSSAction} alt="Add CSS action" quality="100" className="rounded-lg" />
 </div>
 
 ### 4. Select action in the “When to ask” card
@@ -112,7 +118,8 @@ Scroll down to “Recontact Options”. Here you have to choose the right settin
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
+  to install the widget.
 </Note>
 
 ### &nbsp;

apps/docs/app/best-practices/improve-trial-cr/page.mdx

@@ -38,8 +38,8 @@ To display the Trial Conversion Survey in your app you want to proceed as follow
 3. Print that 💸
 
 <Note>
-  ## Formbricks Widget running?
+  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web
-  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
+  app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
   (takes 15mins max.)](/app-surveys/quickstart)
 </Note>
 
@@ -132,7 +132,8 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
+  to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/interview-prompt/page.mdx

@@ -43,8 +43,8 @@ To display an Interview Prompt in your app you want to proceed as follows:
 3. That’s it! 🎉
 
 <Note>
-  ## Formbricks Widget running?
+  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web
-  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
+  app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
   (15mins).](/app-surveys/quickstart)
 </Note>
 
@@ -86,9 +86,8 @@ Save, and move over to the “Audience” tab.
 ### 3. Pre-segment your audience (coming soon)
 
 <Note>
-  ## Filter by attribute coming soon.
+  ## Filter by attribute coming soon We're working on pre-segmenting users by attributes. We will update this
-     We're working on pre-segmenting users by attributes. We will update this
+  manual in the next few days.
-     manual in the next few days.
 </Note>
 
 Once you clicked over to the “Audience” tab you can change the settings. In the **Who To Send** card, select “Filter audience by attribute”. This allows you to only show the prompt to a specific segment of your user base.
@@ -103,6 +102,12 @@ To create the trigger to show your Interview Prompt, go to the “Audience” ta
 
 <MdxImage src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
+<Note>
+  ## You can also add actions in your code You can also create [Code Actions](/actions/code) using
+  `formbricks.track("Eventname")` - they will automatically appear in your Actions overview as long as the SDK
+  is embedded.
+</Note>
+
 Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display it on a page visit since you already filter who sees the prompt by attributes.
 
 1. **pageURL:** Whenever a user visits a page the survey will be displayed, as long as the other conditions match. Other conditions are pre-segmentation, if this user has seen a survey in the past 2 weeks, etc.
@@ -116,9 +121,19 @@ Generally, we have two types of user actions: Page views and clicks. The Intervi
 
 2. **innerText & CSS-Selector:** When a user clicks an element (like a button) with a specific text content or CSS selector, the prompt will be displayed as long as the other conditions also match.
 
-<div className="grid max-w-full grid-cols-2 space-x-2 sm:max-w-3xl">
+<div className="flex max-w-full flex-col sm:max-w-3xl lg:gap-1">
-  <MdxImage src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
+  <MdxImage
-  <MdxImage src={ActionInner} alt="Add inner text action" quality="100" className="rounded-lg" />
+    src={ActionCSS}
+    alt="Add CSS action"
+    quality="100"
+    className="max-w-full rounded-lg sm:max-w-3xl"
+  />
+  <MdxImage
+    src={ActionInner}
+    alt="Add inner text action"
+    quality="100"
+    className="max-w-full rounded-lg sm:max-w-3xl"
+  />
 </div>
 
 ### 5. Select action in the “When to ask” card
@@ -146,8 +161,9 @@ Scroll down to “Recontact Options”. Here you have to choose the correct sett
 <MdxImage src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running? 
+  ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
-  You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
+  to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/pmf-survey/page.mdx

@@ -37,8 +37,8 @@ To display the Product-Market Fit survey in your app you want to proceed as foll
 3. Setup the user action to display survey at good point in time
 
 <Note>
-  ## Formbricks Widget running?
+  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web
-  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
+  app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
   (15mins).](/app-surveys/quickstart)
 </Note>
 
@@ -85,7 +85,7 @@ To run this survey properly, you should pre-segment your user base. As touched u
 
 - Check the time passed since sign-up (e.g. signed up 4 weeks ago)
 - User has performed a specific action a certain number of times or (e.g. created 5 reports)
-- User has performed a combination of actions (e.g. created a report **and** invited a organization member)
+- User has performed a combination of actions (e.g. created a report **and** invited a team member)
 
 This way you make sure that you separate potentially misleading opinions from valuable insights.
 
@@ -94,19 +94,18 @@ This way you make sure that you separate potentially misleading opinions from va
 You need a trigger to display the survey but in this case, the filtering does all the work. It’s up to you to decide to display the survey after the user viewed a specific subpage (pageURL) or after clicking an element. Have a look at the [Actions manual](/actions/why) if you are not sure how to set them up:
 
 <Col>
-
+  <div>
-  <div className="grid max-w-full grid-cols-2 space-x-2 sm:max-w-3xl items-end">
     <MdxImage
       src={ActionCSS}
       alt="Add CSS action"
       quality="100"
-      className="rounded-lg"
+      className="max-w-full rounded-lg sm:max-w-3xl"
     />
     <MdxImage
       src={ActionPageurl}
       alt="Add inner text action"
       quality="100"
-      className="rounded-lg"
+      className="max-w-full rounded-lg sm:max-w-3xl"
     />
   </div>
 </Col>
@@ -136,7 +135,8 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
+  to install the widget.
 </Note>
 
 ###

apps/docs/app/developer-docs/contributing/components/FAQ.tsx

@@ -1,6 +1,6 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
 
-import { FaqJsonLdComponent } from "./FAQPageJsonLd";
+import FaqJsonLdComponent from "./FAQPageJsonLd";
 
 const FAQ_DATA = [
   {
@@ -62,7 +62,7 @@ export const faqJsonLdData = FAQ_DATA.map((faq) => ({
   acceptedAnswerText: faq.answer(),
 }));
 
-export const FAQ = () => {
+export default function FAQ() {
   return (
     <>
       <FaqJsonLdComponent data={faqJsonLdData} />
@@ -76,4 +76,4 @@ export const FAQ = () => {
       </Accordion>
     </>
   );
-};
+}

apps/docs/app/developer-docs/contributing/components/FAQPageJsonLd.tsx

@@ -2,11 +2,11 @@
 
 import { FAQPageJsonLd } from "next-seo";
 
-export const FaqJsonLdComponent = ({ data }) => {
+export default function FaqJsonLdComponent({ data }) {
   const faqEntities = data.map(({ question, answer }) => ({
     questionName: question,
     acceptedAnswerText: answer,
   }));
 
   return <FAQPageJsonLd mainEntity={faqEntities} />;
-};
+}

apps/docs/app/developer-docs/contributing/page.mdx

@@ -1,4 +1,5 @@
 import { MdxImage } from "@/components/MdxImage";
+import FAQ from "./components/FAQ";
 
 import GitpodAuth from "./images/gitpod/auth.webp";
 import GitpodNewWorkspace from "./images/gitpod/new-workspace.webp";
@@ -469,3 +470,10 @@ This happens when you're using the Demo App and delete the Person within the For
 
 <MdxImage src={Logout} alt="Logout Person" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
+---
+
+# Frequently Asked Questions
+
+Here you'll find help with frequently recurring problems. If you can't find an answer to your question, please join our [Discord server](https://formbricks.com/discord).
+
+<FAQ />

apps/docs/app/developer-docs/integrations/airtable/page.mdx

@@ -24,7 +24,8 @@ export const metadata = {
 The Airtable integration allows you to automatically send responses to an Airtable of your choice.
 
 <Note>
-    If you are on a self-hosted instance, you will need to configure this integration separately. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance.
+  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
+  self-hosted version of Formbricks.
 </Note>
 
 ## Formbricks Cloud

apps/docs/app/developer-docs/integrations/google-sheets/page.mdx

@@ -21,8 +21,9 @@ export const metadata = {
 The Google Sheets integration allows you to automatically send responses to a Google Sheet of your choice.
 
 <Note>
-  If you are on a self-hosted instance, you will need to configure this integration separately. Please follow
+  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
-  the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance.
+  self-hosted version of Formbricks. For self-configuration, see additional setup
+  [below](#setup-in-self-hosted-formbricks).
 </Note>
 
 ## Connect Google Sheets
@@ -71,7 +72,7 @@ Before the next step, make sure that you have a Formbricks Survey with at least
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-6. Enter the spreadsheet URL for the Google Sheet you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in the Google Sheet. Select the questions and click on the "Link Sheet" button.
+6. Select the Google Sheet you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in the Google Sheet. Select the questions and click on the "Link Sheet" button.
 
 <MdxImage
   src={LinkWithQuestions}
@@ -116,6 +117,7 @@ To remove the integration with Google Account,
 For the above, we ask for:
 
 1. **User Email**: To identify you (that's it, nothing else, we're opensource, see this in our codebase [here](https://github.com/formbricks/formbricks/blob/main/apps/web/app/api/google-sheet/callback/route.ts#L47C17-L47C25))
+1. **Google Drive API**: To list all your google sheets (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L13))
 1. **Google Spreadsheet API**: To write to the spreadsheet you select (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L70))
 
 <Note>We store as little personal information as possible.</Note>

apps/docs/app/developer-docs/integrations/make/page.mdx

@@ -27,7 +27,7 @@ export const metadata = {
 Make is a powerful tool to send information between Formbricks and thousands of apps. Here's how to set it up.
 
 <Note>
-Nailed down your survey?? Any changes in the survey cause additional work in the _Scenario_. It
+  ### Nail down your survey first ? Any changes in the survey cause additional work in the _Scenario_. It
   makes sense to first settle on the survey you want to run and then get to setting up Make.
 </Note>