introduce required env variables

Co-authored-by: Johannes <johannes@formbricks.com>

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@formbricks/formbricks-com", "@formbricks/demo", "@formbricks/web"]
+  "ignore": ["@formbricks/demo", "@formbricks/web"]
 }

.devcontainer/devcontainer.json

@@ -21,7 +21,7 @@
   "forwardPorts": [3000, 5432, 8025],
 
   // Use 'postCreateCommand' to run commands after the container is created.
-  "postCreateCommand": "cp .env.example .env && sed -i '/^ENCRYPTION_KEY=/c\\ENCRYPTION_KEY='$(openssl rand -hex 32) .env && sed -i '/^NEXTAUTH_SECRET=/c\\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env && pnpm install && pnpm db:migrate:dev",
+  "postCreateCommand": "cp .env.example .env && sed -i '/^ENCRYPTION_KEY=/c\\ENCRYPTION_KEY='$(openssl rand -hex 32) .env && sed -i '/^NEXTAUTH_SECRET=/c\\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env && sed -i '/^CRON_SECRET=/c\\CRON_SECRET='$(openssl rand -hex 32) .env && pnpm install && pnpm db:migrate:dev",
   "postAttachCommand": "pnpm dev --filter=@formbricks/web... --filter=@formbricks/demo...",
 
   // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.

.devcontainer/docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3.8'
+version: "3.8"
 
 services:
   app:
@@ -22,11 +22,11 @@ services:
     # Uncomment the next line to use a non-root user for all processes.
     # user: node
 
-    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally. 
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally.
     # (Adding the "ports" property to this file will not forward from a Codespace.)
 
   db:
-    image: postgres:latest
+    image: pgvector/pgvector:pg17
     restart: unless-stopped
     volumes:
       - postgres-data:/var/lib/postgresql/data
@@ -41,12 +41,11 @@ services:
     image: mailhog/mailhog
     network_mode: service:app
     logging:
-      driver: "none" # disable saving logs
+      driver:
+        "none" # disable saving logs
         #    ports:
       #    - 8025:8025 # web ui
       # 1025:1025 # smtp server
 
-
-
 volumes:
   postgres-data: null

.env.example

@@ -180,3 +180,9 @@ UNSPLASH_ACCESS_KEY=
 
 # Disable custom cache handler if necessary (e.g. if deployed on Vercel)
 # CUSTOM_CACHE_DISABLED=1
+
+# Azure AI settings
+# AI_AZURE_RESSOURCE_NAME=
+# AI_AZURE_API_KEY=
+# AI_AZURE_EMBEDDINGS_DEPLOYMENT_ID=
+# AI_AZURE_LLM_DEPLOYMENT_ID=

.github/workflows/build-docs.yml

@@ -0,0 +1,28 @@
+name: Build Docs
+on:
+  workflow_call:
+jobs:
+  build:
+    name: Build Docs
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+        shell: bash
+
+      - run: |
+          pnpm build --filter=@formbricks/docs...
+        shell: bash

.github/workflows/build-web.yml

@@ -1,4 +1,4 @@
-name: Build web
+name: Build Web
 on:
   workflow_call:
 jobs:

.github/workflows/e2e.yml

@@ -11,7 +11,7 @@ jobs:
     timeout-minutes: 60
     services:
       postgres:
-        image: postgres:latest
+        image: pgvector/pgvector:pg17
         env:
           POSTGRES_DB: postgres
           POSTGRES_USER: postgres
@@ -50,6 +50,7 @@ jobs:
           sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
           sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${RANDOM_KEY}/" .env
+          echo "" >> .env
           echo "E2E_TESTING=1" >> .env
         shell: bash
 

.github/workflows/pr.yml

@@ -50,6 +50,13 @@ jobs:
     uses: ./.github/workflows/build-web.yml
     secrets: inherit
 
+  docs:
+    name: Build Docs
+    needs: [changes]
+    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
+    uses: ./.github/workflows/build-docs.yml
+    secrets: inherit
+
   e2e-test:
     name: Run E2E Tests
     needs: [changes]
@@ -59,7 +66,7 @@ jobs:
 
   required:
     name: PR Check Summary
-    needs: [lint, test, build, e2e-test]
+    needs: [lint, test, build, e2e-test, docs]
     if: always()
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -58,3 +58,5 @@ packages/lib/uploads
 # Vite Timestamps
 *vite.config.*.timestamp-*
 
+# js compiled assets
+apps/web/public/js

.gitpod.yml

@@ -10,9 +10,6 @@ tasks:
       gp sync-await init && 
       turbo --filter "@formbricks/demo" go
 
-  - name: website
-    command: gp sync-await init && turbo --filter "@formbricks/formbricks-com" dev
-
   - name: Init Formbricks
     init: |
       cp .env.example .env &&

.npmrc

@@ -5,4 +5,5 @@ shared-workspace-shrinkwrap = true
 access = public
 enable-pre-post-scripts = true
 legacy-peer-deps=true
-node-linker=hoisted
+node-linker=hoisted
+save-exact=true

.nvmrc

@@ -0,0 +1 @@
+20.18.0

CONTRIBUTING.md

@@ -16,9 +16,9 @@ Are you brimming with brilliant ideas? For new features that can elevate Formbri
 
 Ready to dive into the code and make a real impact? Here's your path:
 
-1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/contributing/how-we-code) but will help you save hours 🤓
+1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/developer-docs/contributing/get-started) but will help you save hours 🤓
 
-1. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/contributing/gitpod)
+1. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/developer-docs/contributing/gitpod) or use [Codespaces](https://formbricks.com/docs/developer-docs/contributing/codespaces)
 
 1. **Tweak and Transform:** Work your coding magic and apply your changes.
 

LICENSE

@@ -2,7 +2,7 @@ Copyright (c) 2024 Formbricks GmbH
 
 Portions of this software are licensed as follows:
 
-- All content that resides under the "packages/ee/" directory of this repository, if that directory exists, is licensed under the license defined in "packages/ee/LICENSE".
+- All content that resides under the "packages/ee/", "apps/web/modules/ee" & "apps/web/app/(ee)" directories of this repository, if these directories exist, is licensed under the license defined in "packages/ee/LICENSE".
 - All content that resides under the "packages/js/", "packages/react-native/" and "packages/api/" directories of this repository, if that directories exist, is licensed under the "MIT" license as defined in the "LICENSE" files of these packages.
 - All third party components incorporated into the Formbricks Software are licensed under the original license provided by the owner of the applicable component.
 - Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.

README.md

@@ -1,5 +1,7 @@
 <div id="top"></div>
 
+<p align="center">Help us grow and star us on Github! ⭐️</p>
+
 <p align="center">
 
 <a href="https://formbricks.com">

apps/demo-react-native/package.json

@@ -13,16 +13,16 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@formbricks/react-native": "workspace:*",
-    "expo": "^51.0.26",
-    "expo-status-bar": "~1.12.1",
-    "react": "^18.2.0",
-    "react-native": "^0.74.4",
+    "expo": "51.0.26",
+    "expo-status-bar": "1.12.1",
+    "react": "18.3.1",
+    "react-native": "0.74.4",
     "react-native-webview": "13.8.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@types/react": "~18.2.79",
-    "typescript": "^5.3.3"
+    "@babel/core": "7.25.2",
+    "@types/react": "18.3.11",
+    "typescript": "5.3.3"
   },
   "private": true
 }

apps/demo/components/SurveySwitch.tsx

@@ -1,22 +0,0 @@
-interface SurveySwitchProps {
-  value: "website" | "app";
-  formbricks: any;
-}
-
-export const SurveySwitch = ({ value, formbricks }: SurveySwitchProps) => {
-  return (
-    <select
-      value={value}
-      onChange={(v) => {
-        formbricks.logout();
-        window.location.href = `/${v.target.value}`;
-      }}>
-      <option value="website" className="h-10 px-4 hover:bg-slate-100">
-        Website Surveys
-      </option>
-      <option value="app" className="hover:bg-slate-10 h-10 px-4">
-        App Surveys
-      </option>
-    </select>
-  );
-};

apps/demo/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/demo/next.config.mjs

