fix shuffle in ranking question

packages/ui/components/ShuffleOptionSelect
which is imported in MatrixQuestionForm, MultipleChoiceQuestionForm,
RankingQuestionForm

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@formbricks/demo", "@formbricks/web"]
+  "ignore": ["@formbricks/formbricks-com", "@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 && sed -i '/^CRON_SECRET=/c\\CRON_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 && 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.

.github/workflows/build-docs.yml

@@ -1,28 +0,0 @@
-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/pr.yml

@@ -50,13 +50,6 @@ 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]
@@ -66,7 +59,7 @@ jobs:
 
   required:
     name: PR Check Summary
-    needs: [lint, test, build, e2e-test, docs]
+    needs: [lint, test, build, e2e-test]
     if: always()
     runs-on: ubuntu-latest
     steps:

.gitignore

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

.gitpod.yml

@@ -10,6 +10,9 @@ 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,5 +5,4 @@ shared-workspace-shrinkwrap = true
 access = public
 enable-pre-post-scripts = true
 legacy-peer-deps=true
-node-linker=hoisted
-save-exact=true
+node-linker=hoisted

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/developer-docs/contributing/get-started) but will help you save hours 🤓
+1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/contributing/how-we-code) but will help you save hours 🤓
 
-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. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/contributing/gitpod)
 
 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/" & "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/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/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,7 +1,5 @@
 <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.3.1",
-    "react-native": "0.74.4",
+    "expo": "^51.0.26",
+    "expo-status-bar": "~1.12.1",
+    "react": "^18.2.0",
+    "react-native": "^0.74.4",
     "react-native-webview": "13.8.6"
   },
   "devDependencies": {
-    "@babel/core": "7.25.2",
-    "@types/react": "18.3.11",
-    "typescript": "5.3.3"
+    "@babel/core": "^7.25.2",
+    "@types/react": "~18.2.79",
+    "typescript": "^5.3.3"
   },
   "private": true
 }

apps/demo/components/SurveySwitch.tsx

@@ -0,0 +1,22 @@
+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/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/demo/next.config.mjs

