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/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/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,103 +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 serverside actions deprecation. The migrations included in this
-  release will delete all actions from the database. If you still need the actions, 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.
@@ -192,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

@@ -164,13 +164,20 @@ const NavigationGroup = ({
     if (openGroups.includes(title)) {
       setOpenGroups(openGroups.filter((t) => t !== title));
     } else {
-      setOpenGroups([title]);
+      setOpenGroups([...openGroups, title]);
     }
     setActiveGroup(group);
   };
 
   const isParentOpen = (title: string) => openGroups.includes(title);
 
+  const sortedLinks = group.links.map((link) => {
+    if (link.children) {
+      link.children.sort((a, b) => a.title.localeCompare(b.title));
+    }
+    return link;
+  });
+
   return (
     <li className={clsx("relative mt-6", className)}>
       <motion.h2 layout="position" className="font-semibold text-slate-900 dark:text-white">
@@ -185,8 +192,8 @@ const NavigationGroup = ({
           {isActiveGroup && <ActivePageMarker group={group} pathname={pathname || "/docs"} />}
         </AnimatePresence>
         <ul role="list" className="border-l border-transparent">
-          {group.links.map((link) => (
-            <motion.li key={`${group.title}-${link.title}`} layout="position" className="relative">
+          {sortedLinks.map((link) => (
+            <motion.li key={link.title} layout="position" className="relative">
               {link.href ? (
                 <NavLink
                   href={isMobile && link.children ? "" : link.href}
@@ -194,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" />
@@ -216,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

@@ -22,6 +22,58 @@ export const navigation: Array<NavGroup> = [
       },
     ],
   },
+  {
+    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" },
+        ],
+      },
+    ],
+  },
   {
     title: "Link Surveys",
     links: [
@@ -52,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/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: "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" },
     ],
@@ -117,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/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/EditorCardMenu.tsx

@@ -166,9 +166,7 @@ export const EditorCardMenu = ({
           <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>
 
@@ -209,9 +207,7 @@ export const EditorCardMenu = ({
 
             {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">
                   Add question below
                 </DropdownMenuSubTrigger>
 

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/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/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"

apps/web/app/(app)/environments/[environmentId]/(people)/people/components/PersonSecondaryNavigation.tsx

@@ -1,5 +1,5 @@
 import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
-import { TProduct } from "@formbricks/types/product";
+import { TProductConfigChannel } from "@formbricks/types/product";
 import { SecondaryNavigation } from "@formbricks/ui/components/SecondaryNavigation";
 
 interface PersonSecondaryNavigationProps {
@@ -13,14 +13,16 @@ export const PersonSecondaryNavigation = async ({
   environmentId,
   loading,
 }: PersonSecondaryNavigationProps) => {
-  let product: TProduct | null = null;
+  let currentProductChannel: TProductConfigChannel = null;
 
   if (!loading && environmentId) {
-    product = await getProductByEnvironmentId(environmentId);
+    const product = await getProductByEnvironmentId(environmentId);
 
     if (!product) {
       throw new Error("Product not found");
     }
+
+    currentProductChannel = product.config.channel ?? null;
   }
 
   const navigation = [
@@ -38,6 +40,8 @@ export const PersonSecondaryNavigation = async ({
       id: "attributes",
       label: "Attributes",
       href: `/environments/${environmentId}/attributes`,
+      // hide attributes tab if it's being used in the loading state or if the product's channel is website or link
+      hidden: loading || !!(currentProductChannel && currentProductChannel !== "app"),
     },
   ];
 

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

@@ -3,8 +3,10 @@ import { ActionClassDataRow } from "@/app/(app)/environments/[environmentId]/act
 import { ActionTableHeading } from "@/app/(app)/environments/[environmentId]/actions/components/ActionTableHeading";
 import { AddActionModal } from "@/app/(app)/environments/[environmentId]/actions/components/AddActionModal";
 import { Metadata } from "next";
+import { notFound } from "next/navigation";
 import { getActionClasses } from "@formbricks/lib/actionClass/service";
 import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
@@ -13,8 +15,9 @@ export const metadata: Metadata = {
 };
 
 const Page = async ({ params }) => {
-  const [actionClasses, organization] = await Promise.all([
+  const [actionClasses, product, organization] = await Promise.all([
     getActionClasses(params.environmentId),
+    getProductByEnvironmentId(params.environmentId),
     getOrganizationByEnvironmentId(params.environmentId),
   ]);
 
@@ -22,6 +25,11 @@ const Page = async ({ params }) => {
     throw new Error("Organization not found");
   }
 
+  const currentProductChannel = product?.config.channel ?? null;
+  if (currentProductChannel === "link") {
+    return notFound();
+  }
+
   const renderAddActionButton = () => (
     <AddActionModal environmentId={params.environmentId} actionClasses={actionClasses} />
   );

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentLayout.tsx

@@ -53,6 +53,9 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
 
   const isMultiOrgEnabled = features?.isMultiOrgEnabled ?? false;
 
+  const currentProductChannel =
+    products.find((product) => product.id === environment.productId)?.config.channel ?? null;
+
   let peopleCount = 0;
   let responseCount = 0;
 
@@ -98,6 +101,7 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
           <TopControlBar
             environment={environment}
             environments={environments}
+            currentProductChannel={currentProductChannel}
             membershipRole={currentUserMembership?.role}
           />
           <div className="mt-14">{children}</div>

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx

@@ -31,7 +31,6 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
-import { AiOutlineDiscord } from "react-icons/ai";
 import { cn } from "@formbricks/lib/cn";
 import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
@@ -179,6 +178,7 @@ export const MainNavigation = ({
         href: `/environments/${environment.id}/actions`,
         icon: MousePointerClick,
         isActive: pathname?.includes("/actions") || pathname?.includes("/actions"),
+        isHidden: product?.config.channel === "link",
       },
       {
         name: "Integrations",
@@ -195,7 +195,7 @@ export const MainNavigation = ({
         isHidden: isViewer,
       },
     ],
-    [environment.id, pathname, isViewer]
+    [environment.id, pathname, product?.config.channel, isViewer]
   );
 
   const dropdownNavigation = [
@@ -231,7 +231,7 @@ export const MainNavigation = ({
       label: "Join Discord",
       href: "https://formbricks.com/discord",
       target: "_blank",
-      icon: AiOutlineDiscord,
+      icon: ArrowUpRightIcon,
     },
   ];
 

apps/web/app/(app)/environments/[environmentId]/components/TopControlBar.tsx

@@ -1,24 +1,42 @@
 import { TopControlButtons } from "@/app/(app)/environments/[environmentId]/components/TopControlButtons";
+import { WidgetStatusIndicator } from "@/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator";
 import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TMembershipRole } from "@formbricks/types/memberships";
+import { TProductConfigChannel } from "@formbricks/types/product";
 
 interface SideBarProps {
   environment: TEnvironment;
   environments: TEnvironment[];
+  currentProductChannel: TProductConfigChannel;
   membershipRole?: TMembershipRole;
 }
 
-export const TopControlBar = ({ environment, environments, membershipRole }: SideBarProps) => {
+export const TopControlBar = ({
+  environment,
+  environments,
+  currentProductChannel,
+  membershipRole,
+}: SideBarProps) => {
   return (
     <div className="fixed inset-0 top-0 z-30 flex h-14 w-full items-center justify-end bg-slate-50 px-6">
       <div className="shadow-xs z-10">
         <div className="flex w-fit items-center space-x-2 py-2">
+          {currentProductChannel && currentProductChannel !== "link" && (
+            <WidgetStatusIndicator environment={environment} size="mini" type={currentProductChannel} />
+          )}
+          {!currentProductChannel && (
+            <>
+              <WidgetStatusIndicator environment={environment} size="mini" type="website" />
+              <WidgetStatusIndicator environment={environment} size="mini" type="app" />
+            </>
+          )}
           <TopControlButtons
             environment={environment}
             environments={environments}
             isFormbricksCloud={IS_FORMBRICKS_CLOUD}
             membershipRole={membershipRole}
+            currentProductChannel={currentProductChannel}
           />
         </div>
       </div>

apps/web/app/(app)/environments/[environmentId]/components/TopControlButtons.tsx

@@ -3,9 +3,10 @@
 import { EnvironmentSwitch } from "@/app/(app)/environments/[environmentId]/components/EnvironmentSwitch";
 import { CircleUserIcon, MessageCircleQuestionIcon, PlusIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TMembershipRole } from "@formbricks/types/memberships";
+import { TProductConfigChannel } from "@formbricks/types/product";
 import { Button } from "@formbricks/ui/components/Button";
 
 interface TopControlButtonsProps {
@@ -13,6 +14,7 @@ interface TopControlButtonsProps {
   environments: TEnvironment[];
   isFormbricksCloud: boolean;
   membershipRole?: TMembershipRole;
+  currentProductChannel: TProductConfigChannel;
 }
 
 export const TopControlButtons = ({
@@ -20,11 +22,13 @@ export const TopControlButtons = ({
   environments,
   isFormbricksCloud,
   membershipRole,
+  currentProductChannel,
 }: TopControlButtonsProps) => {
   const router = useRouter();
+  const showEnvironmentSwitch = currentProductChannel !== "link";
   return (
     <div className="z-50 flex items-center space-x-2">
-      <EnvironmentSwitch environment={environment} environments={environments} />
+      {showEnvironmentSwitch && <EnvironmentSwitch environment={environment} environments={environments} />}
       {isFormbricksCloud && (
         <Button
           variant="minimal"

apps/web/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator.tsx

@@ -1,52 +1,86 @@
+import clsx from "clsx";
 import { AlertTriangleIcon, CheckIcon } from "lucide-react";
-import { cn } from "@formbricks/lib/cn";
+import Link from "next/link";
 import { TEnvironment } from "@formbricks/types/environment";
+import { Label } from "@formbricks/ui/components/Label";
 
 interface WidgetStatusIndicatorProps {
   environment: TEnvironment;
+  size: "large" | "mini";
+  type: "app" | "website";
 }
 
-export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProps) => {
+export const WidgetStatusIndicator = ({ environment, size, type }: WidgetStatusIndicatorProps) => {
   const stati = {
     notImplemented: {
       icon: AlertTriangleIcon,
-      title: `Formbricks SDK is not yet connected.`,
-      subtitle: `Connect your website or app with Formbricks`,
+      title: `Your ${type} is not yet connected.`,
+      subtitle: ``,
+      shortText: `Connect your ${type} with Formbricks`,
     },
     running: {
       icon: CheckIcon,
       title: "Receiving data 💃🕺",
-      subtitle: `Formbricks SDK is connected`,
+      subtitle: `Your ${type} is connected with Formbricks.`,
+      shortText: `${type === "app" ? "App" : "Website"} connected`,
     },
   };
 
-  let status: "notImplemented" | "running";
+  const setupStatus = type === "app" ? environment.appSetupCompleted : environment.websiteSetupCompleted;
+  let status: "notImplemented" | "running" | "issue";
 
-  if (environment.appSetupCompleted) {
+  if (setupStatus) {
     status = "running";
   } else {
     status = "notImplemented";
   }
 
-  const currentStatus: { icon: React.ExoticComponent; title: string; subtitle: string } = stati[status];
+  const currentStatus = stati[status];
 
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-center justify-center space-y-2 rounded-lg border py-6 text-center",
-        status === "notImplemented" && "border-slate-200 bg-slate-100",
-        status === "running" && "border-emerald-200 bg-emerald-100"
-      )}>
+  if (size === "large") {
+    return (
       <div
-        className={cn(
-          "flex h-12 w-12 items-center justify-center rounded-full border bg-white p-2",
-          status === "notImplemented" && "border-slate-200 text-slate-700",
-          status === "running" && "border-emerald-200 text-emerald-700"
+        className={clsx(
+          "flex flex-col items-center justify-center space-y-2 rounded-lg border py-6 text-center",
+          status === "notImplemented" && "border-slate-200 bg-slate-100",
+          status === "running" && "border-emerald-200 bg-emerald-100"
         )}>
-        <currentStatus.icon />
+        <div
+          className={clsx(
+            "flex h-12 w-12 items-center justify-center rounded-full border bg-white p-2",
+            status === "notImplemented" && "border-slate-200 text-slate-700",
+            status === "running" && "border-emerald-200 text-emerald-700"
+          )}>
+          <currentStatus.icon />
+        </div>
+        <p className="text-md font-bold text-slate-800 md:text-xl">{currentStatus.title}</p>
+        <p className="w-2/3 text-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
       </div>
-      <p className="text-md font-bold text-slate-800 md:text-xl">{currentStatus.title}</p>
-      <p className="w-2/3 text-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
-    </div>
-  );
+    );
+  }
+  if (size === "mini") {
+    return (
+      <div className="flex gap-2">
+        <Link href={`/environments/${environment.id}/product/${type}-connection`}>
+          <div className="group flex justify-center">
+            <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
+              {status === "running" ? (
+                <span className="relative flex h-3 w-3">
+                  <span className="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75"></span>
+                  <span className="relative inline-flex h-3 w-3 rounded-full bg-emerald-500"></span>
+                </span>
+              ) : (
+                <AlertTriangleIcon className="h-[14px] w-[14px] text-amber-600" />
+              )}
+              <Label className="group-hover:cursor-pointer group-hover:underline">
+                {currentStatus.shortText}
+              </Label>
+            </div>
+          </div>
+        </Link>
+      </div>
+    );
+  } else {
+    return null;
+  }
 };

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

@@ -15,6 +15,7 @@ import { getIntegrations } from "@formbricks/lib/integration/service";
 import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
 import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 import { getWebhookCountBySource } from "@formbricks/lib/webhook/service";
 import { TIntegrationType } from "@formbricks/types/integration";
 import { Card } from "@formbricks/ui/components/Card";
@@ -34,6 +35,7 @@ const Page = async ({ params }) => {
     zapierWebhookCount,
     makeWebhookCount,
     n8nwebhookCount,
+    product,
   ] = await Promise.all([
     getEnvironment(environmentId),
     getIntegrations(environmentId),
@@ -43,6 +45,7 @@ const Page = async ({ params }) => {
     getWebhookCountBySource(environmentId, "zapier"),
     getWebhookCountBySource(environmentId, "make"),
     getWebhookCountBySource(environmentId, "n8n"),
+    getProductByEnvironmentId(environmentId),
   ]);
 
   const isIntegrationConnected = (type: TIntegrationType) =>
@@ -64,7 +67,11 @@ const Page = async ({ params }) => {
   const isN8nIntegrationConnected = isIntegrationConnected("n8n");
   const isSlackIntegrationConnected = isIntegrationConnected("slack");
 
-  const widgetSetupCompleted = !!environment?.appSetupCompleted;
+  const widgetSetupCompleted = !!environment?.appSetupCompleted || !!environment?.websiteSetupCompleted;
+  const bothSetupCompleted = environment?.appSetupCompleted && environment?.websiteSetupCompleted;
+  const productChannel =
+    product?.config.channel === "website" || !product?.config.channel ? "website" : product?.config.channel;
+
   const integrationCards = [
     {
       docsHref: "https://formbricks.com/docs/integrations/zapier",
@@ -192,19 +199,27 @@ const Page = async ({ params }) => {
     },
   ];
 
-  integrationCards.unshift({
-    docsHref: "https://formbricks.com/docs/app-surveys/quickstart",
-    docsText: "Docs",
-    docsNewTab: true,
-    connectHref: `/environments/${environmentId}/product/app-connection`,
-    connectText: "Connect",
-    connectNewTab: false,
-    label: "Javascript SDK",
-    description: "Integrate Formbricks into your Website or App",
-    icon: <Image src={JsLogo} alt="Javascript Logo" />,
-    connected: widgetSetupCompleted,
-    statusText: widgetSetupCompleted ? "App Connected" : "Not Connected",
-  });
+  if (productChannel !== "link") {
+    integrationCards.unshift({
+      docsHref: "https://formbricks.com/docs/getting-started/framework-guides#next-js",
+      docsText: "Docs",
+      docsNewTab: true,
+      connectHref: `/environments/${environmentId}/product/${productChannel}-connection`,
+      connectText: "Connect",
+      connectNewTab: false,
+      label: "Javascript Widget",
+      description: "Integrate Formbricks into your Webapp",
+      icon: <Image src={JsLogo} alt="Javascript Logo" />,
+      connected: widgetSetupCompleted,
+      statusText: bothSetupCompleted
+        ? "app & website connected"
+        : environment?.appSetupCompleted
+          ? "app Connected"
+          : environment?.websiteSetupCompleted
+            ? "website connected"
+            : "Not Connected",
+    });
+  }
 
   if (isViewer) return <ErrorComponent />;
 

apps/web/app/(app)/environments/[environmentId]/product/(setup)/app-connection/loading.tsx

@@ -1,46 +1,138 @@
 "use client";
 
-import { LoadingCard } from "@/app/(app)/components/LoadingCard";
-import { ProductConfigNavigation } from "@/app/(app)/environments/[environmentId]/product/components/ProductConfigNavigation";
+import { BrushIcon, KeyIcon, LanguagesIcon, ListChecksIcon, TagIcon, UsersIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { cn } from "@formbricks/lib/cn";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
+const LoadingCard = ({ title, description, skeletonLines }) => {
+  return (
+    <div className="w-full max-w-4xl rounded-xl border border-slate-200 bg-white py-4 text-left shadow-sm">
+      <div className="grid content-center border-b border-slate-200 px-4 pb-4 text-left text-slate-900">
+        <h3 className="text-lg font-medium leading-6">{title}</h3>
+        <p className="mt-1 text-sm text-slate-500">{description}</p>
+      </div>
+      <div className="w-full">
+        <div className="rounded-lg px-4">
+          {skeletonLines.map((line, index) => (
+            <div key={index} className="mt-4">
+              <div
+                className={`flex animate-pulse flex-col items-center justify-center space-y-2 rounded-lg bg-slate-200 py-6 text-center ${line.classes}`}></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const Loading = () => {
+  const pathname = usePathname();
+
   const cards = [
     {
-      title: "Website & App Connection Status",
-      description: "Check if your app is successfully connected with Formbricks. Reload page to recheck.",
-      skeletonLines: [{ classes: " h-44 max-w-full rounded-lg" }],
-    },
-    {
-      title: "How to setup",
-      description: "Follow these steps to setup the Formbricks widget within your app.",
-      skeletonLines: [
-        { classes: "h-12 w-24 rounded-lg" },
-        { classes: "h-10 w-60 rounded-lg" },
-        { classes: "h-10 w-60 rounded-lg" },
-        { classes: "h-12 w-24 rounded-lg" },
-        { classes: "h-10 w-60 rounded-lg" },
-        { classes: "h-10 w-60 rounded-lg" },
-      ],
+      title: "Widget Status",
+      description: "Check if the Formbricks widget is alive and kicking.",
+      skeletonLines: [{ classes: " h-44 max-w-full rounded-md" }],
     },
     {
       title: "Your EnvironmentId",
       description: "This id uniquely identifies this Formbricks environment.",
-      skeletonLines: [{ classes: "h-12 w-4/6 rounded-lg" }],
+      skeletonLines: [{ classes: "h-6 w-4/6 rounded-full" }],
+    },
+    {
+      title: "How to setup",
+      description: "Follow these steps to setup the Formbricks widget within your app",
+      skeletonLines: [
+        { classes: "h-6 w-24 rounded-full" },
+        { classes: "h-4 w-60 rounded-full" },
+        { classes: "h-4 w-60 rounded-full" },
+        { classes: "h-6 w-24 rounded-full" },
+        { classes: "h-4 w-60 rounded-full" },
+        { classes: "h-4 w-60 rounded-full" },
+      ],
+    },
+  ];
+
+  let navigation = [
+    {
+      id: "general",
+      label: "General",
+      icon: <UsersIcon className="h-5 w-5" />,
+      current: pathname?.includes("/general"),
+    },
+    {
+      id: "look",
+      label: "Look & Feel",
+      icon: <BrushIcon className="h-5 w-5" />,
+      current: pathname?.includes("/look"),
+    },
+    {
+      id: "languages",
+      label: "Survey Languages",
+      icon: <LanguagesIcon className="h-5 w-5" />,
+      hidden: true,
+      current: pathname?.includes("/languages"),
+    },
+    {
+      id: "tags",
+      label: "Tags",
+      icon: <TagIcon className="h-5 w-5" />,
+      current: pathname?.includes("/tags"),
+    },
+    {
+      id: "api-keys",
+      label: "API Keys",
+      icon: <KeyIcon className="h-5 w-5" />,
+      current: pathname?.includes("/api-keys"),
+    },
+    {
+      id: "website-connection",
+      label: "Website Connection",
+      icon: <ListChecksIcon className="h-5 w-5" />,
+      current: pathname?.includes("/website-connection"),
+      hidden: true,
+    },
+    {
+      id: "app-connection",
+      label: "App Connection",
+      icon: <ListChecksIcon className="h-5 w-5" />,
+      current: pathname?.includes("/app-connection"),
+      hidden: true,
     },
   ];
 
   return (
-    <PageContentWrapper>
-      <PageHeader pageTitle="Configuration">
-        <ProductConfigNavigation activeId="app-connection" loading />
-      </PageHeader>
-      <div className="mt-4 flex max-w-4xl animate-pulse items-center space-y-4 rounded-lg border bg-blue-50 p-6 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base"></div>
-      {cards.map((card, index) => (
-        <LoadingCard key={index} {...card} />
-      ))}
-    </PageContentWrapper>
+    <div>
+      <PageContentWrapper>
+        <PageHeader pageTitle="Configuration">
+          <div className="grid h-10 w-full grid-cols-[auto,1fr]">
+            <nav className="flex h-full min-w-full items-center space-x-4" aria-label="Tabs">
+              {navigation.map((navElem) => (
+                <div
+                  key={navElem.id}
+                  className={cn(
+                    navElem.id === "app-connection"
+                      ? "border-brand-dark border-b-2 font-semibold text-slate-900"
+                      : "border-transparent text-slate-500 transition-all duration-150 ease-in-out hover:border-slate-300 hover:text-slate-700",
+                    "flex h-full items-center border-b-2 px-3 text-sm font-medium",
+                    navElem.hidden && "hidden"
+                  )}
+                  aria-current={navElem.id === "app-connection" ? "page" : undefined}>
+                  {navElem.label}
+                </div>
+              ))}
+            </nav>
+            <div className="justify-self-end"></div>
+          </div>
+        </PageHeader>
+        <div className="mt-4 flex max-w-4xl animate-pulse items-center space-y-4 rounded-lg border bg-blue-50 p-6 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base"></div>
+        {cards.map((card, index) => (
+          <LoadingCard key={index} {...card} />
+        ))}
+      </PageContentWrapper>
+    </div>
   );
 };
 

apps/web/app/(app)/environments/[environmentId]/product/(setup)/app-connection/page.tsx

@@ -2,18 +2,21 @@ import { WidgetStatusIndicator } from "@/app/(app)/environments/[environmentId]/
 import { EnvironmentIdField } from "@/app/(app)/environments/[environmentId]/product/(setup)/components/EnvironmentIdField";
 import { SetupInstructions } from "@/app/(app)/environments/[environmentId]/product/(setup)/components/SetupInstructions";
 import { ProductConfigNavigation } from "@/app/(app)/environments/[environmentId]/product/components/ProductConfigNavigation";
+import { notFound } from "next/navigation";
 import { getMultiLanguagePermission } from "@formbricks/ee/lib/service";
 import { WEBAPP_URL } from "@formbricks/lib/constants";
 import { getEnvironment } from "@formbricks/lib/environment/service";
 import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 import { EnvironmentNotice } from "@formbricks/ui/components/EnvironmentNotice";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 import { SettingsCard } from "../../../settings/components/SettingsCard";
 
 const Page = async ({ params }) => {
-  const [environment, organization] = await Promise.all([
+  const [environment, product, organization] = await Promise.all([
     getEnvironment(params.environmentId),
+    getProductByEnvironmentId(params.environmentId),
     getOrganizationByEnvironmentId(params.environmentId),
   ]);
 
@@ -26,6 +29,11 @@ const Page = async ({ params }) => {
   }
 
   const isMultiLanguageAllowed = await getMultiLanguagePermission(organization);
+  const currentProductChannel = product?.config.channel ?? null;
+
+  if (currentProductChannel && currentProductChannel !== "app") {
+    return notFound();
+  }
 
   return (
     <PageContentWrapper>
@@ -34,26 +42,27 @@ const Page = async ({ params }) => {
           environmentId={params.environmentId}
           activeId="app-connection"
           isMultiLanguageAllowed={isMultiLanguageAllowed}
+          productChannel={currentProductChannel}
         />
       </PageHeader>
       <div className="space-y-4">
         <EnvironmentNotice environmentId={params.environmentId} subPageUrl="/product/app-connection" />
         <SettingsCard
-          title="Website & App Connection Status"
+          title="App Connection Status"
           description="Check if your app is successfully connected with Formbricks. Reload page to recheck.">
-          {environment && <WidgetStatusIndicator environment={environment} />}
-        </SettingsCard>
-        <SettingsCard
-          title="How to setup"
-          description="Follow these steps to setup the Formbricks widget within your app."
-          noPadding>
-          <SetupInstructions environmentId={params.environmentId} webAppUrl={WEBAPP_URL} />
+          {environment && <WidgetStatusIndicator environment={environment} size="large" type="app" />}
         </SettingsCard>
         <SettingsCard
           title="Your EnvironmentId"
           description="This id uniquely identifies this Formbricks environment.">
           <EnvironmentIdField environmentId={params.environmentId} />
         </SettingsCard>
+        <SettingsCard
+          title="How to setup"
+          description="Follow these steps to setup the Formbricks widget within your app"
+          noPadding>
+          <SetupInstructions type="app" environmentId={params.environmentId} webAppUrl={WEBAPP_URL} />
+        </SettingsCard>
       </div>
     </PageContentWrapper>
   );

apps/web/app/(app)/environments/[environmentId]/product/(setup)/components/SetupInstructions.tsx

@@ -19,10 +19,11 @@ const tabs = [
 interface SetupInstructionsProps {
   environmentId: string;
   webAppUrl: string;
+  type: "app" | "website";
 }
 
-export const SetupInstructions = ({ environmentId, webAppUrl }: SetupInstructionsProps) => {
-  const [activeTab, setActiveTab] = useState(tabs[0].id);
+export const SetupInstructions = ({ environmentId, webAppUrl, type }: SetupInstructionsProps) => {
+  const [activeTab, setActiveTab] = useState(type === "website" ? tabs[1].id : tabs[0].id);
 
   return (
     <div>
@@ -38,13 +39,14 @@ export const SetupInstructions = ({ environmentId, webAppUrl }: SetupInstruction
             <CodeBlock language="sh">yarn add @formbricks/js</CodeBlock>
             <h4>Step 2: Initialize widget</h4>
             <p>Import Formbricks and initialize the widget in your Component (e.g. App.tsx):</p>
-            <CodeBlock language="js">{`import formbricks from "@formbricks/js";
+            <CodeBlock language="js">{`import formbricks from "@formbricks/js/${type}";
 if (typeof window !== "undefined") {
   formbricks.init({
-    environmentId: "${environmentId}", 
+    environmentId: "${environmentId}", ${type === "app" ? `\n    userId: "<user-id>",` : ""}
     apiHost: "${webAppUrl}",
   });
 }`}</CodeBlock>
+
             <ul className="list-disc text-sm">
               <li>
                 <span className="font-semibold">environmentId:</span> Used to identify the correct
@@ -54,32 +56,23 @@ if (typeof window !== "undefined") {
                 <span className="font-semibold">apiHost:</span> This is the URL of your Formbricks backend.
               </li>
             </ul>
-            <span className="text-sm text-slate-600">
-              If you are planning to{" "}
-              <Link
-                href="https://formbricks.com//docs/app-surveys/user-identification"
-                target="blank"
-                className="underline">
-                identifying your users
-              </Link>{" "}
-              you also need to pass a <span className="font-semibold">userId</span> to the{" "}
-              <span className="font-semibold">init</span> function.
-            </span>
             <h4>Step 3: Debug mode</h4>
             <p>
               Switch on the debug mode by appending <i>?formbricksDebug=true</i> to the URL where you load the
               Formbricks SDK. Open the browser console to see the logs.{" "}
               <Link
                 className="decoration-brand-dark"
-                href="https://formbricks.com/docs/developer-docs/js-sdk#debug-mode"
+                href="https://formbricks.com/docs/developer-docs/app-survey-sdk#debug-mode"
                 target="_blank">
                 Read docs.
               </Link>{" "}
             </p>
             <h4>You&apos;re done 🎉</h4>
             <p>
-              Your app now communicates with Formbricks - sending events, and loading surveys automatically!
+              Your {type} now communicates with Formbricks - sending events, and loading surveys
+              automatically!
             </p>
+
             <ul className="list-disc text-sm text-slate-700">
               <li>
                 <span>Need a more detailed setup guide for React, Next.js or Vue.js?</span>{" "}
@@ -118,11 +111,11 @@ if (typeof window !== "undefined") {
           <div className="prose prose-slate prose-p:my-2 prose-p:text-sm prose-p:text-slate-600 prose-h4:text-slate-800 prose-h4:pt-2">
             <h4>Step 1: Copy and paste code</h4>
             <p>
-              Insert this code into the <code>{`<head>`}</code> tag of your app
+              Insert this code into the <code>{`<head>`}</code> tag of your {type}:
             </p>
             <CodeBlock language="js">{`<!-- START Formbricks Surveys -->
 <script type="text/javascript">
-!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="${webAppUrl}/js/formbricks.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "${environmentId}", apiHost: "${window.location.protocol}//${window.location.host}"})},500)}();
+!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="${webAppUrl}/api/packages/${type}";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "${environmentId}", ${type === "app" ? `\n    userId: "<user-id>",` : ""} apiHost: "${window.location.protocol}//${window.location.host}"})},500)}();
 </script>
 <!-- END Formbricks Surveys -->`}</CodeBlock>
             <h4>Step 2: Debug mode</h4>
@@ -131,14 +124,15 @@ if (typeof window !== "undefined") {
               Formbricks SDK. Open the browser console to see the logs.{" "}
               <Link
                 className="decoration-brand-dark"
-                href="https://formbricks.com/docs/developer-docs/js-sdk#debug-mode"
+                href="https://formbricks.com/docs/developer-docs/app-survey-sdk#debug-mode"
                 target="_blank">
                 Read docs.
               </Link>{" "}
             </p>
             <h4>You&apos;re done 🎉</h4>
             <p>
-              Your app now communicates with Formbricks - sending events, and loading surveys automatically!
+              Your {type} now communicates with Formbricks - sending events, and loading surveys
+              automatically!
             </p>
             <ul className="list-disc text-sm text-slate-700">
               <li>

apps/web/app/(app)/environments/[environmentId]/product/(setup)/website-connection/loading.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { BrushIcon, KeyIcon, LanguagesIcon, ListChecksIcon, TagIcon, UsersIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { cn } from "@formbricks/lib/cn";
+import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
+import { PageHeader } from "@formbricks/ui/components/PageHeader";
+
+const LoadingCard = ({ title, description, skeletonLines }) => {
+  return (
+    <div className="w-full max-w-4xl rounded-xl border border-slate-200 bg-white py-4 text-left shadow-sm">
+      <div className="grid content-center border-b border-slate-200 px-4 pb-4 text-left text-slate-900">
+        <h3 className="text-lg font-medium leading-6">{title}</h3>
+        <p className="mt-1 text-sm text-slate-500">{description}</p>
+      </div>
+      <div className="w-full">
+        <div className="rounded-lg px-4">
+          {skeletonLines.map((line, index) => (
+            <div key={index} className="mt-4">
+              <div
+                className={`flex animate-pulse flex-col items-center justify-center space-y-2 rounded-lg bg-slate-200 py-6 text-center ${line.classes}`}></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Loading = () => {
+  const pathname = usePathname();
+
+  const cards = [
+    {
+      title: "Widget Status",
+      description: "Check if the Formbricks widget is alive and kicking.",
+      skeletonLines: [{ classes: " h-44 max-w-full rounded-md" }],
+    },
+    {
+      title: "Your EnvironmentId",
+      description: "This id uniquely identifies this Formbricks environment.",
+      skeletonLines: [{ classes: "h-6 w-4/6 rounded-full" }],
+    },
+    {
+      title: "How to setup",
+      description: "Follow these steps to setup the Formbricks widget within your app",
+      skeletonLines: [
+        { classes: "h-6 w-24 rounded-full" },
+        { classes: "h-4 w-60 rounded-full" },
+        { classes: "h-4 w-60 rounded-full" },
+        { classes: "h-6 w-24 rounded-full" },
+        { classes: "h-4 w-60 rounded-full" },
+        { classes: "h-4 w-60 rounded-full" },
+      ],
+    },
+  ];
+
+  let navigation = [
+    {
+      id: "general",
+      label: "General",
+      icon: <UsersIcon className="h-5 w-5" />,
+      current: pathname?.includes("/general"),
+    },
+    {
+      id: "look",
+      label: "Look & Feel",
+      icon: <BrushIcon className="h-5 w-5" />,
+      current: pathname?.includes("/look"),
+    },
+    {
+      id: "languages",
+      label: "Survey Languages",
+      icon: <LanguagesIcon className="h-5 w-5" />,
+      hidden: true,
+      current: pathname?.includes("/languages"),
+    },
+    {
+      id: "tags",
+      label: "Tags",
+      icon: <TagIcon className="h-5 w-5" />,
+      current: pathname?.includes("/tags"),
+    },
+    {
+      id: "api-keys",
+      label: "API Keys",
+      icon: <KeyIcon className="h-5 w-5" />,
+      current: pathname?.includes("/api-keys"),
+    },
+    {
+      id: "website-connection",
+      label: "Website Connection",
+      icon: <ListChecksIcon className="h-5 w-5" />,
+      current: pathname?.includes("/website-connection"),
+      hidden: true,
+    },
+    {
+      id: "app-connection",
+      label: "App Connection",
+      icon: <ListChecksIcon className="h-5 w-5" />,
+      current: pathname?.includes("/app-connection"),
+      hidden: true,
+    },
+  ];
+
+  return (
+    <div>
+      <PageContentWrapper>
+        <PageHeader pageTitle="Configuration">
+          <div className="grid h-10 w-full grid-cols-[auto,1fr]">
+            <nav className="flex h-full min-w-full items-center space-x-4" aria-label="Tabs">
+              {navigation.map((navElem) => (
+                <div
+                  key={navElem.id}
+                  className={cn(
+                    navElem.id === "website-connection"
+                      ? "border-brand-dark border-b-2 font-semibold text-slate-900"
+                      : "border-transparent text-slate-500 transition-all duration-150 ease-in-out hover:border-slate-300 hover:text-slate-700",
+                    "flex h-full items-center border-b-2 px-3 text-sm font-medium",
+                    navElem.hidden && "hidden"
+                  )}
+                  aria-current={navElem.id === "website-connection" ? "page" : undefined}>
+                  {navElem.label}
+                </div>
+              ))}
+            </nav>
+            <div className="justify-self-end"></div>
+          </div>
+        </PageHeader>
+        <div className="mt-4 flex max-w-4xl animate-pulse items-center space-y-4 rounded-lg border bg-blue-50 p-6 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base"></div>
+        {cards.map((card, index) => (
+          <LoadingCard key={index} {...card} />
+        ))}
+      </PageContentWrapper>
+    </div>
+  );
+};
+
+export default Loading;

apps/web/app/(app)/environments/[environmentId]/product/(setup)/website-connection/page.tsx

@@ -0,0 +1,71 @@
+import { WidgetStatusIndicator } from "@/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator";
+import { EnvironmentIdField } from "@/app/(app)/environments/[environmentId]/product/(setup)/components/EnvironmentIdField";
+import { SetupInstructions } from "@/app/(app)/environments/[environmentId]/product/(setup)/components/SetupInstructions";
+import { ProductConfigNavigation } from "@/app/(app)/environments/[environmentId]/product/components/ProductConfigNavigation";
+import { notFound } from "next/navigation";
+import { getMultiLanguagePermission } from "@formbricks/ee/lib/service";
+import { WEBAPP_URL } from "@formbricks/lib/constants";
+import { getEnvironment } from "@formbricks/lib/environment/service";
+import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
+import { EnvironmentNotice } from "@formbricks/ui/components/EnvironmentNotice";
+import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
+import { PageHeader } from "@formbricks/ui/components/PageHeader";
+import { SettingsCard } from "../../../settings/components/SettingsCard";
+
+const Page = async ({ params }) => {
+  const [environment, product, organization] = await Promise.all([
+    getEnvironment(params.environmentId),
+    getProductByEnvironmentId(params.environmentId),
+    getOrganizationByEnvironmentId(params.environmentId),
+  ]);
+
+  if (!environment) {
+    throw new Error("Environment not found");
+  }
+
+  if (!organization) {
+    throw new Error("Organization not found");
+  }
+
+  const isMultiLanguageAllowed = await getMultiLanguagePermission(organization);
+  const currentProductChannel = product?.config.channel ?? null;
+
+  if (currentProductChannel && currentProductChannel !== "website") {
+    return notFound();
+  }
+
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle="Configuration">
+        <ProductConfigNavigation
+          environmentId={params.environmentId}
+          activeId="website-connection"
+          isMultiLanguageAllowed={isMultiLanguageAllowed}
+          productChannel={currentProductChannel}
+        />
+      </PageHeader>
+      <div className="space-y-4">
+        <EnvironmentNotice environmentId={params.environmentId} subPageUrl="/product/website-connection" />
+        <SettingsCard
+          title="Website Connection Status"
+          description="Check if your website is successfully connected with Formbricks. Reload page to recheck.">
+          {environment && <WidgetStatusIndicator environment={environment} size="large" type="website" />}
+        </SettingsCard>
+        <SettingsCard
+          title="How to setup"
+          description="Follow these steps to setup the Formbricks widget within your website"
+          noPadding>
+          <SetupInstructions environmentId={params.environmentId} webAppUrl={WEBAPP_URL} type="website" />
+        </SettingsCard>
+        <SettingsCard
+          title="Your EnvironmentId"
+          description="This id uniquely identifies this Formbricks environment.">
+          <EnvironmentIdField environmentId={params.environmentId} />
+        </SettingsCard>
+      </div>
+    </PageContentWrapper>
+  );
+};
+
+export default Page;

apps/web/app/(app)/environments/[environmentId]/product/api-keys/loading.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import { ProductConfigNavigation } from "@/app/(app)/environments/[environmentId]/product/components/ProductConfigNavigation";
+import { BrushIcon, KeyIcon, LanguagesIcon, ListChecksIcon, TagIcon, UsersIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { cn } from "@formbricks/lib/cn";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
@@ -24,7 +26,7 @@ const LoadingCard = () => {
             </div>
           </div>
           <div className="flex justify-start">
-            <div className="mt-4 flex h-8 w-44 animate-pulse flex-col items-center justify-center rounded-md bg-black text-sm text-white">
+            <div className="mt-4 flex h-7 w-44 animate-pulse flex-col items-center justify-center rounded-md bg-black text-sm text-white">
               Loading
             </div>
           </div>
@@ -35,14 +37,85 @@ const LoadingCard = () => {
 };
 
 const Loading = () => {
+  const pathname = usePathname();
+
+  let navigation = [
+    {
+      id: "general",
+      label: "General",
+      icon: <UsersIcon className="h-5 w-5" />,
+      current: pathname?.includes("/general"),
+    },
+    {
+      id: "look",
+      label: "Look & Feel",
+      icon: <BrushIcon className="h-5 w-5" />,
+      current: pathname?.includes("/look"),
+    },
+    {
+      id: "languages",
+      label: "Survey Languages",
+      icon: <LanguagesIcon className="h-5 w-5" />,
+      hidden: true,
+      current: pathname?.includes("/languages"),
+    },
+    {
+      id: "tags",
+      label: "Tags",
+      icon: <TagIcon className="h-5 w-5" />,
+      current: pathname?.includes("/tags"),
+    },
+    {
+      id: "api-keys",
+      label: "API Keys",
+      icon: <KeyIcon className="h-5 w-5" />,
+      current: pathname?.includes("/api-keys"),
+    },
+    {
+      id: "website-connection",
+      label: "Website Connection",
+      icon: <ListChecksIcon className="h-5 w-5" />,
+      current: pathname?.includes("/website-connection"),
+      hidden: true,
+    },
+    {
+      id: "app-connection",
+      label: "App Connection",
+      icon: <ListChecksIcon className="h-5 w-5" />,
+      current: pathname?.includes("/app-connection"),
+      hidden: true,
+    },
+  ];
+
   return (
-    <PageContentWrapper>
-      <PageHeader pageTitle="Configuration">
-        <ProductConfigNavigation activeId="api-keys" loading />
-      </PageHeader>
-      <div className="mt-4 flex max-w-4xl animate-pulse items-center space-y-4 rounded-lg border bg-blue-50 p-6 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base"></div>
-      <LoadingCard />
-    </PageContentWrapper>
+    <div>
+      <PageContentWrapper>
+        <PageHeader pageTitle="Configuration">
+          <div className="grid h-10 w-full grid-cols-[auto,1fr]">
+            <nav className="flex h-full min-w-full items-center space-x-4" aria-label="Tabs">
+              {navigation.map((navElem) => (
+                <div
+                  key={navElem.id}
+                  className={cn(
+                    navElem.id === "api-keys"
+                      ? "border-brand-dark border-b-2 font-semibold text-slate-900"
+                      : "border-transparent text-slate-500 transition-all duration-150 ease-in-out hover:border-slate-300 hover:text-slate-700",
+                    "flex h-full items-center border-b-2 px-3 text-sm font-medium",
+                    navElem.hidden && "hidden"
+                  )}
+                  aria-current={navElem.id === "api-keys" ? "page" : undefined}>
+                  {navElem.label}
+                </div>
+              ))}
+            </nav>
+            <div className="justify-self-end"></div>
+          </div>
+        </PageHeader>
+        <div className="mt-4 flex max-w-4xl animate-pulse items-center space-y-4 rounded-lg border bg-blue-50 p-6 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base"></div>
+
+        <LoadingCard />
+      </PageContentWrapper>
+    </div>
   );
 };
 

apps/web/app/(app)/environments/[environmentId]/product/api-keys/page.tsx

@@ -6,6 +6,7 @@ import { getEnvironment } from "@formbricks/lib/environment/service";
 import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
 import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 import { EnvironmentNotice } from "@formbricks/ui/components/EnvironmentNotice";
 import { ErrorComponent } from "@formbricks/ui/components/ErrorComponent";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
@@ -14,9 +15,10 @@ import { SettingsCard } from "../../settings/components/SettingsCard";
 import { ApiKeyList } from "./components/ApiKeyList";
 
 const Page = async ({ params }) => {
-  const [session, environment, organization] = await Promise.all([
+  const [session, environment, product, organization] = await Promise.all([
     getServerSession(authOptions),
     getEnvironment(params.environmentId),
+    getProductByEnvironmentId(params.environmentId),
     getOrganizationByEnvironmentId(params.environmentId),
   ]);
 
@@ -33,6 +35,7 @@ const Page = async ({ params }) => {
   const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
   const { isViewer } = getAccessFlags(currentUserMembership?.role);
   const isMultiLanguageAllowed = await getMultiLanguagePermission(organization);
+  const currentProductChannel = product?.config.channel ?? null;
 
   return !isViewer ? (
     <PageContentWrapper>
@@ -41,6 +44,7 @@ const Page = async ({ params }) => {
           environmentId={params.environmentId}
           activeId="api-keys"
           isMultiLanguageAllowed={isMultiLanguageAllowed}
+          productChannel={currentProductChannel}
         />
       </PageHeader>
       <EnvironmentNotice environmentId={environment.id} subPageUrl="/product/api-keys" />

apps/web/app/(app)/environments/[environmentId]/product/components/ProductConfigNavigation.tsx

@@ -2,20 +2,21 @@
 
 import { BrushIcon, KeyIcon, LanguagesIcon, ListChecksIcon, TagIcon, UsersIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
+import { TProductConfigChannel } from "@formbricks/types/product";
 import { SecondaryNavigation } from "@formbricks/ui/components/SecondaryNavigation";
 
 interface ProductConfigNavigationProps {
+  environmentId: string;
   activeId: string;
-  environmentId?: string;
-  isMultiLanguageAllowed?: boolean;
-  loading?: boolean;
+  isMultiLanguageAllowed: boolean;
+  productChannel: TProductConfigChannel;
 }
 
 export const ProductConfigNavigation = ({
-  activeId,
   environmentId,
+  activeId,
   isMultiLanguageAllowed,
-  loading,
+  productChannel,
 }: ProductConfigNavigationProps) => {
   const pathname = usePathname();
   let navigation = [
@@ -55,14 +56,23 @@ export const ProductConfigNavigation = ({
       href: `/environments/${environmentId}/product/api-keys`,
       current: pathname?.includes("/api-keys"),
     },
+    {
+      id: "website-connection",
+      label: "Website Connection",
+      icon: <ListChecksIcon className="h-5 w-5" />,
+      href: `/environments/${environmentId}/product/website-connection`,
+      current: pathname?.includes("/website-connection"),
+      hidden: !!(productChannel && productChannel !== "website"),
+    },
     {
       id: "app-connection",
-      label: "Website & App Connection",
+      label: "App Connection",
       icon: <ListChecksIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/product/app-connection`,
       current: pathname?.includes("/app-connection"),
+      hidden: !!(productChannel && productChannel !== "app"),
     },
   ];
 
-  return <SecondaryNavigation navigation={navigation} activeId={activeId} loading={loading} />;
+  return <SecondaryNavigation navigation={navigation} activeId={activeId} />;
 };

apps/web/app/(app)/environments/[environmentId]/product/general/loading.tsx

@@ -1,11 +1,34 @@
 "use client";
 
-import { LoadingCard } from "@/app/(app)/components/LoadingCard";
-import { ProductConfigNavigation } from "@/app/(app)/environments/[environmentId]/product/components/ProductConfigNavigation";
+import { BrushIcon, KeyIcon, LanguagesIcon, ListChecksIcon, TagIcon, UsersIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { cn } from "@formbricks/lib/cn";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
+const LoadingCard = ({ title, description, skeletonLines }) => {
+  return (
+    <div className="w-full max-w-4xl rounded-xl border border-slate-200 bg-white py-4 shadow-sm">
+      <div className="grid content-center border-b border-slate-200 px-4 pb-4 text-left text-slate-900">
+        <h3 className="text-lg font-medium leading-6">{title}</h3>
+        <p className="mt-1 text-sm text-slate-500">{description}</p>
+      </div>
+      <div className="w-full">
+        <div className="rounded-lg px-4 py-4 pb-0 pt-2">
+          {skeletonLines.map((line, index) => (
+            <div key={index} className="mt-4">
+              <div className={`animate-pulse rounded-full bg-slate-200 ${line.classes}`}></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const Loading = () => {
+  const pathname = usePathname();
+
   const cards = [
     {
       title: "Product Name",
@@ -25,15 +48,83 @@ const Loading = () => {
     },
   ];
 
+  let navigation = [
+    {
+      id: "general",
+      label: "General",
+      icon: <UsersIcon className="h-5 w-5" />,
+      current: pathname?.includes("/general"),
+    },
+    {
+      id: "look",
+      label: "Look & Feel",
+      icon: <BrushIcon className="h-5 w-5" />,
+      current: pathname?.includes("/look"),
+    },
+    {
+      id: "languages",
+      label: "Survey Languages",
+      icon: <LanguagesIcon className="h-5 w-5" />,
+      hidden: true,
+      current: pathname?.includes("/languages"),
+    },
+    {
+      id: "tags",
+      label: "Tags",
+      icon: <TagIcon className="h-5 w-5" />,
+      current: pathname?.includes("/tags"),
+    },
+    {
+      id: "api-keys",
+      label: "API Keys",
+      icon: <KeyIcon className="h-5 w-5" />,
+      current: pathname?.includes("/api-keys"),
+    },
+    {
+      id: "website-connection",
+      label: "Website Connection",
+      icon: <ListChecksIcon className="h-5 w-5" />,
+      current: pathname?.includes("/website-connection"),
+      hidden: true,
+    },
+    {
+      id: "app-connection",
+      label: "App Connection",
+      icon: <ListChecksIcon className="h-5 w-5" />,
+      current: pathname?.includes("/app-connection"),
+      hidden: true,
+    },
+  ];
+
   return (
-    <PageContentWrapper>
-      <PageHeader pageTitle="Configuration">
-        <ProductConfigNavigation activeId="general" loading />
-      </PageHeader>
-      {cards.map((card, index) => (
-        <LoadingCard key={index} {...card} />
-      ))}
-    </PageContentWrapper>
+    <div>
+      <PageContentWrapper>
+        <PageHeader pageTitle="Configuration">
+          <div className="grid h-10 w-full grid-cols-[auto,1fr]">
+            <nav className="flex h-full min-w-full items-center space-x-4" aria-label="Tabs">
+              {navigation.map((navElem) => (
+                <div
+                  key={navElem.id}
+                  className={cn(
+                    navElem.id === "general"
+                      ? "border-brand-dark border-b-2 font-semibold text-slate-900"
+                      : "border-transparent text-slate-500 transition-all duration-150 ease-in-out hover:border-slate-300 hover:text-slate-700",
+                    "flex h-full items-center border-b-2 px-3 text-sm font-medium",
+                    navElem.hidden && "hidden"
+                  )}
+                  aria-current={navElem.id === "general" ? "page" : undefined}>
+                  {navElem.label}
+                </div>
+              ))}
+            </nav>
+            <div className="justify-self-end"></div>
+          </div>
+        </PageHeader>
+        {cards.map((card, index) => (
+          <LoadingCard key={index} {...card} />
+        ))}
+      </PageContentWrapper>
+    </div>
   );
 };
 

apps/web/app/(app)/environments/[environmentId]/product/general/page.tsx

@@ -43,6 +43,7 @@ const Page = async ({ params }: { params: { environmentId: string } }) => {
   }
 
   const isMultiLanguageAllowed = await getMultiLanguagePermission(organization);
+  const currentProductChannel = product?.config.channel ?? null;
 
   return (
     <PageContentWrapper>
@@ -51,17 +52,20 @@ const Page = async ({ params }: { params: { environmentId: string } }) => {
           environmentId={params.environmentId}
           activeId="general"
           isMultiLanguageAllowed={isMultiLanguageAllowed}
+          productChannel={currentProductChannel}
         />
       </PageHeader>
 
       <SettingsCard title="Product Name" description="Change your products name.">
         <EditProductNameForm product={product} isProductNameEditDisabled={isProductNameEditDisabled} />
       </SettingsCard>
-      <SettingsCard
-        title="Recontact Waiting Time"
-        description="Control how frequently users can be surveyed across all app surveys.">
-        <EditWaitingTimeForm product={product} />
-      </SettingsCard>
+      {currentProductChannel !== "link" && (
+        <SettingsCard
+          title="Recontact Waiting Time"
+          description="Control how frequently users can be surveyed across all surveys.">
+          <EditWaitingTimeForm product={product} />
+        </SettingsCard>
+      )}
       <SettingsCard
         title="Delete Product"
         description="Delete product with all surveys, responses, people, actions and attributes. This cannot be undone.">

apps/web/app/(app)/environments/[environmentId]/product/languages/loading.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import { ProductConfigNavigation } from "@/app/(app)/environments/[environmentId]/product/components/ProductConfigNavigation";
-import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
-import { LanguageLabels } from "@formbricks/ee/multi-language/components/language-labels";
-import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
-import { PageHeader } from "@formbricks/ui/components/PageHeader";
-
-const Loading = () => {
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle="Configuration">
-        <ProductConfigNavigation activeId="languages" loading />
-      </PageHeader>
-      <SettingsCard
-        title="Multi-language surveys"
-        description="Add languages to create multi-language surveys.">
-        <div className="flex flex-col space-y-4">
-          <LanguageLabels />
-          {[...Array(3)].map((_, idx) => (
-            <div key={idx} className="my-3 grid h-10 grid-cols-4 gap-4">
-              <div className="h-full animate-pulse rounded-md bg-slate-200" />
-              <div className="h-full animate-pulse rounded-md bg-slate-200" />
-              <div className="h-full animate-pulse rounded-md bg-slate-200" />
-            </div>
-          ))}
-        </div>
-      </SettingsCard>
-    </PageContentWrapper>
-  );
-};
-
-export default Loading;