@@ -1,15 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
-  async redirects() {
-    return [
-      {
-        source: "/",
-        destination: "/app",
-        permanent: false,
-      },
-    ];
-  },
   images: {
     remotePatterns: [
       {

apps/demo/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "clean": "rimraf .turbo node_modules .next",
     "dev": "next dev -p 3002 --turbo",
-    "go": "next dev -p 3002",
+    "go": "next dev -p 3002 --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -13,8 +13,8 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@formbricks/ui": "workspace:*",
-    "lucide-react": "^0.418.0",
-    "next": "14.2.5",
+    "lucide-react": "0.452.0",
+    "next": "14.2.15",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

apps/demo/pages/index.tsx

@@ -1,9 +1,8 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import formbricks from "@formbricks/js/app";
-import { SurveySwitch } from "../../components/SurveySwitch";
-import fbsetup from "../../public/fb-setup.png";
+import formbricks from "@formbricks/js";
+import fbsetup from "../public/fb-setup.png";
 
 declare const window: any;
 
@@ -63,7 +62,6 @@ const AppPage = ({}) => {
     <div className="min-h-screen bg-white px-12 py-6 dark:bg-slate-800">
       <div className="flex flex-col justify-between md:flex-row">
         <div className="flex flex-col items-center gap-2 sm:flex-row">
-          <SurveySwitch value="app" formbricks={formbricks} />
           <div>
             <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
               Formbricks In-product Survey Demo App

apps/demo/pages/website/index.tsx

@@ -1,143 +0,0 @@
-import Image from "next/image";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import formbricks from "@formbricks/js/website";
-import { SurveySwitch } from "../../components/SurveySwitch";
-import fbsetup from "../../public/fb-setup.png";
-
-declare const window: any;
-
-const AppPage = ({}) => {
-  const [darkMode, setDarkMode] = useState(false);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (darkMode) {
-      document.body.classList.add("dark");
-    } else {
-      document.body.classList.remove("dark");
-    }
-  }, [darkMode]);
-
-  useEffect(() => {
-    // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
-    const addFormbricksDebugParam = () => {
-      const urlParams = new URLSearchParams(window.location.search);
-      if (!urlParams.has("formbricksDebug")) {
-        urlParams.set("formbricksDebug", "true");
-        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-        window.history.replaceState({}, "", newUrl);
-      }
-    };
-
-    addFormbricksDebugParam();
-
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const defaultAttributes = {
-        language: "en",
-      };
-
-      formbricks.init({
-        environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
-        apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
-        attributes: defaultAttributes,
-      });
-    }
-
-    // Connect next.js router to Formbricks
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const handleRouteChange = formbricks?.registerRouteChange;
-      router.events.on("routeChangeComplete", handleRouteChange);
-
-      return () => {
-        router.events.off("routeChangeComplete", handleRouteChange);
-      };
-    }
-  });
-
-  return (
-    <div className="min-h-screen bg-white px-12 py-6 dark:bg-slate-800">
-      <div className="flex flex-col justify-between md:flex-row">
-        <div className="flex flex-col items-center gap-2 sm:flex-row">
-          <SurveySwitch value="website" formbricks={formbricks} />
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
-              Formbricks Website Survey Demo App
-            </h1>
-            <p className="text-slate-700 dark:text-slate-300">
-              This app helps you test your app surveys. You can create and test user actions, create and
-              update user attributes, etc.
-            </p>
-          </div>
-        </div>
-
-        <button
-          className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
-          onClick={() => setDarkMode(!darkMode)}>
-          {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
-        </button>
-      </div>
-
-      <div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
-        <div>
-          <div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
-            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">1. Setup .env</h3>
-            <p className="text-slate-700 dark:text-slate-300">
-              Copy the environment ID of your Formbricks app to the env variable in /apps/demo/.env
-            </p>
-            <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
-
-            <div className="mt-4 flex-col items-start text-sm text-slate-700 sm:flex sm:items-center sm:text-base dark:text-slate-300">
-              <p className="mb-1 sm:mb-0 sm:mr-2">You&apos;re connected with env:</p>
-              <div className="flex items-center">
-                <strong className="w-32 truncate sm:w-auto">
-                  {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}
-                </strong>
-                <span className="relative ml-2 flex h-3 w-3">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
-                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
-                </span>
-              </div>
-            </div>
-          </div>
-          <div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
-            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">2. Widget Logs</h3>
-            <p className="text-slate-700 dark:text-slate-300">
-              Look at the logs to understand how the widget works.{" "}
-              <strong className="dark:text-white">Open your browser console</strong> to see the logs.
-            </p>
-            {/* <div className="max-h-[40vh] overflow-y-auto py-4">
-              <LogsContainer />
-            </div> */}
-          </div>
-        </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-900">
-            <h3 className="text-lg font-semibold dark:text-white">
-              Reset person / pull data from Formbricks app
-            </h3>
-            <p className="text-slate-700 dark:text-slate-300">
-              On formbricks.reset() the local state will <strong>be deleted</strong> and formbricks gets{" "}
-              <strong>reinitialized</strong>.
-            </p>
-            <button
-              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
-              onClick={() => {
-                formbricks.reset();
-              }}>
-              Reset
-            </button>
-
-            <p className="text-xs text-slate-700 dark:text-slate-300">
-              If you made a change in Formbricks app and it does not seem to work, hit &apos;Reset&apos; and
-              try again.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppPage;

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

@@ -9,8 +9,6 @@ export const metadata = {
     "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.",
 };
 
-#### App Surveys
-
 # Actions
 
 Actions are predefined events within your app that prompt Formbricks to display a survey when triggered. These are detected by the Formbricks widget, which then presents the appropriate survey based on your predefined settings.

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

@@ -4,8 +4,6 @@ export const metadata = {
     "Advanced Targeting allows you to show surveys to just the right group of people. You can target surveys based on user attributes, metadata, and other segments. This helps you get more relevant feedback and make data-driven decisions.",
 };
 
-#### App Surveys
-
 # Advanced Targeting
 
 Advanced Targeting allows you to show surveys to the right group of people. You can target surveys based on user attributes, device type, 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.

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

@@ -42,8 +42,8 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
 !function(){
     var apiHost = "https://app.formbricks.com";
     var environmentId = "<your-environment-id>";
-    var userId = "<your-user-id>";
-    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=apiHost+"/api/packages/app";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: environmentId, apiHost: apiHost, userId: userId})},500)}();
+    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 -->
 ```
@@ -58,9 +58,6 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
-  <Property name="userId" type="string">
-    User ID of the user who has active session.
-  </Property>
 </Properties>
 
 Refer to our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
@@ -91,13 +88,13 @@ Now, update your App.js/ts file to initialise Formbricks.
 
 ```js
 // other imports
-import formbricks from "@formbricks/js/app";
+import formbricks from "@formbricks/js";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>",
+    userId: "<user-id>", //optional
   });
 }
 
@@ -119,9 +116,6 @@ export default App;
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
-  <Property name="userId" type="string">
-    User ID of the user who has active session.
-  </Property>
 </Properties>
 
 Refer to our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
@@ -164,7 +158,7 @@ yarn add @formbricks/js zod
 
 import { usePathname, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
-import formbricks from "@formbricks/js/app";
+import formbricks from "@formbricks/js";
 
 export default function FormbricksProvider() {
   const pathname = usePathname();
@@ -174,7 +168,7 @@ export default function FormbricksProvider() {
     formbricks.init({
       environmentId: "<environment-id>",
       apiHost: "<api-host>",
-      userId: "<user-id>",
+      userId: "<user-id>", //optional
     });
   }, []);
 
@@ -217,13 +211,13 @@ Refer to our [Example NextJS App Directory project](https://github.com/formbrick
 // other import
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-import formbricks from "@formbricks/js/app";
+import formbricks from "@formbricks/js";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>",
+    userId: "<user-id>", //optional
   });
 }
 