@@ -1,5 +1,15 @@
 /** @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 --turbo",
+    "go": "next dev -p 3002",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -13,8 +13,8 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@formbricks/ui": "workspace:*",
-    "lucide-react": "0.452.0",
-    "next": "14.2.15",
+    "lucide-react": "^0.418.0",
+    "next": "14.2.5",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

apps/demo/pages/app/index.tsx

@@ -1,8 +1,9 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import formbricks from "@formbricks/js";
-import fbsetup from "../public/fb-setup.png";
+import formbricks from "@formbricks/js/app";
+import { SurveySwitch } from "../../components/SurveySwitch";
+import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
@@ -62,6 +63,7 @@ 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

@@ -0,0 +1,143 @@
+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,6 +9,8 @@ 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,6 +4,8 @@ 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>"; //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)}();
+    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)}();
 </script>
 <!-- END Formbricks Surveys -->
 ```
@@ -58,6 +58,9 @@ 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!
@@ -88,13 +91,13 @@ Now, update your App.js/ts file to initialise Formbricks.
 
 ```js
 // other imports
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>", //optional
+    userId: "<user-id>",
   });
 }
 
@@ -116,6 +119,9 @@ 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!
@@ -158,7 +164,7 @@ yarn add @formbricks/js zod
 
 import { usePathname, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 
 export default function FormbricksProvider() {
   const pathname = usePathname();
@@ -168,7 +174,7 @@ export default function FormbricksProvider() {
     formbricks.init({
       environmentId: "<environment-id>",
       apiHost: "<api-host>",
-      userId: "<user-id>", //optional
+      userId: "<user-id>",
     });
   }, []);
 
@@ -211,13 +217,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";
+import formbricks from "@formbricks/js/app";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>", //optional
+    userId: "<user-id>",
   });
 }
 
@@ -250,6 +256,9 @@ 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.
@@ -283,13 +292,13 @@ yarn add @formbricks/js
 <CodeGroup title="src/formbricks.js">
 
 ```js
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>", //optional
+    userId: "<user-id>",
   });
 }
 
@@ -330,6 +339,9 @@ 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!
@@ -387,6 +399,9 @@ 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,7 +3,6 @@ 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";
@@ -16,41 +15,44 @@ 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!
 
-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:
+<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>
 
 <MdxImage
   src={I1}
-  alt="Choose Formbricks Surveys"
+  alt="Choose website survey from survey type"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-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.
+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:
 
 <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 a message being displayed that your app or website is now connected with formbricks.
+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.
 
 <MdxImage
-  src={I3_1}
+  src={I3}
   alt="App connected with Formbricks"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
@@ -65,7 +67,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"
 />
 
-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:
+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:
 
 Pick the Survey Type as **App Survey**.
 
@@ -76,7 +78,7 @@ Pick the Survey Type as **App Survey**.
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-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:
+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:
 
 <MdxImage
   src={I6}
@@ -85,7 +87,7 @@ Pick the Survey Type as **App Survey**.
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-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:
+5. **Set Recontact Options for debugging**: In Recontact Options we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once to each user to prevent survey fatigue:
 
 <Note>
   Please change this setting later on after testing your survey to prevent survey fatigue for your users.
@@ -98,7 +100,7 @@ Pick the Survey Type as **App Survey**.
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-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.
+6. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey.
 
 <MdxImage
   src={I8}
@@ -109,7 +111,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-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).
+- 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).
 
 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,6 +11,8 @@ 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,12 +4,19 @@ 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

@@ -1,169 +0,0 @@
-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.
+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.
 
 3. Write the frontend code for the widget. Here is the full component (we break it down right below):
 

apps/docs/app/developer-docs/app-survey-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 JS SDK",
+  title: "Formbricks App Survey SDK",
   description:
-    "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.",
+    "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.",
 };
 
 #### Developer Docs
 
-# SDK: Run Surveys Inside Your Web Apps and Websites
+# SDK: Run Surveys Inside Your Web Apps
 
 ### Overview
 
-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/).
+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/).
 
 ### Install
 
@@ -42,7 +42,7 @@ pnpm add @formbricks/js
 
 ### Initialize Formbricks
 
-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`.
+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.
 
 <Col>
 <CodeGroup title="Initialize Formbricks">
@@ -53,7 +53,7 @@ import formbricks from "@formbricks/js/app";
 formbricks.init({
   environmentId: "<your-environment-id>", // required
   apiHost: "<your-api-host>", // required
-  userId: "<user-id>", // optional
+  userId: "<user-id>", // required
 });
 ```
 
@@ -73,7 +73,7 @@ if (window !== undefined) {
   formbricks.init({
     environmentId: "<your-environment-id>",
     apiHost: "<your-api-host>",
-    userId: "<user-id>", //optional
+    userId: "<user-id>",
   });
 } else {
   console.error("Window object not accessible to init Formbricks");
@@ -87,7 +87,7 @@ if (window !== undefined) {
 
 ### Set Attribute
 
-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).
+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).
 
 <Col>
 <CodeGroup>

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="/self-hosting/deployment" className="text-brand-dark dark:text-brand-light">
+        <a href="/docs/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](/developer-docs/contributing/gitpod)
-- [GitHub Codespaces](/developer-docs/contributing/codespaces)
+- [Gitpod](/docs/developer-docs/contributing/gitpod)
+- [GitHub Codespaces](/docs/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.

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: Formbricks JS](/developer-docs/js-sdk)
+### [SDK: Web Apps](/developer-docs/app-survey-sdk)
 
-The Formbricks JS SDK is a versatile solution for both web apps and public websites. It adapts based on how you provide user information.
+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.
 
-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.
+### [SDK: Public Websites](/developer-docs/website-survey-sdk)
 
-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.
+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.
 
 ### [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/get-started)
+### [Contributing to Formbricks](/developer-docs/contributing)
 
 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/hidden-fields/page.mdx

@@ -14,6 +14,8 @@ 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/self-hosting/migration-guide/page.mdx

@@ -8,104 +8,6 @@ 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.
@@ -193,7 +95,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:v2.5.3
+  ghcr.io/formbricks/data-migrations:latest
 ```
 
 </CodeGroup>

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

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,404 @@
+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)**
+
+---

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

@@ -0,0 +1,115 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import I1 from "./images/I1.webp";
+import I2 from "./images/I2.webp";
+import I3 from "./images/I3.webp";
+import I4 from "./images/I4.webp";
+import I5 from "./images/I5.webp";
+import I6 from "./images/I6.webp";
+import I7 from "./images/I7.webp";
+import I8 from "./images/I8.webp";
+
+export const metadata = {
+  title: "Formbricks Quickstart Guide: Website Surveys Made Easier & Faster",
+  description:
+    "Formbricks is the easiest way to create and manage website surveys. This quickstart guide will show you how to create your first website survey in under 5 minutes.",
+};
+
+#### Website Surveys
+
+# Quickstart
+
+Website Surveys make it easy for your public website visitors to give you feedback. They are a great way to get feedback from your users, without interrupting their workflow. This quickstart guide will show you how to create your first website survey in under 5 minutes.
+
+<Note>
+  Website Surveys are ideal for **public facing websites**. If you are looking to run surveys in your app where you have user identification & want advanced user targeting, head over to the [App Surveys Quickstart Guide](/app-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>
+
+<MdxImage
+  src={I1}
+  alt="Choose website survey from survey type"
+  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:
+
+<MdxImage
+  src={I2}
+  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.
+
+<MdxImage
+  src={I3}
+  alt="App connected with Formbricks"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Onboarding is complete! Now let’s create our first survey as you should see templates to choose from after clicking on **Next**:
+
+<MdxImage
+  src={I4}
+  alt="Choose a survey template"
+  quality="100"
+  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:
+
+Pick the Survey Type as **Website Survey**.
+
+<MdxImage
+  src={I5}
+  alt="Survey settings for app survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+1. **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 session:
+
+<MdxImage
+  src={I6}
+  alt="Survey trigger settings for app survey"
+  quality="100"
+  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 for each session to prevent survey fatigue:
+
+<Note>
+  Please change this setting later on after testing your survey to prevent survey fatigue for your users.
+</Note>
+
+<MdxImage
+  src={I7}
+  alt="Recontact options for app survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+6. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey.
+
+<MdxImage
+  src={I8}
+  alt="Survey published successfully"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+---
+
+- We offer framework guides for various frontend tech, head over to the the [Website Survey Framework Guides](/website-survey/framework-guides) to get started with your public facing website surveys.
+- Head over to our Website Survey SDK documentation to get started with the [Website Survey JS SDK](/developer-docs/website-survey-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/components/Header.tsx

@@ -3,7 +3,7 @@
 import { Logo } from "@/components/Logo";
 import { Search } from "@/components/Search";
 import clsx from "clsx";
-import { type MotionStyle, motion, useScroll, useTransform } from "framer-motion";
+import { motion, useScroll, useTransform } from "framer-motion";
 import Link from "next/link";
 import { forwardRef } from "react";
 import { Button } from "./Button";
@@ -46,7 +46,7 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
         {
           "--bg-opacity-light": bgOpacityLight,
           "--bg-opacity-dark": bgOpacityDark,
-        } as MotionStyle
+        } as React.CSSProperties
       }>
       <div
         className={clsx(

apps/docs/components/Navigation.tsx

@@ -7,7 +7,7 @@ import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Button } from "./Button";
 import { useIsInsideMobileNavigation } from "./MobileNavigation";
 import { useSectionStore } from "./SectionProvider";
@@ -158,17 +158,13 @@ const NavigationGroup = ({
 }) => {
   const isInsideMobileNavigation = useIsInsideMobileNavigation();
   const pathname = usePathname();
-  const [isActiveGroup, setIsActiveGroup] = useState<boolean>(false);
-
-  useEffect(() => {
-    setIsActiveGroup(activeGroup?.title === group.title);
-  }, [activeGroup?.title, group.title]);
+  const isActiveGroup = activeGroup?.title === group.title;
 
   const toggleParentTitle = (title: string) => {
     if (openGroups.includes(title)) {
       setOpenGroups(openGroups.filter((t) => t !== title));
     } else {
-      setOpenGroups([title]);
+      setOpenGroups([...openGroups, title]);
     }
     setActiveGroup(group);
   };
@@ -197,11 +193,7 @@ const NavigationGroup = ({
         </AnimatePresence>
         <ul role="list" className="border-l border-transparent">
           {sortedLinks.map((link) => (
-            <motion.li
-              key={link.title}
-              layout="position"
-              className="relative"
-              onClick={() => setIsActiveGroup(true)}>
+            <motion.li key={link.title} layout="position" className="relative">
               {link.href ? (
                 <NavLink
                   href={isMobile && link.children ? "" : link.href}
@@ -209,19 +201,19 @@ const NavigationGroup = ({
                   {link.title}
                 </NavLink>
               ) : (
-                <div onClick={() => toggleParentTitle(`${group.title}-${link.title}`)}>
+                <div onClick={() => toggleParentTitle(link.title)}>
                   <NavLink
                     href={!isMobile ? link.children?.[0]?.href || "" : undefined}
                     active={
                       !!(
-                        isParentOpen(`${group.title}-${link.title}`) &&
+                        isParentOpen(link.title) &&
                         link.children &&
                         link.children.some((child) => pathname.startsWith(child.href))
                       )
                     }>
                     <span className="flex w-full justify-between">
                       {link.title}
-                      {isParentOpen(`${group.title}-${link.title}`) ? (
+                      {isParentOpen(link.title) ? (
                         <ChevronUpIcon className="my-1 h-4" />
                       ) : (
                         <ChevronDownIcon className="my-1 h-4" />
@@ -231,7 +223,7 @@ const NavigationGroup = ({
                 </div>
               )}
               <AnimatePresence mode="popLayout" initial={false}>
-                {isActiveGroup && link.children && isParentOpen(`${group.title}-${link.title}`) && (
+                {isActiveGroup && link.children && isParentOpen(link.title) && (
                   <motion.ul
                     role="list"
                     initial={{ opacity: 0 }}

apps/docs/lib/navigation.ts

@@ -18,7 +18,58 @@ export const navigation: Array<NavGroup> = [
           { title: "Feedback Box", href: "/best-practices/feedback-box" },
           { title: "Docs Feedback", href: "/best-practices/docs-feedback" },
           { title: "Improve Email Content", href: "/best-practices/improve-email-content" },
-          { title: "Contact Form", href: "/best-practices/contact-form" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "App Surveys",
+    links: [
+      { title: "Quickstart", href: "/app-surveys/quickstart" },
+      { title: "Framework Guides", href: "/app-surveys/framework-guides" },
+      {
+        title: "Features",
+        children: [
+          { title: "Identify Users", href: "/app-surveys/user-identification" },
+          { title: "Actions", href: "/app-surveys/actions" },
+          { title: "Advanced Targeting", href: "/app-surveys/advanced-targeting" },
+          { title: "Show Survey to % of users", href: "/global/show-survey-to-percent-of-users" }, // app and website
+          { title: "Recontact Options", href: "/app-surveys/recontact" },
+          { title: "Hidden Fields", href: "/global/hidden-fields" }, // global
+          { title: "Multi Language Surveys", href: "/global/multi-language-surveys" }, // global
+          { title: "User Metadata", href: "/global/metadata" }, // global
+          { title: "Custom Styling", href: "/global/overwrite-styling" }, // global
+          { title: "Conditional Logic", href: "/global/conditional-logic" }, // global
+          { title: "Start & End Dates", href: "/global/custom-start-end-conditions" }, // global
+          { title: "Limit submissions", href: "/global/limit-submissions" }, // global
+          { title: "Recall Functionality", href: "/global/recall" }, // global
+          { title: "Partial Submissions", href: "/global/partial-submissions" }, // global
+          { title: "Shareable Dashboards", href: "/global/shareable-dashboards" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Website Surveys",
+    links: [
+      { title: "Quickstart", href: "/website-surveys/quickstart" },
+      { title: "Framework Guides", href: "/website-surveys/framework-guides" },
+      {
+        title: "Features",
+        children: [
+          { title: "Actions", href: "/website-surveys/actions" },
+          { title: "Show Survey to % of users", href: "/global/show-survey-to-percent-of-users" }, // app and website
+          { title: "Recontact Options", href: "/app-surveys/recontact" },
+          { title: "Hidden Fields", href: "/global/hidden-fields" }, // global
+          { title: "Multi Language Surveys", href: "/global/multi-language-surveys" }, // global
+          { title: "User Metadata", href: "/global/metadata" }, // global
+          { title: "Custom Styling", href: "/global/overwrite-styling" }, // global
+          { title: "Conditional Logic", href: "/global/conditional-logic" }, // global
+          { title: "Start & End Dates", href: "/global/custom-start-end-conditions" }, // global
+          { title: "Limit submissions", href: "/global/limit-submissions" }, // global
+          { title: "Recall Functionality", href: "/global/recall" }, // global
+          { title: "Partial Submissions", href: "/global/partial-submissions" }, // global
+          { title: "Shareable Dashboards", href: "/global/shareable-dashboards" },
         ],
       },
     ],
@@ -43,7 +94,7 @@ export const navigation: Array<NavGroup> = [
           { title: "Custom Styling", href: "/global/overwrite-styling" }, // global
           { title: "Conditional Logic", href: "/global/conditional-logic" },
           { title: "Shareable Dashboards", href: "/global/shareable-dashboards" },
-          { title: "Start & End Dates", href: "/global/schedule-start-end-dates" },
+          { title: "Start & End Dates", href: "/global/custom-start-end-conditions" },
           { title: "Limit submissions", href: "/global/limit-submissions" }, // global
           { title: "Recall Functionality", href: "/global/recall" },
           { title: "Verify Email before Survey", href: "/link-surveys/verify-email-before-survey" },
@@ -53,50 +104,9 @@ export const navigation: Array<NavGroup> = [
       },
     ],
   },
-  {
-    title: "Website & App Surveys",
-    links: [
-      { title: "Quickstart", href: "/app-surveys/quickstart" },
-      { title: "Framework Guides", href: "/app-surveys/framework-guides" },
-      {
-        title: "Features",
-        children: [
-          { title: "Identify Users", href: "/app-surveys/user-identification" },
-          { title: "Actions", href: "/app-surveys/actions" },
-          { title: "Advanced Targeting", href: "/app-surveys/advanced-targeting" },
-          { title: "Show Survey to % of users", href: "/global/show-survey-to-percent-of-users" }, // app and website
-          { title: "Recontact Options", href: "/app-surveys/recontact" },
-          { title: "Hidden Fields", href: "/global/hidden-fields" }, // global
-          { title: "Multi Language Surveys", href: "/global/multi-language-surveys" }, // global
-          { title: "User Metadata", href: "/global/metadata" }, // global
-          { title: "Custom Styling", href: "/global/overwrite-styling" }, // global
-          { title: "Conditional Logic", href: "/global/conditional-logic" }, // global
-          { title: "Start & End Dates", href: "/global/schedule-start-end-dates" }, // global
-          { title: "Limit submissions", href: "/global/limit-submissions" }, // global
-          { title: "Recall Functionality", href: "/global/recall" }, // global
-          { title: "Partial Submissions", href: "/global/partial-submissions" }, // global
-          { title: "Shareable Dashboards", href: "/global/shareable-dashboards" },
-        ],
-      },
-    ],
-  },
   {
     title: "Core Features",
     links: [
-      {
-        title: "Integrations",
-        children: [
-          { title: "Overview", href: "/developer-docs/integrations/overview" },
-          { title: "Airtable", href: "/developer-docs/integrations/airtable" },
-          { title: "Google Sheets", href: "/developer-docs/integrations/google-sheets" },
-          { title: "Make", href: "/developer-docs/integrations/make" },
-          { title: "n8n", href: "/developer-docs/integrations/n8n" },
-          { title: "Notion", href: "/developer-docs/integrations/notion" },
-          { title: "Slack", href: "/developer-docs/integrations/slack" },
-          { title: "Wordpress", href: "/developer-docs/integrations/wordpress" },
-          { title: "Zapier", href: "/developer-docs/integrations/zapier" },
-        ],
-      },
       { title: "Access Roles", href: "/global/access-roles" },
       { title: "Styling Theme", href: "/global/styling-theme" },
     ],
@@ -118,7 +128,22 @@ export const navigation: Array<NavGroup> = [
     title: "Developer Docs",
     links: [
       { title: "Overview", href: "/developer-docs/overview" },
-      { title: "SDK: Formbricks JS", href: "/developer-docs/js-sdk" },
+      {
+        title: "Integrations",
+        children: [
+          { title: "Overview", href: "/developer-docs/integrations/overview" },
+          { title: "Airtable", href: "/developer-docs/integrations/airtable" },
+          { title: "Google Sheets", href: "/developer-docs/integrations/google-sheets" },
+          { title: "Make", href: "/developer-docs/integrations/make" },
+          { title: "n8n", href: "/developer-docs/integrations/n8n" },
+          { title: "Notion", href: "/developer-docs/integrations/notion" },
+          { title: "Slack", href: "/developer-docs/integrations/slack" },
+          { title: "Wordpress", href: "/developer-docs/integrations/wordpress" },
+          { title: "Zapier", href: "/developer-docs/integrations/zapier" },
+        ],
+      },
+      { title: "SDK: Web Apps", href: "/developer-docs/app-survey-sdk" },
+      { title: "SDK: Public Websites", href: "/developer-docs/website-survey-sdk" },
       { title: "SDK: React Native", href: "/developer-docs/react-native-in-app-surveys" },
       { title: "SDK: Formbricks API", href: "/developer-docs/api-sdk" },
       { title: "REST API", href: "/developer-docs/rest-api" },

apps/docs/next.config.mjs

@@ -121,22 +121,6 @@ const nextConfig = {
         destination: "/developer-docs/integrations/:path",
         permanent: true,
       },
-
-      {
-        source: "/developer-docs/website-survey-sdk",
-        destination: "/developer-docs/js-sdk",
-        permanent: true,
-      },
-      {
-        source: "/website-surveys/quickstart",
-        destination: "/app-surveys/quickstart",
-        permanent: true,
-      },
-      {
-        source: "/website-surveys/framework-guides",
-        destination: "/app-surveys/framework-guides",
-        permanent: true,
-      },
     ];
   },
 };

apps/docs/package.json

@@ -12,62 +12,62 @@
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "@algolia/autocomplete-core": "1.17.4",
-    "@calcom/embed-react": "1.5.1",
+    "@algolia/autocomplete-core": "^1.17.4",
+    "@calcom/embed-react": "^1.5.0",
     "@docsearch/css": "3",
-    "@docsearch/react": "3.6.2",
+    "@docsearch/react": "^3.6.1",
     "@formbricks/lib": "workspace:*",
     "@formbricks/types": "workspace:*",
     "@formbricks/ui": "workspace:*",
-    "@headlessui/react": "2.1.9",
-    "@headlessui/tailwindcss": "0.2.1",
-    "@mapbox/rehype-prism": "0.9.0",
-    "@mdx-js/loader": "3.0.1",
-    "@mdx-js/react": "3.0.1",
-    "@next/mdx": "14.2.15",
-    "@paralleldrive/cuid2": "2.2.2",
-    "@sindresorhus/slugify": "2.2.1",
-    "@tailwindcss/typography": "0.5.15",
-    "acorn": "8.12.1",
-    "autoprefixer": "10.4.20",
-    "clsx": "2.1.1",
-    "fast-glob": "3.3.2",
-    "flexsearch": "0.7.43",
-    "framer-motion": "11.11.4",
-    "lottie-web": "5.12.2",
-    "lucide": "0.451.0",
-    "lucide-react": "0.452.0",
-    "mdast-util-to-string": "4.0.0",
-    "mdx-annotations": "0.1.4",
-    "next": "14.2.15",
-    "next-plausible": "3.12.2",
-    "next-seo": "6.6.0",
-    "next-sitemap": "4.2.3",
-    "next-themes": "0.3.0",
-    "node-fetch": "3.3.2",
-    "prism-react-renderer": "2.4.0",
-    "prismjs": "1.29.0",
+    "@headlessui/react": "^2.1.2",
+    "@headlessui/tailwindcss": "^0.2.1",
+    "@mapbox/rehype-prism": "^0.9.0",
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "14.2.5",
+    "@paralleldrive/cuid2": "^2.2.2",
+    "@sindresorhus/slugify": "^2.2.1",
+    "@tailwindcss/typography": "^0.5.13",
+    "acorn": "^8.12.1",
+    "autoprefixer": "^10.4.19",
+    "clsx": "^2.1.1",
+    "fast-glob": "^3.3.2",
+    "flexsearch": "^0.7.43",
+    "framer-motion": "11.3.20",
+    "lottie-web": "^5.12.2",
+    "lucide": "^0.418.0",
+    "lucide-react": "^0.418.0",
+    "mdast-util-to-string": "^4.0.0",
+    "mdx-annotations": "^0.1.4",
+    "next": "14.2.5",
+    "next-plausible": "^3.12.0",
+    "next-seo": "^6.5.0",
+    "next-sitemap": "^4.2.3",
+    "next-themes": "^0.3.0",
+    "node-fetch": "^3.3.2",
+    "prism-react-renderer": "^2.3.1",
+    "prismjs": "^1.29.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-highlight-words": "0.20.0",
-    "react-markdown": "9.0.1",
-    "react-responsive-embed": "2.1.0",
-    "remark": "15.0.1",
-    "remark-gfm": "4.0.0",
-    "remark-mdx": "3.0.1",
-    "schema-dts": "1.1.2",
-    "sharp": "0.33.5",
-    "shiki": "0.14.7",
-    "simple-functional-loader": "1.2.1",
-    "tailwindcss": "3.4.13",
-    "unist-util-filter": "5.0.1",
-    "unist-util-visit": "5.0.0",
-    "zustand": "4.5.5"
+    "react-highlight-words": "^0.20.0",
+    "react-markdown": "^9.0.1",
+    "react-responsive-embed": "^2.1.0",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.0",
+    "remark-mdx": "^3.0.1",
+    "schema-dts": "^1.1.2",
+    "sharp": "^0.33.4",
+    "shiki": "^0.14.7",
+    "simple-functional-loader": "^1.2.1",
+    "tailwindcss": "^3.4.7",
+    "unist-util-filter": "^5.0.1",
+    "unist-util-visit": "^5.0.0",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@formbricks/config-typescript": "workspace:*",
-    "@types/dompurify": "3.0.5",
-    "@types/react-highlight-words": "0.20.0",
+    "@types/dompurify": "^3.0.5",
+    "@types/react-highlight-words": "^0.20.0",
     "@formbricks/eslint-config": "workspace:*"
   }
 }

apps/storybook/.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import "../../../packages/ui/globals.css";
+import "../../web/app/globals.css";
 
 const preview: Preview = {
   parameters: {

apps/storybook/package.json

@@ -12,30 +12,30 @@
   },
   "dependencies": {
     "@formbricks/ui": "workspace:*",
-    "eslint-plugin-react-refresh": "0.4.12",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "2.0.2",
+    "@chromatic-com/storybook": "^1.6.1",
     "@formbricks/config-typescript": "workspace:*",
-    "@storybook/addon-a11y": "8.3.5",
-    "@storybook/addon-essentials": "8.3.5",
-    "@storybook/addon-interactions": "8.3.5",
-    "@storybook/addon-links": "8.3.5",
-    "@storybook/addon-onboarding": "8.3.5",
-    "@storybook/blocks": "8.3.5",
-    "@storybook/react": "8.3.5",
-    "@storybook/react-vite": "8.3.5",
-    "@storybook/test": "8.3.5",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
-    "@vitejs/plugin-react": "4.3.2",
-    "esbuild": "0.24.0",
-    "eslint-plugin-storybook": "0.9.0",
-    "prop-types": "15.8.1",
-    "storybook": "8.3.5",
-    "tsup": "8.3.0",
-    "vite": "5.4.8"
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "esbuild": "^0.23.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.2.9",
+    "tsup": "^8.2.4",
+    "vite": "^5.4.1"
   }
 }

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx

@@ -34,7 +34,7 @@ export const OnboardingSetupInstructions = ({
       var apiHost = "${webAppUrl}";
       var environmentId = "${environmentId}";
       var userId = "testUser";
-      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)}();
+      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)}();
   </script>
   <!-- END Formbricks Surveys -->
   `;
@@ -44,13 +44,13 @@ export const OnboardingSetupInstructions = ({
   !function(){
     var apiHost = "${webAppUrl}";
     var environmentId = "${environmentId}";
-      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})},500)}();
+      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 -->
   `;
 
   const npmSnippetForAppSurveys = `
-  import formbricks from "@formbricks/js";
+  import formbricks from "@formbricks/js/app";
   
   if (typeof window !== "undefined") {
     formbricks.init({
@@ -69,7 +69,7 @@ export const OnboardingSetupInstructions = ({
 
   const npmSnippetForWebsiteSurveys = `
   // other imports
-  import formbricks from "@formbricks/js";
+  import formbricks from "@formbricks/js/website";
   
   if (typeof window !== "undefined") {
     formbricks.init({

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx

@@ -36,7 +36,9 @@ const Page = async ({ params }: ConnectPageProps) => {
       <ConnectWithFormbricks
         environment={environment}
         webAppUrl={WEBAPP_URL}
-        widgetSetupCompleted={environment.appSetupCompleted}
+        widgetSetupCompleted={
+          channel === "app" ? environment.appSetupCompleted : environment.websiteSetupCompleted
+        }
         channel={channel}
       />
       <Button

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/channel/page.tsx

@@ -41,7 +41,7 @@ const Page = async ({ params }: ChannelPageProps) => {
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
       <Header
-        title="Where do you mainly want to survey people?"
+        title="Where do you want to survey people?"
         subtitle="Run surveys on public websites, in your app, or with shareable links & emails."
       />
       <OnboardingOptionsContainer options={channelOptions} />

apps/web/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer.tsx

@@ -42,7 +42,7 @@ export const OnboardingOptionsContainer = ({ options }: OnboardingOptionsContain
   return (
     <div
       className={cn({
-        "flex w-5/6 justify-center gap-8 text-center md:flex-row lg:w-2/3": options.length >= 3,
+        "grid w-5/6 grid-cols-3 gap-8 text-center lg:w-2/3": options.length >= 3,
         "flex justify-center gap-8": options.length < 3,
       })}>
       {options.map((option) =>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddEndingCardButton.tsx

@@ -18,7 +18,7 @@ export const AddEndingCardButton = ({ localSurvey, addEndingCard }: AddEndingCar
         <PlusIcon className="h-6 w-6 text-white" />
       </div>
       <div className="px-4 py-3 text-sm">
-        <p className="font-semibold">Add ending</p>
+        <p className="font-semibold">Add Ending</p>
       </div>
     </div>
   );

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx

@@ -21,7 +21,6 @@ interface AddQuestionButtonProps {
 
 export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestionButtonProps) => {
   const [open, setOpen] = useState(false);
-  const [hoveredQuestionId, setHoveredQuestionId] = useState<string | null>(null);
 
   const availableQuestionTypes = isCxMode ? CXQuestionTypes : questionTypes;
 
@@ -31,7 +30,7 @@ export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestio
       onOpenChange={setOpen}
       className={cn(
         open ? "shadow-lg" : "shadow-md",
-        "group w-full space-y-2 rounded-lg border border-slate-300 bg-white duration-200 hover:cursor-pointer hover:bg-slate-50"
+        "group w-full space-y-2 rounded-lg border border-slate-300 bg-white duration-300 hover:cursor-pointer hover:bg-slate-50"
       )}>
       <Collapsible.CollapsibleTrigger asChild className="group h-full w-full">
         <div className="inline-flex">
@@ -39,7 +38,7 @@ export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestio
             <PlusIcon className="h-5 w-5 text-white" />
           </div>
           <div className="px-4 py-3">
-            <p className="text-sm font-semibold">Add question</p>
+            <p className="text-sm font-semibold">Add Question</p>
             <p className="mt-1 text-xs text-slate-500">Add a new question to your survey</p>
           </div>
         </div>
@@ -50,7 +49,7 @@ export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestio
           <button
             type="button"
             key={questionType.id}
-            className="group relative mx-2 inline-flex items-center justify-between rounded p-0.5 px-4 py-2 text-sm font-medium text-slate-700 last:mb-2 hover:bg-slate-100 hover:text-slate-800"
+            className="mx-2 inline-flex items-center rounded p-0.5 px-4 py-2 text-sm font-medium text-slate-700 last:mb-2 hover:bg-slate-100 hover:text-slate-800"
             onClick={() => {
               addQuestion({
                 ...universalQuestionPresets,
@@ -59,19 +58,9 @@ export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestio
                 type: questionType.id,
               });
               setOpen(false);
-            }}
-            onMouseEnter={() => setHoveredQuestionId(questionType.id)}
-            onMouseLeave={() => setHoveredQuestionId(null)}>
-            <div className="flex items-center">
-              <questionType.icon className="text-brand-dark -ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-              {questionType.label}
-            </div>
-            <div
-              className={`absolute right-4 text-xs font-light text-slate-500 transition-opacity duration-200 ${
-                hoveredQuestionId === questionType.id ? "opacity-100" : "opacity-0"
-              }`}>
-              {questionType.description}
-            </div>
+            }}>
+            <questionType.icon className="text-brand-dark -ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+            {questionType.label}
           </button>
         ))}
       </Collapsible.CollapsibleContent>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx

@@ -34,8 +34,8 @@ export const CardStylingSettings = ({
   setOpen,
   form,
 }: CardStylingSettingsProps) => {
-  const isAppSurvey = surveyType === "app";
-  const surveyTypeDerived = isAppSurvey ? "App" : "Link";
+  const isAppSurvey = surveyType === "app" || surveyType === "website";
+  const surveyTypeDerived = isAppSurvey ? "App / Website" : "Link";
   const isLogoVisible = !!product.logo?.url;
 
   const linkCardArrangement = form.watch("cardArrangement.linkSurveys") ?? "simple";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx

@@ -141,33 +141,37 @@ export function ConditionalLogic({
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem
+                    className="flex items-center gap-2"
                     onClick={() => {
                       duplicateLogic(logicItemIdx);
-                    }}
-                    icon={<CopyIcon className="h-4 w-4" />}>
+                    }}>
+                    <CopyIcon className="h-4 w-4" />
                     Duplicate
                   </DropdownMenuItem>
                   <DropdownMenuItem
+                    className="flex items-center gap-2"
                     disabled={logicItemIdx === 0}
                     onClick={() => {
                       moveLogic(logicItemIdx, logicItemIdx - 1);
-                    }}
-                    icon={<ArrowUpIcon className="h-4 w-4" />}>
+                    }}>
+                    <ArrowUpIcon className="h-4 w-4" />
                     Move up
                   </DropdownMenuItem>
                   <DropdownMenuItem
+                    className="flex items-center gap-2"
                     disabled={logicItemIdx === (question.logic ?? []).length - 1}
                     onClick={() => {
                       moveLogic(logicItemIdx, logicItemIdx + 1);
-                    }}
-                    icon={<ArrowDownIcon className="h-4 w-4" />}>
+                    }}>
+                    <ArrowDownIcon className="h-4 w-4" />
                     Move down
                   </DropdownMenuItem>
                   <DropdownMenuItem
+                    className="flex items-center gap-2"
                     onClick={() => {
                       handleRemoveLogic(logicItemIdx);
-                    }}
-                    icon={<TrashIcon className="h-4 w-4" />}>
+                    }}>
+                    <TrashIcon className="h-4 w-4" />
                     Remove
                   </DropdownMenuItem>
                 </DropdownMenuContent>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CreateNewActionTab.tsx

@@ -171,7 +171,7 @@ export const CreateNewActionTab = ({
     <div>
       <FormProvider {...form}>
         <form onSubmit={handleSubmit(submitHandler)}>
-          <div className="max-h-[400px] w-full space-y-4 overflow-y-auto pr-4">
+          <div className="max-h-[500px] w-full space-y-4 overflow-y-auto pr-4">
             <div className="w-3/5">
               <FormField
                 name={`type`}

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditWelcomeCard.tsx

@@ -75,11 +75,11 @@ export const EditWelcomeCard = ({
         className="flex-1 rounded-r-lg border border-slate-200 transition-all duration-300 ease-in-out">
         <Collapsible.CollapsibleTrigger
           asChild
-          className="flex cursor-pointer justify-between rounded-r-lg p-4 hover:bg-slate-50">
+          className="flex cursor-pointer justify-between p-4 hover:bg-slate-50">
           <div>
             <div className="inline-flex">
               <div>
-                <p className="text-sm font-semibold">Welcome card</p>
+                <p className="text-sm font-semibold">Welcome Card</p>
                 {!open && (
                   <p className="mt-1 truncate text-xs text-slate-500">
                     {localSurvey?.welcomeCard?.enabled ? "Shown" : "Hidden"}

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx

@@ -162,22 +162,21 @@ export const EditorCardMenu = ({
           <EllipsisIcon className="h-4 w-4 text-slate-500 hover:text-slate-600" />
         </DropdownMenuTrigger>
 
-        <DropdownMenuContent>
+        <DropdownMenuContent className="border border-slate-200">
           <div className="flex flex-col">
             {cardType === "question" && (
               <DropdownMenuSub>
-                <DropdownMenuSubTrigger
-                  className="cursor-pointer text-sm text-slate-600 hover:text-slate-700"
-                  onClick={(e) => e.preventDefault()}>
+                <DropdownMenuSubTrigger className="cursor-pointer text-sm text-slate-600 hover:text-slate-700">
                   Change question type
                 </DropdownMenuSubTrigger>
 
-                <DropdownMenuSubContent className="ml-2">
+                <DropdownMenuSubContent className="ml-2 border border-slate-200 text-slate-600 hover:text-slate-700">
                   {Object.entries(availableQuestionTypes).map(([type, name]) => {
                     if (type === card.type) return null;
                     return (
                       <DropdownMenuItem
                         key={type}
+                        className="min-h-8 cursor-pointer"
                         onClick={() => {
                           setChangeToType(type as TSurveyQuestionTypeEnum);
                           if ((card as TSurveyQuestion).logic) {
@@ -186,8 +185,8 @@ export const EditorCardMenu = ({
                           }
 
                           changeQuestionType(type as TSurveyQuestionTypeEnum);
-                        }}
-                        icon={QUESTIONS_ICON_MAP[type as TSurveyQuestionTypeEnum]}>
+                        }}>
+                        {QUESTIONS_ICON_MAP[type as TSurveyQuestionTypeEnum]}
                         <span className="ml-2">{name}</span>
                       </DropdownMenuItem>
                     );
@@ -197,7 +196,7 @@ export const EditorCardMenu = ({
             )}
             {cardType === "ending" && (
               <DropdownMenuItem
-                className="min-h-8 justify-between"
+                className="flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700"
                 onClick={(e) => {
                   e.preventDefault();
                   addEndingCardBelow();
@@ -208,16 +207,16 @@ export const EditorCardMenu = ({
 
             {cardType === "question" && (
               <DropdownMenuSub>
-                <DropdownMenuSubTrigger className="cursor-pointer" onClick={(e) => e.preventDefault()}>
+                <DropdownMenuSubTrigger className="cursor-pointer text-sm text-slate-600 hover:text-slate-700">
                   Add question below
                 </DropdownMenuSubTrigger>
 
-                <DropdownMenuSubContent className="ml-2">
+                <DropdownMenuSubContent className="ml-4 border border-slate-200">
                   {Object.entries(availableQuestionTypes).map(([type, name]) => {
                     return (
                       <DropdownMenuItem
                         key={type}
-                        className="min-h-8"
+                        className="min-h-8 cursor-pointer"
                         onClick={(e) => {
                           e.stopPropagation();
                           if (cardType === "question") {
@@ -233,27 +232,33 @@ export const EditorCardMenu = ({
               </DropdownMenuSub>
             )}
             <DropdownMenuItem
+              className={`flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700 ${
+                cardIdx === 0 ? "opacity-50" : ""
+              }`}
               onClick={(e) => {
                 if (cardIdx !== 0) {
                   e.stopPropagation();
                   moveCard(cardIdx, true);
                 }
               }}
-              icon={<ArrowUpIcon className="h-4 w-4" />}
               disabled={cardIdx === 0}>
-              <span>Move up</span>
+              <span className="text-sm">Move up</span>
+              <ArrowUpIcon className="h-4 w-4" />
             </DropdownMenuItem>
 
             <DropdownMenuItem
+              className={`flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700 ${
+                lastCard ? "opacity-50" : ""
+              }`}
               onClick={(e) => {
                 if (!lastCard) {
                   e.stopPropagation();
                   moveCard(cardIdx, false);
                 }
               }}
-              icon={<ArrowDownIcon className="h-4 w-4" />}
               disabled={lastCard}>
-              <span>Move down</span>
+              <span className="text-sm text-slate-600 hover:text-slate-700">Move down</span>
+              <ArrowDownIcon className="h-4 w-4" />
             </DropdownMenuItem>
           </div>
         </DropdownMenuContent>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/HiddenFieldsCard.tsx

@@ -100,11 +100,11 @@ export const HiddenFieldsCard = ({
         className="flex-1 rounded-r-lg border border-slate-200 transition-all duration-300 ease-in-out">
         <Collapsible.CollapsibleTrigger
           asChild
-          className="flex cursor-pointer justify-between rounded-r-lg p-4 hover:bg-slate-50">
+          className="flex cursor-pointer justify-between p-4 hover:bg-slate-50">
           <div>
             <div className="inline-flex">
               <div>
-                <p className="text-sm font-semibold">Hidden fields</p>
+                <p className="text-sm font-semibold">Hidden Fields</p>
               </div>
             </div>
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/HowToSendCard.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { AlertCircleIcon, CheckIcon, LinkIcon, MonitorIcon } from "lucide-react";
+import { AlertCircleIcon, BlocksIcon, CheckIcon, EarthIcon, LinkIcon, MonitorIcon } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { getDefaultEndingCard } from "@formbricks/lib/templates";
 import { TEnvironment } from "@formbricks/types/environment";
+import { TProduct } from "@formbricks/types/product";
 import { TSegment } from "@formbricks/types/segment";
 import { TSurvey, TSurveyType } from "@formbricks/types/surveys/types";
 import { Badge } from "@formbricks/ui/components/Badge";
@@ -17,15 +18,25 @@ interface HowToSendCardProps {
   localSurvey: TSurvey;
   setLocalSurvey: (survey: TSurvey | ((TSurvey: TSurvey) => TSurvey)) => void;
   environment: TEnvironment;
+  organizationId: string;
+  product: TProduct;
 }
 
-export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowToSendCardProps) => {
+export const HowToSendCard = ({
+  localSurvey,
+  setLocalSurvey,
+  environment,
+  product,
+  organizationId,
+}: HowToSendCardProps) => {
   const [open, setOpen] = useState(false);
   const [appSetupCompleted, setAppSetupCompleted] = useState(false);
+  const [websiteSetupCompleted, setWebsiteSetupCompleted] = useState(false);
 
   useEffect(() => {
     if (environment) {
       setAppSetupCompleted(environment.appSetupCompleted);
+      setWebsiteSetupCompleted(environment.websiteSetupCompleted);
     }
   }, [environment]);
 
@@ -70,6 +81,24 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
   };
 
   const options = [
+    {
+      id: "website",
+      name: "Website Survey",
+      icon: EarthIcon,
+      description: "Run targeted surveys on public websites.",
+      comingSoon: false,
+      alert: !websiteSetupCompleted,
+      hide: product.config.channel && product.config.channel !== "website",
+    },
+    {
+      id: "app",
+      name: "App Survey",
+      icon: MonitorIcon,
+      description: "Embed a survey in your web app to collect responses with user identification.",
+      comingSoon: false,
+      alert: !appSetupCompleted,
+      hide: product.config.channel && product.config.channel !== "app",
+    },
     {
       id: "link",
       name: "Link survey",
@@ -80,15 +109,25 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
       hide: false,
     },
     {
-      id: "app",
-      name: "Website & App Survey",
-      icon: MonitorIcon,
-      description: "Embed a survey in your web app or website to collect responses.",
-      comingSoon: false,
-      alert: !appSetupCompleted,
+      id: "headless",
+      name: "Headless Survey",
+      icon: BlocksIcon,
+      description: "Use Formbricks API only and create your own frontend experience.",
+      comingSoon: true,
+      alert: false,
+      hide: false,
     },
   ];
 
+  const promotedFeaturesString =
+    product.config.channel === "website"
+      ? "app"
+      : product.config.channel === "app"
+        ? "website"
+        : product.config.channel === "link"
+          ? "app or website"
+          : "";
+
   return (
     <Collapsible.Root
       open={open}
@@ -159,11 +198,13 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
                         )}
                       </div>
                       <p className="mt-2 text-xs font-normal text-slate-600">{option.description}</p>
-                      {localSurvey.type === option.id && option.alert && (
+                      {option.alert && (
                         <div className="mt-2 flex items-center space-x-3 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2">
                           <AlertCircleIcon className="h-5 w-5 text-amber-500" />
                           <div className="text-amber-800">
-                            <p className="text-xs font-semibold">Formbricks SDK is not connected</p>
+                            <p className="text-xs font-semibold">
+                              Your {option.id} is not yet connected to Formbricks.
+                            </p>
                             <p className="text-xs font-normal">
                               <Link
                                 href={`/environments/${environment.id}/product/${option.id}-connection`}
@@ -171,7 +212,7 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
                                 target="_blank">
                                 Connect Formbricks
                               </Link>{" "}
-                              and launch surveys in your website or app.
+                              and launch surveys in your {option.id}.
                             </p>
                           </div>
                         </div>
@@ -182,6 +223,23 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
               ))}
           </RadioGroup>
         </div>
+        {promotedFeaturesString && (
+          <div className="mt-2 flex items-center space-x-3 rounded-b-lg border border-slate-200 bg-slate-100 px-4 py-2">
+            🤓
+            <div className="ml-2 text-slate-500">
+              <p className="text-xs">
+                You can also use Formbricks to run {promotedFeaturesString} surveys.{" "}
+                <Link
+                  target="_blank"
+                  href={`/organizations/${organizationId}/products/new/mode`}
+                  className="font-medium underline decoration-slate-400 underline-offset-2">
+                  Create a new product
+                </Link>{" "}
+                for your {promotedFeaturesString} to use this feature.
+              </p>
+            </div>
+          </div>
+        )}
       </Collapsible.CollapsibleContent>
     </Collapsible.Root>
   );

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorActions.tsx

@@ -200,27 +200,30 @@ export function LogicEditorActions({
 
               <DropdownMenuContent>
                 <DropdownMenuItem
+                  className="flex items-center gap-2"
                   onClick={() => {
                     handleActionsChange("addBelow", idx);
-                  }}
-                  icon={<PlusIcon className="h-4 w-4" />}>
+                  }}>
+                  <PlusIcon className="h-4 w-4" />
                   Add action below
                 </DropdownMenuItem>
 
                 <DropdownMenuItem
+                  className="flex items-center gap-2"
                   disabled={actions.length === 1}
                   onClick={() => {
                     handleActionsChange("remove", idx);
-                  }}
-                  icon={<TrashIcon className="h-4 w-4" />}>
+                  }}>
+                  <TrashIcon className="h-4 w-4" />
                   Remove
                 </DropdownMenuItem>
 
                 <DropdownMenuItem
+                  className="flex items-center gap-2"
                   onClick={() => {
                     handleActionsChange("duplicate", idx);
-                  }}
-                  icon={<CopyIcon className="h-4 w-4" />}>
+                  }}>
+                  <CopyIcon className="h-4 w-4" />
                   Duplicate
                 </DropdownMenuItem>
               </DropdownMenuContent>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorConditions.tsx

@@ -216,16 +216,18 @@ export function LogicEditorConditions({
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 <DropdownMenuItem
+                  className="flex items-center gap-2"
                   onClick={() => {
                     handleAddConditionBelow(condition.id);
-                  }}
-                  icon={<PlusIcon className="h-4 w-4" />}>
+                  }}>
+                  <PlusIcon className="h-4 w-4" />
                   Add condition below
                 </DropdownMenuItem>
                 <DropdownMenuItem
+                  className="flex items-center gap-2"
                   disabled={depth === 0 && conditions.conditions.length === 1}
-                  onClick={() => handleRemoveCondition(condition.id)}
-                  icon={<TrashIcon className="h-4 w-4" />}>
+                  onClick={() => handleRemoveCondition(condition.id)}>
+                  <TrashIcon className="h-4 w-4" />
                   Remove
                 </DropdownMenuItem>
               </DropdownMenuContent>
@@ -305,26 +307,30 @@ export function LogicEditorConditions({
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem
+              className="flex items-center gap-2"
               onClick={() => {
                 handleAddConditionBelow(condition.id);
-              }}
-              icon={<PlusIcon className="h-4 w-4" />}>
+              }}>
+              <PlusIcon className="h-4 w-4" />
               Add condition below
             </DropdownMenuItem>
             <DropdownMenuItem
+              className="flex items-center gap-2"
               disabled={depth === 0 && conditions.conditions.length === 1}
-              onClick={() => handleRemoveCondition(condition.id)}
-              icon={<TrashIcon className="h-4 w-4" />}>
+              onClick={() => handleRemoveCondition(condition.id)}>
+              <TrashIcon className="h-4 w-4" />
               Remove
             </DropdownMenuItem>
             <DropdownMenuItem
-              onClick={() => handleDuplicateCondition(condition.id)}
-              icon={<CopyIcon className="h-4 w-4" />}>
+              className="flex items-center gap-2"
+              onClick={() => handleDuplicateCondition(condition.id)}>
+              <CopyIcon className="h-4 w-4" />
               Duplicate
             </DropdownMenuItem>
             <DropdownMenuItem
-              onClick={() => handleCreateGroup(condition.id)}
-              icon={<WorkflowIcon className="h-4 w-4" />}>
+              className="flex items-center gap-2"
+              onClick={() => handleCreateGroup(condition.id)}>
+              <WorkflowIcon className="h-4 w-4" />
               Create group
             </DropdownMenuItem>
           </DropdownMenuContent>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView.tsx

@@ -3,6 +3,7 @@ import { TActionClass } from "@formbricks/types/action-classes";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TMembershipRole } from "@formbricks/types/memberships";
+import { TProduct } from "@formbricks/types/product";
 import { TSegment } from "@formbricks/types/segment";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { HowToSendCard } from "./HowToSendCard";
@@ -14,6 +15,7 @@ import { WhenToSendCard } from "./WhenToSendCard";
 
 interface SettingsViewProps {
   environment: TEnvironment;
+  organizationId: string;
   localSurvey: TSurvey;
   setLocalSurvey: (survey: TSurvey) => void;
   actionClasses: TActionClass[];
@@ -23,10 +25,12 @@ interface SettingsViewProps {
   membershipRole?: TMembershipRole;
   isUserTargetingAllowed?: boolean;
   isFormbricksCloud: boolean;
+  product: TProduct;
 }
 
 export const SettingsView = ({
   environment,
+  organizationId,
   localSurvey,
   setLocalSurvey,
   actionClasses,
@@ -36,38 +40,43 @@ export const SettingsView = ({
   membershipRole,
   isUserTargetingAllowed = false,
   isFormbricksCloud,
+  product,
 }: SettingsViewProps) => {
-  const isAppSurvey = localSurvey.type === "app";
+  const isWebSurvey = localSurvey.type === "website" || localSurvey.type === "app";
 
   return (
     <div className="mt-12 space-y-3 p-5">
-      <HowToSendCard localSurvey={localSurvey} setLocalSurvey={setLocalSurvey} environment={environment} />
+      <HowToSendCard
+        localSurvey={localSurvey}
+        setLocalSurvey={setLocalSurvey}
+        environment={environment}
+        product={product}
+        organizationId={organizationId}
+      />
 
       {localSurvey.type === "app" ? (
-        <div>
-          {!isUserTargetingAllowed ? (
-            <TargetingCard
-              key={localSurvey.segment?.id}
-              localSurvey={localSurvey}
-              setLocalSurvey={setLocalSurvey}
-              environmentId={environment.id}
-              attributeClasses={attributeClasses}
-              segments={segments}
-              initialSegment={segments.find((segment) => segment.id === localSurvey.segment?.id)}
-              isFormbricksCloud={isFormbricksCloud}
-            />
-          ) : (
-            <AdvancedTargetingCard
-              key={localSurvey.segment?.id}
-              localSurvey={localSurvey}
-              setLocalSurvey={setLocalSurvey}
-              environmentId={environment.id}
-              attributeClasses={attributeClasses}
-              segments={segments}
-              initialSegment={segments.find((segment) => segment.id === localSurvey.segment?.id)}
-            />
-          )}
-        </div>
+        !isUserTargetingAllowed ? (
+          <TargetingCard
+            key={localSurvey.segment?.id}
+            localSurvey={localSurvey}
+            setLocalSurvey={setLocalSurvey}
+            environmentId={environment.id}
+            attributeClasses={attributeClasses}
+            segments={segments}
+            initialSegment={segments.find((segment) => segment.id === localSurvey.segment?.id)}
+            isFormbricksCloud={isFormbricksCloud}
+          />
+        ) : (
+          <AdvancedTargetingCard
+            key={localSurvey.segment?.id}
+            localSurvey={localSurvey}
+            setLocalSurvey={setLocalSurvey}
+            environmentId={environment.id}
+            attributeClasses={attributeClasses}
+            segments={segments}
+            initialSegment={segments.find((segment) => segment.id === localSurvey.segment?.id)}
+          />
+        )
       ) : null}
 
       <WhenToSendCard
@@ -90,7 +99,7 @@ export const SettingsView = ({
         environmentId={environment.id}
       />
 
-      {isAppSurvey && (
+      {isWebSurvey && (
         <SurveyPlacementCard
           localSurvey={localSurvey}
           setLocalSurvey={setLocalSurvey}

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx

@@ -25,6 +25,7 @@ interface SurveyEditorProps {
   survey: TSurvey;
   product: TProduct;
   environment: TEnvironment;
+  organizationId: string;
   actionClasses: TActionClass[];
   attributeClasses: TAttributeClass[];
   segments: TSegment[];
@@ -43,6 +44,7 @@ export const SurveyEditor = ({
   survey,
   product,
   environment,
+  organizationId,
   actionClasses,
   attributeClasses,
   segments,
@@ -194,6 +196,7 @@ export const SurveyEditor = ({
           {activeView === "settings" && (
             <SettingsView
               environment={environment}
+              organizationId={organizationId}
               localSurvey={localSurvey}
               setLocalSurvey={setLocalSurvey}
               actionClasses={actionClasses}
@@ -203,6 +206,7 @@ export const SurveyEditor = ({
               membershipRole={membershipRole}
               isUserTargetingAllowed={isUserTargetingAllowed}
               isFormbricksCloud={isFormbricksCloud}
+              product={localProduct}
             />
           )}
         </main>
@@ -213,7 +217,7 @@ export const SurveyEditor = ({
             questionId={activeQuestionId}
             product={localProduct}
             environment={environment}
-            previewType={localSurvey.type === "app" ? "modal" : "fullwidth"}
+            previewType={localSurvey.type === "app" || localSurvey.type === "website" ? "modal" : "fullwidth"}
             languageCode={selectedLanguageCode}
             onFileUpload={async (file) => file.name}
           />

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyVariablesCard.tsx

@@ -48,7 +48,7 @@ export const SurveyVariablesCard = ({
         className="flex-1 rounded-r-lg border border-slate-200 transition-all duration-300 ease-in-out">
         <Collapsible.CollapsibleTrigger
           asChild
-          className="flex cursor-pointer justify-between rounded-r-lg p-4 hover:bg-slate-50">
+          className="flex cursor-pointer justify-between p-4 hover:bg-slate-50">
           <div>
             <div className="inline-flex">
               <div>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx

@@ -13,7 +13,6 @@ import { isAdvancedSegment } from "@formbricks/lib/segment/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TBaseFilter, TSegment, TSegmentCreateInput, TSegmentUpdateInput } from "@formbricks/types/segment";
 import { TSurvey } from "@formbricks/types/surveys/types";
-import { Alert, AlertDescription } from "@formbricks/ui/components/Alert";
 import { AlertDialog } from "@formbricks/ui/components/AlertDialog";
 import { BasicAddFilterModal } from "@formbricks/ui/components/BasicAddFilterModal";
 import { BasicSegmentEditor } from "@formbricks/ui/components/BasicSegmentEditor";
@@ -159,7 +158,7 @@ export const TargetingCard = ({
     <Collapsible.Root
       open={open}
       onOpenChange={setOpen}
-      className="w-full overflow-hidden rounded-lg border border-slate-300 bg-white">
+      className="w-full rounded-lg border border-slate-300 bg-white">
       <Collapsible.CollapsibleTrigger
         asChild
         className="h-full w-full cursor-pointer rounded-lg hover:bg-slate-50">
@@ -438,23 +437,6 @@ export const TargetingCard = ({
             }
           }}
         />
-
-        <div>
-          <Alert className="flex items-center rounded-none bg-slate-50">
-            <AlertDescription className="ml-2">
-              <span className="mr-1 text-slate-600">
-                User targeting is currently only available when{" "}
-                <Link
-                  href="https://formbricks.com//docs/app-surveys/user-identification"
-                  target="blank"
-                  className="underline">
-                  identifying users
-                </Link>{" "}
-                with the Formbricks SDK.
-              </span>
-            </AlertDescription>
-          </Alert>
-        </div>
       </Collapsible.CollapsibleContent>
     </Collapsible.Root>
   );

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/WhenToSendCard.tsx

@@ -34,7 +34,9 @@ export const WhenToSendCard = ({
   propActionClasses,
   membershipRole,
 }: WhenToSendCardProps) => {
-  const [open, setOpen] = useState(localSurvey.type === "app" ? true : false);
+  const [open, setOpen] = useState(
+    localSurvey.type === "app" || localSurvey.type === "website" ? true : false
+  );
   const [isAddActionModalOpen, setAddActionModalOpen] = useState(false);
   const [actionClasses, setActionClasses] = useState<TActionClass[]>(propActionClasses);
   const [randomizerToggle, setRandomizerToggle] = useState(localSurvey.displayPercentage ? true : false);

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/page.tsx

@@ -81,6 +81,7 @@ const Page = async ({ params, searchParams }) => {
       attributeClasses={attributeClasses}
       responseCount={responseCount}
       membershipRole={currentUserMembership?.role}
+      organizationId={organization.id}
       colors={SURVEY_BG_COLORS}
       segments={segments}
       isUserTargetingAllowed={isUserTargetingAllowed}

apps/web/app/(app)/components/FormbricksClient.tsx

@@ -4,7 +4,7 @@ import { formbricksEnabled } from "@/app/lib/formbricks";
 import type { Session } from "next-auth";
 import { usePathname, useSearchParams } from "next/navigation";
 import { useCallback, useEffect } from "react";
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 import { env } from "@formbricks/lib/env";
 
 type UsageAttributesUpdaterProps = {

apps/web/app/(app)/components/LoadingCard.tsx

@@ -1,24 +0,0 @@
-import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
-import { cn } from "@formbricks/lib/cn";
-
-export const LoadingCard = ({
-  title,
-  description,
-  skeletonLines,
-}: {
-  title: string;
-  description: string;
-  skeletonLines: Array<{ classes: string }>;
-}) => {
-  return (
-    <SettingsCard title={title} description={description}>
-      <div className="w-full space-y-4">
-        {skeletonLines.map((line, index) => (
-          <div key={index}>
-            <div className={cn("animate-pulse rounded-full bg-slate-200", line.classes)}></div>
-          </div>
-        ))}
-      </div>
-    </SettingsCard>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/(people)/attributes/actions.ts

@@ -3,7 +3,10 @@
 import { z } from "zod";
 import { authenticatedActionClient } from "@formbricks/lib/actionClient";
 import { checkAuthorization } from "@formbricks/lib/actionClient/utils";
-import { getOrganizationIdFromEnvironmentId } from "@formbricks/lib/organization/utils";
+import {
+  getOrganizationIdFromAttributeClassId,
+  getOrganizationIdFromEnvironmentId,
+} from "@formbricks/lib/organization/utils";
 import { getSegmentsByAttributeClassName } from "@formbricks/lib/segment/service";
 import { ZAttributeClass } from "@formbricks/types/attribute-classes";
 import { ZId } from "@formbricks/types/common";
@@ -16,6 +19,12 @@ const ZGetSegmentsByAttributeClassAction = z.object({
 export const getSegmentsByAttributeClassAction = authenticatedActionClient
   .schema(ZGetSegmentsByAttributeClassAction)
   .action(async ({ ctx, parsedInput }) => {
+    await checkAuthorization({
+      userId: ctx.user.id,
+      organizationId: await getOrganizationIdFromAttributeClassId(parsedInput.attributeClass.id),
+      rules: ["attributeClass", "read"],
+    });
+
     await checkAuthorization({
       userId: ctx.user.id,
       organizationId: await getOrganizationIdFromEnvironmentId(parsedInput.environmentId),

apps/web/app/(app)/environments/[environmentId]/(people)/attributes/page.tsx

@@ -1,6 +1,7 @@
 import { PersonSecondaryNavigation } from "@/app/(app)/environments/[environmentId]/(people)/people/components/PersonSecondaryNavigation";
 import { CircleHelpIcon } from "lucide-react";
 import { Metadata } from "next";
+import { notFound } from "next/navigation";
 import { getAttributeClasses } from "@formbricks/lib/attributeClass/service";
 import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 import { Button } from "@formbricks/ui/components/Button";
@@ -21,6 +22,12 @@ const Page = async ({ params }) => {
     throw new Error("Product not found");
   }
 
+  const currentProductChannel = product.config.channel ?? null;
+
+  if (currentProductChannel && currentProductChannel !== "app") {
+    return notFound();
+  }
+
   const HowToAddAttributesButton = (
     <Button
       size="sm"