@@ -256,9 +250,6 @@ Refer to our [Example NextJS Pages Directory project](https://github.com/formbri
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
-  <Property name="userId" type="string">
-    User ID of the user who has active session.
-  </Property>
 </Properties>
 
 First we initialize the Formbricks SDK, ensuring that it only runs on the client side.
@@ -292,13 +283,13 @@ yarn add @formbricks/js
 <CodeGroup title="src/formbricks.js">
 
 ```js
-import formbricks from "@formbricks/js/app";
+import formbricks from "@formbricks/js";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>",
+    userId: "<user-id>", //optional
   });
 }
 
@@ -339,9 +330,6 @@ router.afterEach((to, from) => {
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
-  <Property name="userId" type="string">
-    User ID of the user who has active session.
-  </Property>
 </Properties>
 
 Refer to our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
@@ -399,9 +387,6 @@ export default function App() {
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
-  <Property name="userId" type="string">
-    User ID of the user who has active session.
-  </Property>
 </Properties>
 
 ---

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

@@ -3,6 +3,7 @@ import { MdxImage } from "@/components/MdxImage";
 import I1 from "./images/I1.webp";
 import I2 from "./images/I2.webp";
 import I3 from "./images/I3.webp";
+import I3_1 from "./images/I3_1.webp";
 import I4 from "./images/I4.webp";
 import I5 from "./images/I5.webp";
 import I6 from "./images/I6.webp";
@@ -15,44 +16,41 @@ export const metadata = {
     "Formbricks is the easiest way to create and manage app surveys. This quickstart guide will show you how to create your first app survey in under 5 minutes.",
 };
 
-#### App Surveys
-
 # Quickstart
 
 App surveys have 6-10x better conversion rates than emailed surveys. This tutorial explains how to run a survey in both your web app and mobile app (React Native) in just 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
-  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.
-</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, choose the "Formbricks Surveys" option:
 
 <MdxImage
   src={I1}
-  alt="Choose website survey from survey type"
+  alt="Choose Formbricks Surveys"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-2. **Connect your App/Website**: Once you get through a couple of onboarding steps, you’ll be asked to connect your app or website. This is where you’ll find the code snippet for both HTML as well as the npm package which you need to embed in your app:
+2. **Choose your Product Channel**: On this step, you have to choose between the various channels that you want your product to be created in, you can create both app and link surveys from all the channels, but for the onboarding, please choose between the app surveys or the public website options, upon doing this, you'll be prompted to connect your app / website to formbricks.
 
 <MdxImage
   src={I2}
+  alt="Choose between app and website surveys product channels"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. **Connect your App/Website**: Once you get through a couple of onboarding steps, you’ll be asked to connect your app or website. This is where you’ll find the code snippet for both HTML as well as the npm package which you need to embed in your app:
+
+<MdxImage
+  src={I3}
   alt="Code snippet for connecting app with Formbricks"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-Paste the code snippet in your app and reload the page. You should now see the Formbricks widget in the lower right corner of your app! The integration is now complete.
+Paste the code snippet in your app and reload the page. You should now see a message being displayed that your app or website is now connected with formbricks.
 
 <MdxImage
-  src={I3}
+  src={I3_1}
   alt="App connected with Formbricks"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
@@ -67,7 +65,7 @@ Onboarding is complete! Now let’s create our first survey as you should see te
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-3. **Create your first survey**: To be able to see a survey in your app, you need to create one. We’ll choose one of the templates and head over to the survey settings:
+4. **Create your first survey**: To be able to see a survey in your app, you need to create one. We’ll choose one of the templates and head over to the survey settings:
 
 Pick the Survey Type as **App Survey**.
 
@@ -78,7 +76,7 @@ Pick the Survey Type as **App Survey**.
   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:
+5. **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:
 
 <MdxImage
   src={I6}
@@ -87,7 +85,7 @@ Pick the Survey Type as **App Survey**.
   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:
+6. **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.
@@ -100,7 +98,7 @@ Pick the Survey Type as **App Survey**.
   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.
+7. **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}
@@ -111,7 +109,7 @@ Pick the Survey Type as **App Survey**.
 
 ---
 
-- We offer framework guides for various frontend tech, head over to the the [App Survey Framework Guides](/app-survey/framework-guides) to get started with your app survey.
-- Head over to our App Survey SDK documentation to get started with the [App Survey JS SDK](/developer-docs/app-survey-sdk).
+- We offer framework guides for various frontend tech, head over to the the [App Survey Framework Guides](/app-surveys/framework-guides) to get started with your app survey.
+- Head over to our JS SDK documentation to get started with the [JS SDK](/developer-docs/js-sdk).
 
 Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

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

@@ -11,8 +11,6 @@ export const metadata = {
     "Explore how to configure Recontact options in Formbricks to control the frequency of survey exposure to users, ensuring effective feedback collection without compromising user experience.",
 };
 
-#### App Surveys
-
 # Recontact Options
 
 Recontact options in Formbricks enable you to manage how often and under what conditions a survey is shown to a user. This feature is crucial for balancing effective feedback collection with a positive user experience by preventing survey fatigue.

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

@@ -4,19 +4,12 @@ export const metadata = {
     "Dive into the importance of user identification in surveys. Boost your survey response rates and target the right users with Formbricks.",
 };
 
-#### App Surveys
-
 # User Identification
 
 User Identification helps you to not only segment your users but also to see more information about the user who responded to a survey. This helps you to target surveys to specific user segments and see more information about the user who responded to a survey.
 
 ### Understanding Identified vs Unidentified Users
 
-<Note>
-  Formbricks App Surveys can **only be used with identified users**. If you are looking to run surveys on your
-  public-facing website, head over to the [Website Surveys](/website-surveys/quickstart) section.
-</Note>
-
 In Formbricks, understanding the distinction between identified and unidentified users is crucial for effective survey segmentation and targeted feedback collection.
 
 | Feature                                                  | Unidentified Users | Identified Users |

apps/docs/app/best-practices/contact-form/page.mdx

@@ -0,0 +1,169 @@
+import { MdxImage } from "@/components/MdxImage";
+import AddQuestion from "./images/add-question.webp";
+import EmailField from "./images/email-field.webp";
+import EmbedImage from "./images/embed.png";
+import MessageField from "./images/message-field.webp";
+import NameField from "./images/name-field.webp";
+import QueryImage from "./images/query-form.webp";
+import SingleSelect from "./images/single-select-questionare.webp";
+import ToggleButton from "./images/welcome1.webp";
+
+export const metadata = {
+  title: "Creating a Contact Form with Formbricks: A Step-by-Step Guide",
+  description:
+    "Learn how to easily create a professional contact form using Formbricks, perfect for beginners and experts alike.",
+};
+
+# Creating a Contact Form with Formbricks: A Step-by-Step Guide
+
+Welcome to this comprehensive guide on creating a contact form using Formbricks. Whether you're just starting out or you're a seasoned developer, this tutorial will walk you through every step of building an engaging and effective contact form.
+
+## What We’ll Build
+
+By the end of this tutorial, you'll have created a simple contact form featuring:
+1. A welcoming introduction.
+2. Fields for collecting the user's name and email.
+3. A question to find out why they’re contacting you.
+4. A message field for users to share their queries.
+
+### Setting Up Your Form
+
+First, let's lay the groundwork for your form:
+
+1. Head to the Surveys page and click on **New Survey**.
+2. Select **Start from Scratch** to create a new form.
+3. In the form editor, click the three dots next to a question, then select **Change Question Type** and choose **Statement (Call to Action)**.
+
+<MdxImage
+  src={ToggleButton}
+  alt="Toggle button for Statement (Call to Action)"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+4. Add a welcoming statement to greet your users and explain the form's purpose.
+5. Personalize the greeting to make it inviting and encourage engagement.
+
+<Note>
+  A warm welcome sets the tone for your form. Make it friendly to encourage users to participate. 
+</Note>
+
+### Adding the Name Field
+
+Next, let's capture the user's name:
+
+1. Click **Add Question**.
+   <MdxImage
+     src={AddQuestion}
+     alt="Adding a question in Formbricks"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />
+2. Enter the prompts for the name field.
+3. Turn off the **Long Answer** option at the bottom right.
+4. Adjust any **settings**, such as making the field required.
+
+<MdxImage
+  src={NameField}
+  alt="Name field configuration"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Adding the Email Field
+
+Now, let’s add a field to collect the user's email address:
+
+1. Click **Add Question** again.
+2. Select Email as the input type.
+3. Enter a prompt for the email field.
+
+<MdxImage
+  src={EmailField}
+  alt="Email field configuration"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Adding a Reason for Contact
+
+Let’s now understand why the user is contacting you:
+
+1. Click **Add Question** once again.
+2. Select **Change Question** Type and choose **Single Select**.
+3. Add the question "Why are you contacting us today?"
+
+<MdxImage
+  src={SingleSelect}
+  alt="Single Select question configuration"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<Note>Predefined options help categorize inquiries, making it easier for you to respond appropriately.</Note>
+
+4. Add options like "General Inquiry," "Support," and "Feedback."
+
+<MdxImage
+  src={QueryImage}
+  alt="Single Select question configuration"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Adding a Message Field
+
+Finally, let’s provide a space for the user’s message:
+
+1. Click **Add Question** for the last time.
+2. Add the question: "Your Message."
+3. Set the placeholder text to something like "Please write your message here."
+
+<MdxImage
+  src={MessageField}
+  alt="Message field configuration"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+4. Consider setting a minimum character count to ensure detailed messages.
+
+### Finalizing Your Form
+
+Once your form is complete, follow these final steps:
+
+1. Review and rearrange the questions if necessary.
+2. Test the form by filling it out as a user.
+3. Customize the **Thank You** message for submissions.
+4. Publish the form to get a shareable link.
+5. Enable submission notifications:
+   - Go to your Formbricks account settings.
+   - Verify your email address.
+   - Ensure that **Survey** notifications are enabled.
+
+### Integrating the Contact Form into Your Website
+
+After publishing the form, follow these steps to integrate it into your site:
+
+1. **Copy the Shareable Link**  
+   - Find your form in the Formbricks dashboard, and click Share.
+   - Select Embed in a Web Page.
+
+   <MdxImage
+     src={EmbedImage}
+     alt="Embed Image configuration"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />
+
+2. **Embed the Code**  
+   - Copy the provided code and paste it into your website where you want the form to appear.
+
+3. **Test the Integration**  
+   - Check if the form displays correctly on your site.
+   - Submit a test entry to ensure everything works and notifications are received.
+
+## Conclusion
+Congratulations! You’ve successfully created and integrated a professional contact form using Formbricks. This form will help you collect valuable information from your visitors in an efficient, user-friendly way.
+
+A great contact form strikes the balance between collecting necessary details and being simple enough to encourage submissions. **You’ve achieved just that!**

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

@@ -119,7 +119,7 @@ This allows us to capture and analyze partial feedback where the user is not wil
 
 <MdxImage src={DocsNavi} alt="doc navigation" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
-Locate that file. We are using the [Tailwind Template “Syntax”](https://tailwindui.com/templates/syntax) for our docs. Here is our [Layout.tsx](https://github.com/formbricks/formbricks/blob/main/apps/formbricks-com/components/docs/Layout.tsx) file.
+Locate that file. We are using the [Tailwind Template “Syntax”](https://tailwindui.com/templates/syntax) for our docs.
 
 3. Write the frontend code for the widget. Here is the full component (we break it down right below):
 

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

@@ -43,7 +43,7 @@ const FAQ_DATA = [
         Absolutely! We provide an option for users to host Formbricks on their own server, ensuring even more
         control over data and compliance. And the best part? Self-hosting is available for free, always. For
         documentation on self hosting, click{" "}
-        <a href="/docs/self-hosting/deployment" className="text-brand-dark dark:text-brand-light">
+        <a href="/self-hosting/deployment" className="text-brand-dark dark:text-brand-light">
           here
         </a>
         .

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

@@ -34,8 +34,8 @@ Once you open a PR, you will get a message from the CLA bot to fill out the form
 
 We currently officially support the below methods to set up your development environment for Formbricks:
 
-- [Gitpod](/docs/developer-docs/contributing/gitpod)
-- [GitHub Codespaces](/docs/developer-docs/contributing/codespaces)
+- [Gitpod](/developer-docs/contributing/gitpod)
+- [GitHub Codespaces](/developer-docs/contributing/codespaces)
 - [Local Machine Setup](#local-machine-setup)
 
 Both Gitpod and GitHub Codespaces have a **generous free tier** to explore and develop. For junior developers we suggest using either of these, because you can dive into coding within minutes, not hours.
@@ -67,7 +67,19 @@ git clone https://github.com/formbricks/formbricks && cd formbricks
    </CodeGroup>
 </Col>
 
-2. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
+2. Setup Node.JS with nvm:
+
+<Col>
+   <CodeGroup title="Setup Node version with nvm">
+
+```bash
+nvm install && nvm use
+```
+
+   </CodeGroup>
+</Col>
+
+3. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
 
 <Col>
    <CodeGroup title="Install dependencies via pnpm">
@@ -79,7 +91,7 @@ pnpm install
    </CodeGroup>
 </Col>
 
-3. Create a `.env` file based on `.env.example`. It's already preset to work with the local development setup but you can also change values if needed.
+4. Create a `.env` file based on `.env.example`. It's already preset to work with the local development setup but you can also change values if needed.
 
 <Col>
    <CodeGroup title="Define environment variables">
@@ -91,7 +103,7 @@ cp .env.example .env
    </CodeGroup>
 </Col>
 
-4. Generate & set some secret values mandatory for the `ENCRYPTION_KEY`, `NEXTAUTH_SECRET` and `CRON_SECRET` in the .env file. You can use the following command to generate the random string of required length:
+5. Generate & set some secret values mandatory for the `ENCRYPTION_KEY`, `NEXTAUTH_SECRET` and `CRON_SECRET` in the .env file. You can use the following command to generate the random string of required length:
 
 - For Linux
 
@@ -121,7 +133,7 @@ sed -i '' '/^CRON_SECRET=/s|.*|CRON_SECRET='$(openssl rand -hex 32)'|' .env
    </CodeGroup>
 </Col>
 
-5. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the Formbricks dev setup:
+6. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the Formbricks dev setup:
 
 <Col>
    <CodeGroup title="Start Formbricks Dev Setup">

apps/docs/app/developer-docs/js-sdk/page.mdx

@@ -5,18 +5,18 @@ import I2 from "./images/2-micro-survey-pop-up-in-app.webp";
 import I3 from "./images/3-survey-logs-in-app-survey-popup.webp";
 
 export const metadata = {
-  title: "Formbricks App Survey SDK",
+  title: "Formbricks JS SDK",
   description:
-    "Integrate Formbricks App Surveys into your web apps with the Formbricks JS SDK for App Surveys. Learn how to initialize Formbricks, set attributes, track actions, and troubleshoot common issues.",
+    "Integrate Formbricks App Surveys into your web apps and websites with the Formbricks JS SDK. Learn how to initialize Formbricks, set attributes, track actions, and troubleshoot common issues.",
 };
 
 #### Developer Docs
 
-# SDK: Run Surveys Inside Your Web Apps
+# SDK: Run Surveys Inside Your Web Apps and Websites
 
 ### Overview
 
-The Formbricks JS SDK is a 2-in-1 SDK for seamlessly integrating both App Surveys and Website Surveys into your projects. In this section, we'll explore how to leverage the SDK specifically for **app** surveys. It’s available on npm [here](https://www.npmjs.com/package/@formbricks/js/).
+The Formbricks JS SDK is a versatile solution for integrating surveys into both web apps and websites. It adapts based on the presence of a `userId`. If a `userId` is provided, the SDK handles authenticated surveys for logged-in users in web apps. If no `userId` is provided, the SDK can still seamlessly run surveys on public-facing websites. The SDK is available on npm [here](https://www.npmjs.com/package/@formbricks/js/).
 
 ### Install
 
@@ -42,18 +42,18 @@ pnpm add @formbricks/js
 
 ### Initialize Formbricks
 
-Initialize the Formbricks JS Client for app surveys where you pass the userId (creates a user if not existing in Formbricks) to attribute & target the user based on their actions.
+Initialize the Formbricks JS Client for surveys. When used in a web app, pass a `userId` to create and target a specific user. When using it on a website without authentication, simply omit the `userId`.
 
 <Col>
 <CodeGroup title="Initialize Formbricks">
 
 ```javascript
-import formbricks from "@formbricks/js/app";
+import formbricks from "@formbricks/js";
 
 formbricks.init({
   environmentId: "<your-environment-id>", // required
   apiHost: "<your-api-host>", // required
-  userId: "<user-id>", // required
+  userId: "<user-id>", // optional
 });
 ```
 
@@ -73,7 +73,7 @@ if (window !== undefined) {
   formbricks.init({
     environmentId: "<your-environment-id>",
     apiHost: "<your-api-host>",
-    userId: "<user-id>",
+    userId: "<user-id>", //optional
   });
 } else {
   console.error("Window object not accessible to init Formbricks");
@@ -87,7 +87,7 @@ if (window !== undefined) {
 
 ### Set Attribute
 
-You can set custom attributes for the identified user. This can be helpful for segmenting users based on specific characteristics or properties. To learn how to set custom user attributes, please check out our [User Attributes Guide](/app-surveys/user-identification).
+Set custom attributes for the identified user to help segment them based on specific characteristics. This method only works when a `userId` is provided during initialization, allowing for targeted surveys in web apps. To learn how to set custom user attributes, refer to our [User Attributes Guide](/app-surveys/user-identification).
 
 <Col>
 <CodeGroup>

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

@@ -14,13 +14,13 @@ Welcome to the Developer Docs section, your comprehensive resource for integrati
 
 The Formbricks React Native SDK for App Surveys is designed for React Native applications, enabling seamless integration of surveys within your mobile apps. Dive into the documentation to learn how to leverage the SDK for app surveys and engage with your users effectively.
 
-### [SDK: Web Apps](/developer-docs/app-survey-sdk)
+### [SDK: Formbricks JS](/developer-docs/js-sdk)
 
-The Formbricks JS SDK tailored for App Surveys is designed for applications where users are logged in, allowing for targeted and identified interactions within Formbricks. This SDK is particularly useful for advanced user tracking, enabling deeper insights into user behavior. Learn how to seamlessly integrate Formbricks into your applications and harness valuable insights from your logged-in users.
+The Formbricks JS SDK is a versatile solution for both web apps and public websites. It adapts based on how you provide user information.
 
-### [SDK: Public Websites](/developer-docs/website-survey-sdk)
+If a `userId` is provided, the SDK tailors surveys for logged-in users, enabling targeted and identified interactions. This allows for advanced user tracking, providing deeper insights into user behavior within your application.
 
-The Formbricks JS SDK for Website Surveys is ideal for public-facing websites without user authentication. It's recommended for pages with high traffic and no authentication walls, facilitating quick and efficient survey collection. Dive into the documentation to discover how to deploy surveys on your website and effectively engage with your audience.
+Alternatively, when no `userId` is supplied, the SDK seamlessly handles surveys for public-facing websites, making it ideal for high-traffic pages without authentication. This enables efficient survey collection without requiring user identification.
 
 ### [SDK: Formbricks API](/developer-docs/api-sdk)
 
@@ -34,7 +34,7 @@ Explore the Formbricks REST API documentation with Postman, providing detailed i
 
 Learn about Formbricks Webhooks and how to set up event-driven notifications in your applications using our UI as well as API. Stay updated with real-time data and trigger actions based on specific response events within your Formbricks environment.
 
-### [Contributing to Formbricks](/developer-docs/contributing)
+### [Contributing to Formbricks](/developer-docs/contributing/get-started)
 
 Interested in contributing to the Formbricks ecosystem? This page provides guidance on how to run Formbricks locally, report issues, contribute through code, and collaborate with the Formbricks community to enhance the platform for everyone.
 

apps/docs/app/global/access-roles/page.mdx

@@ -87,11 +87,11 @@ There are two ways to invite organization members: One by one or in bulk.
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-2. Click on the `Add Member` button:
+2. Click on the `Add member` button:
 
 <MdxImage
   src={AddMember}
-  alt="Add Member Button Position"
+  alt="Add member Button Position"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
@@ -123,11 +123,11 @@ Formbricks sends an email to the organization member with an invitation link. Th
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-2. Click on the `Add Member` button:
+2. Click on the `Add member` button:
 
 <MdxImage
   src={AddMember}
-  alt="Add Member Button Position"
+  alt="Add member Button Position"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
 />

apps/docs/app/global/add-image-or-video-question/page.mdx

@@ -0,0 +1,45 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import AddImageOrVideoToQuestionImage from "./images/add-image-or-video-to-question-image.webp";
+import AddImageOrVideoToQuestionVideo from "./images/add-image-or-video-to-question-video.webp";
+import AddImageOrVideoToQuestion from "./images/add-image-or-video-to-question.webp";
+
+#### Add Image or Video to a Question
+
+Enhance your questions by adding images or videos. This makes instructions clearer and the survey more engaging.
+
+## How to Add Images
+
+Click the icon on the right side of the question to add an image or video:
+
+<MdxImage
+  src={AddImageOrVideoToQuestion}
+  alt="Overview of adding image or video to question"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Upload an image by clicking the upload icon or dragging the file:
+
+<MdxImage
+  src={AddImageOrVideoToQuestionImage}
+  alt="Overview of adding image to question"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## How to Add Videos
+Toggle to add a video via link:
+
+<MdxImage
+  src={AddImageOrVideoToQuestionVideo}
+  alt="Overview of adding video to question"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Supported Video Platforms
+
+We support YouTube, Vimeo, and Loom URLs.
+
+<Note>**YouTube Privacy Mode**: This option reduces tracking by converting YouTube URLs to no-cookie URLs. It only works with YouTube.</Note>

apps/docs/app/global/hidden-fields/page.mdx

@@ -14,8 +14,6 @@ export const metadata = {
 
 Hidden fields are a powerful feature in Formbricks that allows you to add data to a submission without asking the user to type it in. This feature is especially useful when you already have information about a user that you want to use in the analysis of the survey results (e.g. `payment plan` or `email`)
 
-<Note>Hidden fields are now available in the Formbricks in-app and website surveys as well</Note>
-
 ## How to Add Hidden Fields
 
 ### Enable them in the Survey Builder

apps/docs/app/global/question-type/address/page.mdx

@@ -0,0 +1,36 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import Address from "./images/address.webp";
+
+#### Question Type
+
+# Address
+
+The Address question type allows respondents to input their address details, including multiple fields such as address lines, city, state, and country. You can configure the question by adding a title, an optional description, and toggling specific fields to be required.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/m8w91e8wi52pdao8un1f4twu" />
+
+## Elements
+
+<MdxImage
+  src={Address}
+  alt="Overview of Address question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Question
+Provide a question to describe the address information you are requesting.
+
+### Description
+Optionally, add a description to guide the user.
+
+### Toggle Fields
+You can choose to show and require any or all of the following fields in the form:
+   - Address Line 1
+   - Address Line 2
+   - City
+   - State
+   - Zip Code
+   - Country
+

apps/docs/app/global/question-type/consent/page.mdx

@@ -0,0 +1,28 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import Consent from "./images/consent.webp";
+
+#### Question Type
+
+# Consent
+
+The Consent card is used to obtain user agreement regarding a product, service, or policy. It features a bold statement or question as the title, followed by a brief description. At the end of the card, users can confirm their consent by checking a checkbox to indicate their agreement.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/orxp15pca6x2nfr3v8pttpwm" />
+
+## Elements
+<MdxImage
+  src={Consent}
+  alt="Overview of Consent question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+A bold statement or question asking for user consent, displayed prominently at the top of the card.
+
+### Description
+A short explanation or additional context for the consent request, displayed below the title. The text can be formatted, and hyperlinks are allowed within the description.
+
+### Checkbox
+At the bottom of the card, users can confirm their agreement by checking the box, indicating their consent to the question or statement above. The label for the checkbox is also editable.

apps/docs/app/global/question-type/contact/page.mdx

@@ -0,0 +1,36 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import Contact from "./images/contact.webp";
+
+#### Question Type
+
+# Contact Info
+
+The Contact Info question type allows respondents to provide their basic contact information such as name, email, and phone number. You can customize the form with a title, an optional description, and control which fields to display and require.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/z2zjoonfeythx5n6z5qijbsg" />
+
+## Elements
+<MdxImage
+  src={Contact}
+  alt="Overview of Contact Info question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+
+Specify a title to describe the information you're collecting.
+
+### Description
+
+Optionally, add a description to give additional context.
+
+### Toggle Fields
+
+You can choose to show and require any or all of the following fields:
+   - First Name
+   - Last Name
+   - Email
+   - Phone Number
+   - Company

apps/docs/app/global/question-type/date/page.mdx

@@ -0,0 +1,32 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import Date from "./images/date.webp";
+
+#### Question Type
+
+# Date
+
+The Date question type allows respondents to provide a date, such as when they are available or when an event is scheduled. It features a title to guide the respondent on what date to enter, and an optional description to provide further details or context.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/rk844spc8ffls25vzkxzzhse" />
+
+## Elements
+<MdxImage
+  src={Date}
+  alt="Overview of Date question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title to inform the respondent what date you are asking for.
+
+### Description
+Provide an optional description with further instructions.
+
+### Date Format
+Choose from multiple date formats for the input:
+   - MM-DD-YYYY
+   - DD-MM-YYYY
+   - YYYY-MM-DD
+

apps/docs/app/global/question-type/file-upload/page.mdx

@@ -0,0 +1,34 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import FileUpload from "./images/file-upload.webp";
+
+#### Questions Type
+
+# File Upload
+
+The File Upload question type allows respondents to upload files related to your survey, such as production documents or requirement specifications. It features a title to guide the user on what to upload and an optional description to provide additional context.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/oo4e6vva48w0trn01ht8krwo" />
+
+## Elements
+<MdxImage
+  src={FileUpload}
+  alt="Overview of Fill Upload question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title that informs the respondent about the purpose of the file upload.
+
+### Description
+Provide an optional description to give respondents more details or instructions about what files they need to upload.
+
+### Allow Multiple Files
+Enable this option to allow respondents to upload multiple files at once.
+
+### Max File Size
+You can set a maximum file size limit, and an input box will appear to specify the size in MB.
+
+### File Type Restrictions
+You can restrict the allowed file types. An input box will appear where you can specify the file formats, such as `.pdf`, `.jpg`, `.docx`, etc.

apps/docs/app/global/question-type/free-text/page.mdx

@@ -0,0 +1,43 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import FreeText from "./images/free-text.webp";
+
+export const metadata = {
+  title: "Free Text",
+  description: "Free text questions allow respondents to enter a custom answer.",
+};
+
+#### Question Type
+
+# Free Text
+
+Free text questions allow respondents to enter a custom answer. Displays a title and an input field for the respondent to type in.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/cm2b2eftv000012b0l3htbu0a" />
+
+## Elements
+<MdxImage
+  src={FreeText}
+  alt="Overview of Free Text question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title to inform the respondent what information you are asking for.
+
+### Description
+Provide an optional description with further instructions.
+
+### Placeholder
+Specify a placeholder text to display in the input field.
+
+### Input Type
+
+Choose the type of input field to display. Options include:
+
+- **Text**: A text area input. This can be converted to a single line input field if needed, by toggling the _"Long answer"_ switch at the bottom of the question segment.
+- **Email**: A single-line text input that validates the input as an email address.
+- **URL**: A single-line text input that validates the input as a URL.
+- **Number**: A single-line text input that validates the input as a number and shows "increase" and "decrease" buttons.
+- **Phone**: A single-line text input that validates the input as a phone number.

apps/docs/app/global/question-type/matrix/page.mdx

@@ -0,0 +1,36 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import Matrix from "./images/matrix.webp";
+
+#### Question Type
+
+# Matrix
+
+Matrix questions allow respondents to select a value for each option presented in rows. The values range from 0 to a user-defined maximum (e.g., 0 to X). The selection is made using radio buttons, and users can choose any value within the defined range, including 0.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/obqeey0574jig4lo2gqyv51e" />
+
+## Elements
+<MdxImage
+  src={Matrix}
+  alt="Overview of Matrix question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title to inform the respondent what information you are asking for.
+
+### Description
+Provide an optional description with further instructions.
+
+### Rows
+Define the options shown on the left side of the matrix. These represent the items for which users will select a value.
+
+### Columns
+Represent the range of values from 0 to X (right side of the screen). Users can choose any value, including 0, using radio buttons.
+
+### Select ordering
+
+- Keep current order: This will keep the order of options the same for all respondents.
+- Randomize all: This will randomize the options for each respondent.

apps/docs/app/global/question-type/multi-select/page.mdx

@@ -0,0 +1,36 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import MultiSelect from "./images/multi-select.webp";
+
+export const metadata = {
+  title: "Multi Select",
+  description: "Multi select questions allow respondents to select several answers from a list",
+};
+
+#### Question Type
+
+# Multi Select
+
+Multi select questions allow respondents to select several answers from a list. Displays a title and a list of checkboxes for the respondent to choose from.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/jhyo6lwzf6eh3fyplhlp7h5f" />
+
+## Elements
+<MdxImage
+  src={MultiSelect}
+  alt="Overview of Multi Select question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title to inform the respondent what information you are asking for.
+
+### Description
+Provide an optional description with further instructions.
+
+### Options
+Define the options shown in the list. These represent the items for which users will select.
+
+Other than the fact that respondents can select multiple options, multi select questions are similar to [single select](/global/question-types/single-select) questions.
+

apps/docs/app/global/question-type/net-promoter-score/page.mdx

@@ -0,0 +1,31 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import NetPromoterScore from "./images/net-promoter-score.webp";
+
+#### Question Type
+
+# Net Promoter Score
+
+Net Promoter Score questions allow respondents to rate a question on a scale from 0 to 10. Displays a title and a list of radio buttons for the respondent to choose from.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/vqmpasmnt5qcpsa4enheips0" />
+
+## Elements
+<MdxImage
+  src={NetPromoterScore}
+  alt="Overview of Net Promoter Score question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title to inform the respondent what information you are asking for.
+
+### Description
+Provide an optional description with further instructions.
+
+### Labels
+Add labels for the lower and upper bounds of the score. The default is "Not at all likely" and "Extremely likely".
+
+### Add color coding
+Add color coding to the score. This will show a color bar above the score.

apps/docs/app/global/question-type/picture-selection/page.mdx

@@ -0,0 +1,36 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import PictureSelection from "./images/picture-selection.webp";
+
+export const metadata = {
+  title: "Picture Selection",
+  description: "Picture selection questions allow respondents to select one or more images from a list",
+};
+
+#### Question Type
+
+# Picture Selection
+
+Picture selection questions allow respondents to select one or more images from a list. Displays a title and a list of images for the respondent to choose from.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/xtgmwxlk7jxxr4oi6ym7odki" />
+
+## Elements
+<MdxImage
+  src={PictureSelection}
+  alt="Overview of Picture Selection question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title to inform the respondent what information you are asking for.
+
+### Description
+Provide an optional description with further instructions.
+
+### Images
+Images can be uploaded via click or drag and drop. At least two images are required.
+
+### Allow Multi Select
+This option allows user to select more than one image.

apps/docs/app/global/question-type/ranking/page.mdx

@@ -0,0 +1,32 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import Ranking from "./images/ranking.webp";
+
+#### Question Type
+
+# Ranking
+
+Ranking questions let respondents select options in order from 1 to the total number of options. As they make their choices, the list is automatically rearranged in numerical order.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/z6s84x9wbyk0yqqtfaz238px" />
+
+## Elements
+<MdxImage
+  src={Ranking}
+  alt="Overview of Ranking question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title to inform the respondent what information you are asking for.
+
+### Description
+Provide an optional description with further instructions.
+
+### Options
+You need to add at least two options so that users can rearrange them in numerical order based on their selection.
+
+### Select ordering
+- Keep current order: This will keep the order of options the same for all respondents.
+- Randomize all: This will randomize the options for each respondent.

apps/docs/app/global/question-type/rating/page.mdx

@@ -0,0 +1,39 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import Rating from "./images/rating.webp";
+
+export const metadata = {
+  title: "Rating",
+  description: "Rating questions allow respondents to rate questions on a scale",
+};
+
+#### Question Type
+
+# Rating
+
+Rating questions allow respondents to rate questions on a scale. Displays a title and a rating scale consisting of a number of images and labels for the lower and upper ends of the scale.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/cx7u4n6hwvc3nztuk4vdezl9" />
+
+## Elements
+<MdxImage
+  src={Rating}
+  alt="Overview of Rating question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title to inform the respondent what information you are asking for.
+
+### Description
+Provide an optional description with further instructions.
+
+### Scale
+Select the icon to be used for the rating scale. The options include: stars, numbers or smileys. The default is stars.
+
+### Range
+Select the range of the rating scale. the options include: 3, 4, 5, 7 or 10. The default is 5.
+
+### Labels
+Add labels for the lower and upper bounds of the rating scale. The default is "Not good" and "Very good".

apps/docs/app/global/question-type/schedule/page.mdx

@@ -0,0 +1,31 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import ScheduleCall from "./images/schedule-call.webp";
+
+#### Question Type
+
+# Schedule A Meeting
+
+The Schedule A Meeting question type allows respondents to book a meeting by selecting a date and time. It includes a title to guide the respondent, along with an optional description to provide additional context for the meeting setup.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/hx08x27c2aghywh57rroe6fi" />
+
+## Elements
+<MdxImage
+  src={ScheduleCall}
+  alt="Overview of Schedule question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title to inform the respondent what information you are asking for.
+
+### Description
+Provide an optional description with further instructions.
+
+### Cal.com Username/Event
+Add an input box where users can enter their [`cal.com`](https://cal.com/) username and event URL (e.g., `username/event`).
+
+### Custom Hostname (Optional)
+Enable an input box for adding a custom hostname, which is necessary if using a self-hosted instance of [`cal.com`](https://cal.com/docs/self-hosting/installation).

apps/docs/app/global/question-type/single-select/page.mdx

@@ -0,0 +1,44 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import SingleSelect from "./images/single-select.webp";
+
+export const metadata = {
+  title: "Single Select",
+  description: "Single select questions allow respondents to select one answer from a list",
+};
+
+#### Question Type
+
+# Single Select
+
+Single select questions allow respondents to select one answer from a list. Displays a title and a list of radio buttons for the respondent to choose from.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/wybd3v3cxpdfve4472fu3lhi" />
+
+## Elements
+<MdxImage
+  src={SingleSelect}
+  alt="Overview of Single Select question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+Add a clear title to inform the respondent what information you are asking for.
+
+### Description
+Provide an optional description with further instructions.
+
+### Options
+The list of answers the respondent can choose from.
+
+### Additional Actions
+
+- Add "Other": Adds an "Other" option to allow respondents to enter a custom answer. This will show two inputs, one for the label text and one for the placeholder.
+
+- Convert to Multiple Select: Converts the question to a multiple select question. This will show checkboxes instead of radio buttons.
+
+- Order dropdown: Allows you to choose the order in which the options are displayed.
+  - Keep current order: Options will be displayed in the order you added them.
+  - Randomize all: Options will be displayed in a random order.
+  - Randomize all except last option: Options will be displayed in a random order, except for the last one.

apps/docs/app/global/question-type/statement-cta/page.mdx

@@ -0,0 +1,29 @@
+import { MdxImage } from "@/components/MdxImage";
+import SurveyEmbed from "@/components/SurveyEmbed";
+import StatementCTA from "./images/statement-CTA.webp";
+
+#### Question Type
+
+# Statement (Call to Action)
+
+The Statement question type allows you to display descriptive information in your survey, such as a message or instruction. It consists of a title (can be Question or Short Note) and a description, which can be a brief note(realted to CTA) or guideline. Instead of collecting input, this type includes a call to action button for further steps, such as booking an interview call.
+
+<SurveyEmbed surveyUrl="https://app.formbricks.com/s/k3p7r7riyy504u4zziqat8zj" />
+
+## Elements
+<MdxImage
+  src={StatementCTA}
+  alt="Overview of Statement question type"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### Title
+This is the main question or heading that appears at the top of the card.
+
+### Description
+A brief note or instruction displayed under the title, typically used to provide context or instructions for the next step.
+
+### Button Options
+- Button to continue in survey: This will continue respondent with the survey, form or fillups.
+- Button to link to external URL: Selecting this option will open-up URL input box below when us set URL the button will redirect to your setted link.

apps/docs/app/self-hosting/integrations/page.mdx

@@ -48,7 +48,7 @@ We have step-by-step guides to configure our third-party integrations with a sel
 <Note>
   {" "}
   Once you’ve configured your integration, See our Integration sections to see how to use them within your Formbricks
-  app [here](/how-to-formbricks/integrations)
+  app [here](/developer-docs/integrations/airtable)
 </Note>
 
 ### Step by Step Guides
@@ -102,12 +102,11 @@ Enabling the Airtable Integration in a self-hosted environment requires creating
 />
 
 5. Click on the "Save" button and you are done
-6. Now just copy **Client ID** and **Redirect URL** for your integration & add it to your **Formbricks environment variables** as in the docker compose file:
+6. Now just copy **Client ID** for your integration & add it to your **Formbricks environment variables** as in the docker compose file:
 
 - `AIRTABLE_CLIENT_ID`
-- `AIRTABLE_REDIRECT_URL`
 
-Voila! You have successfully enabled the Airtable integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in [Airtable Integration with Formbricks](/integrations#airtable) section to link an Airtable with Formbricks.
+Voila! You have successfully enabled the Airtable integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in [Airtable Integration with Formbricks](/developer-docs/integrations/airtable) section to link an Airtable with Formbricks.
 
 ## Google Sheets
 
@@ -152,7 +151,7 @@ Now just copy **GOOGLE_SHEETS_CLIENT_ID**, **GOOGLE_SHEETS_CLIENT_SECRET** and *
 - `GOOGLE_SHEETS_CLIENT_SECRET`
 - `GOOGLE_SHEETS_REDIRECT_URL`
 
-Voila! You have successfully enabled the Google Sheets integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in [Google Sheets Integration with Formbricks](/integrations#google-sheets) section to link a Google Sheet with Formbricks.
+Voila! You have successfully enabled the Google Sheets integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in [Google Sheets Integration with Formbricks](/developer-docs/integrations/google-sheets) section to link a Google Sheet with Formbricks.
 
 ## Notion:
 
@@ -170,7 +169,7 @@ Enabling the Notion Integration in a self-hosted environment requires a setup us
    - `NOTION_OAUTH_CLIENT_ID` - OAuth Client ID
    - `NOTION_OAUTH_CLIENT_SECRET` - OAuth Client Secret
 
-Voila! You have successfully enabled the Notion integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in [Notion Integration with Formbricks](/integrations#notion) section to link your Notion with Formbricks.
+Voila! You have successfully enabled the Notion integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in [Notion Integration with Formbricks](/developer-docs/integrations/notion) section to link your Notion with Formbricks.
 
 ## n8n
 
@@ -289,7 +288,7 @@ Once the execution is successful, you'll receive the content in the discord chan
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-Voila! You have successfully enabled the n8n integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Formbricks](/integrations#n8n) Integrations section to know more about the capabilities with Formbricks with n8n.
+Voila! You have successfully enabled the n8n integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Formbricks](/developer-docs/integrations/n8n) Integrations section to know more about the capabilities with Formbricks with n8n.
 
 ## Slack
 
@@ -321,7 +320,7 @@ Enabling the Slack Integration in a self-hosted environment requires a setup usi
 8. Now, you need to enable the public distribution of your app. Go to the **Basic Information** tab and click on the **Manage distribution** button and click on the "Distribute App".
 9. Scroll down to the **Share your app with other workspaces** section, complete the checklist and click on the **Activate public distribution** button.
 
-Voila! You have successfully enabled the Slack integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Slack Integration](/integrations#slack) section to link a Slack workspace with Formbricks.
+Voila! You have successfully enabled the Slack integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Slack Integration](/developer-docs/integrations/slack) section to link a Slack workspace with Formbricks.
 
 ## Zapier
 
@@ -348,7 +347,7 @@ Then, choose the event you want to trigger the Zap on:
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-Now you need an API key. Please refer to the [API Key Setup](/developer-docs/rest-api#api-key) page to learn how to create one.
+Now you need an API key. Please refer to the [API Key Setup](/developer-docs/rest-api##how-to-generate-an-api-key) page to learn how to create one.
 
 Once you copied it in the newly opened Zapier window, you will be connected:
 
@@ -359,6 +358,6 @@ Once you copied it in the newly opened Zapier window, you will be connected:
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-Voila! You have successfully configured Zapier to work with your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Zapier Integration](/integrations#zapier) section to connect it with your Formbricks app and see it live.
+Voila! You have successfully configured Zapier to work with your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Zapier Integration](/developer-docs/integrations/zapier) section to connect it with your Formbricks app and see it live.
 
 ---

apps/docs/app/self-hosting/migration-guide/page.mdx

@@ -8,6 +8,104 @@ export const metadata = {
 
 # Migration Guide
 
+## v2.6
+
+Formbricks v2.6 introduces advanced logic jumps for surveys, allowing you to add more advanced branching logic to your surveys including variables, and/or conditions and many more. This release also includes a lot of bug fixes, big performance improvements to website and app surveys and a lot of stability improvements.
+
+<Note>
+  This release includes the last step of the server-side action tracking deprecation (previously used for
+  segment filtering by performed actions). The migrations included in this release will delete all tracked
+  actions from the database. If you still need these action records, please make sure to export them before
+  upgrading.
+</Note>
+
+### Steps to Migrate
+
+This guide is for users who are self-hosting Formbricks using our one-click setup. If you are using a different setup, you might adjust the commands accordingly.
+
+To run all these steps, please navigate to the `formbricks` folder where your `docker-compose.yml` file is located.
+
+1. **Backup your Database**: This is a crucial step. Please make sure to backup your database before proceeding with the upgrade. You can use the following command to backup your database:
+
+<Col>
+<CodeGroup title="Backup Postgres">
+
+```bash
+docker exec formbricks-postgres-1 pg_dump -Fc -U postgres -d formbricks > formbricks_pre_v2.6_$(date +%Y%m%d_%H%M%S).dump
+```
+
+</CodeGroup>
+</Col>
+
+<Note>
+  If you run into “No such container”, use `docker ps` to find your container name, e.g.
+  `formbricks_postgres_1`.
+</Note>
+
+<Note>
+  If you prefer storing the backup as an `*.sql` file remove the `-Fc` (custom format) option. In case of a
+  restore scenario you will need to use `psql` then with an empty `formbricks` database.
+</Note>
+
+2. Pull the latest version of Formbricks:
+
+<Col>
+<CodeGroup title="Stop the containers">
+
+```bash
+docker compose pull
+```
+
+</CodeGroup>
+</Col>
+
+3. Stop the running Formbricks instance & remove the related containers:
+
+<Col>
+<CodeGroup title="Stop the containers">
+
+```bash
+docker compose down
+```
+
+</CodeGroup>
+</Col>
+
+4. Restarting the containers with the latest version of Formbricks:
+
+<Col>
+<CodeGroup title="Restart the containers">
+
+```bash
+docker compose up -d
+```
+
+</CodeGroup>
+</Col>
+
+5. Now let's migrate the data to the latest schema:
+
+<Note>To find your Docker Network name for your Postgres Database, find it using `docker network ls`</Note>
+
+<Col>
+<CodeGroup title="Migrate the data">
+
+```bash
+docker pull ghcr.io/formbricks/data-migrations:latest && \
+docker run --rm \
+  --network=formbricks_default \
+  -e DATABASE_URL="postgresql://postgres:postgres@postgres:5432/formbricks?schema=public" \
+  -e UPGRADE_TO_VERSION="v2.6" \
+  ghcr.io/formbricks/data-migrations:v2.6.0
+```
+
+</CodeGroup>
+</Col>
+
+The above command will migrate your data to the latest schema. This is a crucial step to migrate your existing data to the new structure. Only if the script runs successful, changes are made to the database. The script can safely run multiple times.
+
+6. That's it! Once the migration is complete, you can **now access your Formbricks instance** at the same URL as before.
+
 ## v2.5
 
 Formbricks v2.5 allows you to visualize responses in a data table format. This release also includes a few bug fixes and performance improvements.
@@ -95,7 +193,7 @@ docker run --rm \
   --network=formbricks_default \
   -e DATABASE_URL="postgresql://postgres:postgres@postgres:5432/formbricks?schema=public" \
   -e UPGRADE_TO_VERSION="v2.5" \
-  ghcr.io/formbricks/data-migrations:latest
+  ghcr.io/formbricks/data-migrations:v2.5.3
 ```
 
 </CodeGroup>

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

@@ -1,132 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import StepOne from "./images/StepOne.webp";
-import StepTwo from "./images/StepTwo.webp";
-
-export const metadata = {
-  title: "Using Actions in Formbricks | Fine-tuning Session Moments",
-  description:
-    "Dive deep into how actions in Formbricks help products and organizations to engage active sessions at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine public facing websites' targeting and generate richer, more detailed insights.",
-};
-
-#### Website Surveys
-
-# Actions
-
-Actions are triggers based on interactions with your website, allowing you to capture feedback precisely when it's most relevant.
-
-<Note>
-  These actions operate **independently** as website surveys do not involve user identification. If you have
-  user identification enabled (you’ve initialized Formbricks with a userId), please refer to the App Surveys
-  Action Guide.
-</Note>
-
-## **How Do Actions Work?**
-
-Actions are predefined events within your website that prompt Formbricks to display a survey when triggered. These are detected by the Formbricks widget, which then presents the appropriate survey based on your predefined settings.
-
-## **Why Are Actions Useful?**
-
-Actions enable surveys to be displayed based on specific site interactions or behaviours, independent of user identity. This approach is perfect for:
-
-- **Public-Facing Websites**: Engage visitors on general content pages where user authentication is not present.
-- **Anonymous User Interactions**: Capture feedback without needing to identify or track individual users, maintaining user privacy and simplicity in data collection.
-
-Using actions to trigger surveys enhances the relevance of survey content to the visitor's current interaction, potentially increasing engagement and the accuracy of feedback.
-
-## **Setting Up No-Code Actions**
-
-Formbricks provides an intuitive No-Code interface for configuring actions, enabling surveys to be triggered by various interactions on your website. To add a No-Code Action:
-
-1. Visit the Formbricks Dashboard & switch to the Actions tab:
-
-   <MdxImage
-     src={StepOne}
-     alt="Choose a link survey template"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />
-
-2. Now click on “Add Action”
-
-   <MdxImage
-     src={StepTwo}
-     alt="Choose a link survey template"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />
-
-Here are four types of No-Code actions you can set up:
-
-### **1. Click Action**
-
-Click Action is triggered when a user clicks on a specific element within your application. You can define the element's inner text or CSS selector to trigger the survey.
-
-- **Inner Text**: Checks if the innerText of a clicked HTML element, like a button label, matches a specific text. This action allows you to display a survey based on text interactions within your application.
-
-- **CSS Selector**: Verifies if a clicked HTML element matches a provided CSS selector, such as a class, ID, or any other CSS selector used in your website. It enables survey triggers based on element interactions.
-
-### **2. Page view Action**
-
-This action is triggered when a user visits a page within your application.
-
-### **3. Exit Intent Action**
-
-This action is triggered when a user is about to leave your application. It helps capture user feedback before they exit, providing valuable insights into user experiences and potential improvements.
-
-### **4. 50% Scroll Action**
-
-This action is triggered when a user scrolls through 50% of a page within your application. It helps capture user feedback at a specific point in their journey, enabling you to gather insights based on user interactions.
-
-This action is triggered when a user visits a specific page within your application. You can define the URL match conditions as follows:
-
-<Note>
-You can combine the url filters with any of the no-code actions to trigger the survey based on the URL match conditions.
-
-### **URL Match Conditions**
-
-- **exactMatch**: Triggers the action when the URL exactly matches the specified string.
-- **contains**: Activates when the URL contains the specified substring.
-- **startsWith**: Fires when the URL starts with the specified string.
-- **endsWith**: Executes when the URL ends with the specified string.
-- **notMatch**: Triggers when the URL does not match the specified condition.
-- **notContains**: Activates when the URL does not contain the specified substring.
-
-</Note>
-
-## **Setting Up Code Actions**
-
-For enhanced customization, actions can also be implemented directly through code:
-
-1. **Configure the Action**: First, add the action via the Formbricks web interface to link it with the desired survey.
-2. **Track an Action**: Use the **`formbricks.track()`** function to activate the survey from your website's frontend.
-
-<Col>
-<CodeGroup title="Example of tracking an action">
-
-```jsx
-formbricks.track("Action Name");
-```
-
-</CodeGroup>
-</Col>
-
-**Example - Tracking a Button Click**:
-
-<Col>
-<CodeGroup title="Example: Button Click Action">
-
-```jsx
-const handleClick = () => {
-  formbricks.track("Button Clicked");
-};
-return <button onClick={handleClick}>Click Me</button>;
-
-```
-
-</CodeGroup>
-</Col>
-
-## **Conclusion**
-
-Using generic actions to trigger surveys on your website provides a straightforward and effective method to engage visitors and gather feedback. This approach is especially valuable for public-facing websites and pages where user authentication barriers are absent, allowing for broad interaction and feedback collection without the complexities of user identification.

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

@@ -1,60 +0,0 @@
-import { Button } from "@/components/Button";
-import logoHtml from "@/images/frameworks/html5.svg";
-import logoNextjs from "@/images/frameworks/nextjs.svg";
-import logoReactJs from "@/images/frameworks/reactjs.svg";
-import logoVueJs from "@/images/frameworks/vuejs.svg";
-import Image from "next/image";
-
-const libraries = [
-  {
-    href: "#html",
-    name: "HTML",
-    description: "All you need to do is add 3 lines of code to your HTML script and thats it, you're done!",
-    logo: logoHtml,
-  },
-  {
-    href: "#react-js",
-    name: "React.js",
-    description: "Load the our Js library with your environment ID and you're ready to go!",
-    logo: logoReactJs,
-  },
-  {
-    href: "#next-js",
-    name: "Next.js",
-    description:
-      "Natively add us to your NextJs project with support for both App as well as Pages project structure!",
-    logo: logoNextjs,
-  },
-  {
-    href: "#vue-js",
-    name: "Vue.js",
-    description: "Simply add us to your router change and sit back!",
-    logo: logoVueJs,
-  },
-];
-
-export const 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">
-        {libraries.map((library) => (
-          <a
-            key={library.name}
-            href={library.href}
-            className="flex flex-row-reverse gap-6 rounded-2xl p-6 transition-all duration-100 ease-in-out hover:cursor-pointer hover:bg-slate-100/50 dark:hover:bg-slate-800/50">
-            <div className="flex-auto">
-              <h3 className="text-sm font-semibold text-slate-900 dark:text-white">{library.name}</h3>
-              <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">{library.description}</p>
-              <p className="mt-4">
-                <Button href={library.href} variant="text" arrow="right">
-                  Read more
-                </Button>
-              </p>
-            </div>
-            <Image src={library.logo} alt="" className="h-12 w-12" unoptimized />
-          </a>
-        ))}
-      </div>
-    </div>
-  );
-};

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

@@ -1,404 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import { Libraries } from "./components/Libraries";
-
-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";
-
-export const metadata = {
-  title: "Integrate Formbricks Website Surveys: Comprehensive Framework Guide & Integration Tutorial",
-  description:
-    "Master the integration of Formbricks Website Surveys into your application with our detailed guides. From HTML to ReactJS, NextJS, and VueJS, get step-by-step instructions and ensure seamless setup.",
-};
-
-#### Website Surveys
-
-# Framework Guides
-
-One can integrate Formbricks Website Survey SDK into their app using multiple options! Checkout the options below that we provide! If you are looking
-for something else, please [join our Discord!](https://formbricks.com/discord) and we would be glad to help.
-
-Detailed Website Survey SDK documentation can be found [here](/developer-docs/website-survey-sdk).
-
-<Libraries />
-
----
-
-## Prerequisites
-
-Before getting started, make sure you have:
-
-1. A **public-facing** 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.
-
----
-
-## HTML
-
-All you need to do is copy a `<script>` tag to your HTML head, and that’s about it!
-
-<Col>
-<CodeGroup title="HTML">
-```html {{ title: 'index.html' }}
-<!-- START Formbricks Surveys -->
-<script type="text/javascript">
-!function(){
-    var apiHost = "https://app.formbricks.com";
-    var environmentId = "<your-environment-id>";
-    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=apiHost+"/api/packages/website";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: environmentId, apiHost: apiHost})},500)}();
-</script>
-<!-- END Formbricks Surveys -->
-```
-</CodeGroup>
-</Col>
-### Required customizations to be made
-
-<Properties>
-  <Property name="environment-id" type="string">
-    Formbricks Environment ID.
-  </Property>
-</Properties>
-<Properties>
-  <Property name="api-host" type="string">
-    URL of the hosted Formbricks instance.
-  </Property>
-</Properties>
-
-Refer to our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
-
----
-
-## ReactJS
-
-Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`. Note that zod is required as a peer dependency and must also be installed in your project.
-
-<Col>
-<CodeGroup title="Install Formbricks JS library">
-```shell {{ title: 'npm' }}
-npm install @formbricks/js zod
-```
-```shell {{ title: 'pnpm' }}
-pnpm add @formbricks/js zod
-```
-```shell {{ title: 'yarn' }}
-yarn add @formbricks/js zod
-```
-
-</CodeGroup>
-</Col>
-Now, update your App.js/ts file to initialise Formbricks.
-<Col>
-<CodeGroup title="src/App.js">
-
-```js
-// other imports
-import formbricks from "@formbricks/js/website";
-
-if (typeof window !== "undefined") {
-  formbricks.init({
-    environmentId: "<environment-id>",
-    apiHost: "<api-host>",
-  });
-}
-
-function App() {
-  // your own app
-}
-
-export default App;
-```
-
-</CodeGroup>
-</Col>
-### Required customizations to be made
-
-<Properties>
-  <Property name="environment-id" type="string">
-    Formbricks Environment ID.
-  </Property>
-</Properties>
-<Properties>
-  <Property name="api-host" type="string">
-    URL of the hosted Formbricks instance.
-  </Property>
-</Properties>
-
-Refer to our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#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.
-
-<Col>
-<CodeGroup title="Install Formbricks JS library">
-```shell {{ title: 'npm' }}
-npm install @formbricks/js zod
-```
-```shell {{ title: 'pnpm' }}
-pnpm add @formbricks/js zod
-```
-```shell {{ title: 'yarn' }}
-yarn add @formbricks/js zod
-```
-
-</CodeGroup>
-</Col>
-
-### App Directory
-
-<Col>
-<CodeGroup title="app/formbricks.tsx">
-
-```tsx {{title: 'Typescript'}}
-"use client";
-
-import { usePathname, useSearchParams } from "next/navigation";
-import { useEffect } from "react";
-import formbricks from "@formbricks/js/website";
-
-export default function FormbricksProvider() {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  useEffect(() => {
-    formbricks.init({
-      environmentId: "<environment-id>",
-      apiHost: "<api-host>",
-    });
-  }, []);
-
-  useEffect(() => {
-    formbricks?.registerRouteChange();
-  }, [pathname, searchParams]);
-
-  return null;
-}
-```
-
-</CodeGroup>
-
-<CodeGroup title="app/layout.tsx">
-```tsx {{title: 'Typescript'}}
-// other imports
-import FormbricksProvider from "./formbricks";
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <FormbricksProvider />
-      <body>{children}</body>
-    </html>
-  );
-}
-```
-
-</CodeGroup>
-</Col>
-
-Refer to our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
-
-### Pages Directory
-
-<Col>
-<CodeGroup title="src/pages/_app.tsx">
-
-```tsx {{ title: 'Typescript' }}
-// other import
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import formbricks from "@formbricks/js/website";
-
-if (typeof window !== "undefined") {
-  formbricks.init({
-    environmentId: "<environment-id>",
-    apiHost: "<api-host>",
-  });
-}
-
-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} />;
-}
-```
-
-</CodeGroup>
-</Col>
-Refer to our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
-
-### Required customizations to be made
-
-<Properties>
-  <Property name="environment-id" type="string">
-    Formbricks Environment ID.
-  </Property>
-</Properties>
-<Properties>
-  <Property name="api-host" type="string">
-    URL of the hosted Formbricks instance.
-  </Property>
-</Properties>
-
-First initialize the Formbricks SDK, ensure that 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](#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.
-
-<Col>
-<CodeGroup title="Install Formbricks JS library">
-```shell {{ title: 'npm' }}
-npm install @formbricks/js
-```
-
-```shell {{ title: 'pnpm' }}
-pnpm add @formbricks/js
-```
-
-```shell {{ title: 'yarn' }}
-yarn add @formbricks/js
-```
-
-</CodeGroup>
-
-<CodeGroup title="src/formbricks.js">
-
-```js
-import formbricks from "@formbricks/js/website";
-
-if (typeof window !== "undefined") {
-  formbricks.init({
-    environmentId: "<environment-id>",
-    apiHost: "<api-host>",
-  });
-}
-
-export default formbricks;
-```
-
-</CodeGroup>
-
-<CodeGroup title="src/main.js">
-
-```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();
-  }
-});
-```
-
-</CodeGroup>
-</Col>
-### Required customizations to be made
-
-<Properties>
-  <Property name="environment-id" type="string">
-    Formbricks Environment ID.
-  </Property>
-</Properties>
-<Properties>
-  <Property name="api-host" type="string">
-    URL of the hosted Formbricks instance.
-  </Property>
-</Properties>
-
-Refer to our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#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:
-
-<MdxImage
-  src={WidgetNotConnected}
-  alt="Widget isnt connected"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-To this:
-
-<MdxImage
-  src={WidgetConnected}
-  alt="Widget is connected"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-## 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. **Via URL Parameter:**
-
-   - Enable debug mode mode by adding `?formbricksDebug=true` to your application's URL (e.g. `https://example.com?formbricksDebug=true` or `https://example.com?page=123&formbricksDebug=true`). This parameter will enable debugging for the current page.
-
-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.
-
-### Common Use Cases
-
-Debug mode is beneficial for scenarios such as:
-
-- Verifying Formbricks initialization.
-- Identifying survey trigger issues.
-- Troubleshooting unexpected behavior.
-
-### Debug Log Messages
-
-Debug log messages provide insights into:
-
-- API calls and responses.
-- Event tracking, survey triggers and form interactions.
-- Initialization errors.
-
-**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**
-
----