feat: formbricks-js 1.1.4 release (#1455)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.env.docker

@@ -1,103 +0,0 @@
-########################################################################
-# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------#
-########################################################################
-
-
-############
-#  BASICS  #
-############
-
-NEXT_PUBLIC_WEBAPP_URL=http://localhost:3000
-
-##############
-#  DATABASE  #
-##############
-
-DATABASE_URL='postgresql://postgres:postgres@postgres:5432/formbricks?schema=public'
-
-# Uncomment to enable a dedicated connection pool for Prisma using Prisma Data Proxy
-# Cold boots will be faster and you'll be able to scale your DB independently of your app.
-# @see https://www.prisma.io/docs/data-platform/data-proxy/use-data-proxy
-# PRISMA_GENERATE_DATAPROXY=true
-PRISMA_GENERATE_DATAPROXY= 
-
-###############
-#  NEXT AUTH  #
-###############
-
-# @see: https://next-auth.js.org/configuration/options#nextauth_secret
-# You can use: `openssl rand -base64 32` to generate one
-NEXTAUTH_SECRET=RANDOM_STRING
-
-# Set this to your public-facing URL, e.g., https://example.com
-# You do not need the NEXTAUTH_URL environment variable in Vercel.
-NEXTAUTH_URL=http://localhost:3000
-
-# If you encounter NEXT_AUTH URL problems this should always be localhost:3000 (or whatever port your app is running on)
-# NEXTAUTH_URL_INTERNAL=http://localhost:3000
-
-################
-#  MAIL SETUP  #
-################
-
-# Necessary if email verification and password reset are enabled.
-# See optional configurations below if you want to disable these features.
-
-# MAIL_FROM=noreply@example.com
-# SMTP_HOST=localhost
-# SMTP_PORT=1025
-# Enable SMTP_SECURE_ENABLED for TLS (port 465)
-# SMTP_SECURE_ENABLED=0
-# SMTP_USER=smtpUser
-# SMTP_PASSWORD=smtpPassword
-
-
-########################################################################
-# ------------------------------ OPTIONAL -----------------------------#
-########################################################################
-
-# Uncomment the variables you would like to use and customize the values.
-
-#####################
-# Disable Features  #
-#####################
-
-# Email Verification. If you enable Email Verification you have to setup SMTP-Settings, too.
-NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED=1
-
-# Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
-NEXT_PUBLIC_PASSWORD_RESET_DISABLED=1
-
-# Signup. Disable the ability for new users to create an account.
-# NEXT_PUBLIC_SIGNUP_DISABLED=1
-
-# Team Invite. Disable the ability for invited users to create an account.
-# NEXT_PUBLIC_INVITE_DISABLED=1
-
-##########
-# Other  #
-##########
-
-# Display privacy policy, imprint and terms of service links in the footer of signup & public pages.
-NEXT_PUBLIC_PRIVACY_URL=
-NEXT_PUBLIC_TERMS_URL=
-NEXT_PUBLIC_IMPRINT_URL=
-
-# Disable Sentry warning
-SENTRY_IGNORE_API_RESOLUTION_ERROR=1
-
-# Enable Sentry Error Tracking
-NEXT_PUBLIC_SENTRY_DSN=
-
-# Configure Github Login
-NEXT_PUBLIC_GITHUB_AUTH_ENABLED=0
-GITHUB_ID=
-GITHUB_SECRET=
-
-# Configure Google Login
-NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=0
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
-
-# Cron Secret
-CRON_SECRET=

.env.example

@@ -1,3 +1,4 @@
+/*
 ########################################################################
 # ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------#
 ########################################################################
@@ -7,7 +8,21 @@
 #  BASICS  #
 ############
 
-NEXT_PUBLIC_WEBAPP_URL=http://localhost:3000
+WEBAPP_URL=http://localhost:3000
+
+SURVEY_BASE_URL=http://localhost:3000/s
+
+# Set this if you want to have a shorter link for surveys
+SHORT_SURVEY_BASE_URL=
+
+# Encryption keys
+# Please set both for now, we will change this in the future
+
+# You can use: `openssl rand -base64 16` to generate one
+FORMBRICKS_ENCRYPTION_KEY=
+
+# You can use: `openssl rand -base64 24` to generate one
+ENCRYPTION_KEY=
 
 ##############
 #  DATABASE  #
@@ -15,12 +30,6 @@ NEXT_PUBLIC_WEBAPP_URL=http://localhost:3000
 
 DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=public'
 
-# Uncomment to enable a dedicated connection pool for Prisma using Prisma Data Proxy
-# Cold boots will be faster and you'll be able to scale your DB independently of your app.
-# @see https://www.prisma.io/docs/data-platform/data-proxy/use-data-proxy
-# PRISMA_GENERATE_DATAPROXY=true
-PRISMA_GENERATE_DATAPROXY=
-
 ###############
 #  NEXT AUTH  #
 ###############
@@ -33,9 +42,6 @@ NEXTAUTH_SECRET=RANDOM_STRING
 # You do not need the NEXTAUTH_URL environment variable in Vercel.
 NEXTAUTH_URL=http://localhost:3000
 
-# If you encounter NEXT_AUTH URL problems this should always be localhost:3000 (or whatever port your app is running on)
-# NEXTAUTH_URL_INTERNAL=http://localhost:3000
-
 ################
 #  MAIL SETUP  #
 ################
@@ -63,36 +69,48 @@ SMTP_PASSWORD=smtpPassword
 #####################
 
 # Email Verification. If you enable Email Verification you have to setup SMTP-Settings, too.
-# NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED=1
+# EMAIL_VERIFICATION_DISABLED=1
 
 # Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
-# NEXT_PUBLIC_PASSWORD_RESET_DISABLED=1
+# PASSWORD_RESET_DISABLED=1
 
 # Signup. Disable the ability for new users to create an account.
-# NEXT_PUBLIC_SIGNUP_DISABLED=1
+# SIGNUP_DISABLED=1
 
 # Team Invite. Disable the ability for invited users to create an account.
-# NEXT_PUBLIC_INVITE_DISABLED=1
+# INVITE_DISABLED=1
 
 ##########
 # Other  #
 ##########
 
 # Display privacy policy, imprint and terms of service links in the footer of signup & public pages.
-NEXT_PUBLIC_PRIVACY_URL=
-NEXT_PUBLIC_TERMS_URL=
-NEXT_PUBLIC_IMPRINT_URL=
+PRIVACY_URL=
+TERMS_URL=
+IMPRINT_URL=
 
 # Configure Github Login
-NEXT_PUBLIC_GITHUB_AUTH_ENABLED=0
+GITHUB_AUTH_ENABLED=0
 GITHUB_ID=
 GITHUB_SECRET=
 
 # Configure Google Login
-NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=0
+GOOGLE_AUTH_ENABLED=0
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
+# Configure Azure Active Directory Login
+AZUREAD_AUTH_ENABLED=0
+AZUREAD_CLIENT_ID=
+AZUREAD_CLIENT_SECRET=
+AZUREAD_TENANT_ID=
+AZURE_DIRECT_REDIRECT=0
+
+# Cron Secret
+CRON_SECRET=
+
+# Configure this when you want to ship JS & CSS files from a complete URL instead of the current domain
+# ASSET_PREFIX_URL=
 
 # Stripe Billing Variables
 STRIPE_SECRET_KEY=
@@ -103,5 +121,12 @@ NEXT_PUBLIC_FORMBRICKS_API_HOST=
 NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
 NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
 
-# Cron Secret
-CRON_SECRET=
+# Oauth credentials for Google sheet integration 
+GOOGLE_SHEETS_CLIENT_ID=
+GOOGLE_SHEETS_CLIENT_SECRET=
+GOOGLE_SHEETS_REDIRECT_URL=
+
+# Oauth credentials for Airtable integration 
+AIR_TABLE_CLIENT_ID=
+
+*/

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -4,42 +4,45 @@ title: "[FEATURE]"
 labels: enhancement
 assignees: []
 body:
-- type: textarea
-  id: problem-description
-  attributes:
-    label: Is your feature request related to a problem? Please describe.
-    description: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-  validations:
-    required: true
-- type: textarea
-  id: solution-description
-  attributes:
-    label: Describe the solution you'd like
-    description: A clear and concise description of what you want to happen.
-  validations:
-    required: true
-- type: textarea
-  id: alternate-solution-description
-  attributes:
-    label: Describe alternatives you've considered
-    description: A clear and concise description of any alternative solutions or features you've considered.
-  validations:
-    required: false
-- type: textarea
-  id: additional-context
-  attributes:
-    label: Additional context
-    description: Add any other context or screenshots about the feature request here.
-  validations:
-    required: false
-- type: markdown
-  id: formbricks-info
-  attributes:
-    value: |
-      ### How we code at Formbricks 🤓
+  - type: textarea
+    id: problem-description
+    attributes:
+      label: Is your feature request related to a problem? Please describe.
+      description: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+    validations:
+      required: true
+  - type: textarea
+    id: solution-description
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: true
+  - type: textarea
+    id: alternate-solution-description
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: false
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.
+    validations:
+      required: false
+  - type: markdown
+    id: formbricks-info
+    attributes:
+      value: |
+        ### How we code at Formbricks 🤓
 
-      - Everything is type-safe
-      - All UI components are in the package `formbricks/ui`
-      - Run `pnpm dev` to find a demo app to test in-app surveys at `localhost:3002`
-      - We use **chatGPT** to help refactor code. Use our [Formbricks ✨ megaprompt ✨](https://github.com/formbricks/formbricks/blob/main/megaprompt.md) to create the right 
-        context before you write your prompt.
+        - Follow Best Practices lined out in our [Contributor Docs](https://formbricks.com/docs/contributing/how-we-code)
+        - First time: Please read our [introductory blog post](https://formbricks.com/blog/join-the-formtribe)
+        - All UI components are in the package `formbricks/ui`
+        - Run `pnpm go` to find a demo app to test in-app surveys at `localhost:3002`
+        - Everything is type-safe
+        - We use **chatGPT** to help refactor code. Use our [Formbricks ✨ megaprompt ✨](https://github.com/formbricks/formbricks/blob/main/megaprompt.md) to create the right 
+          context before you write your prompt.
+        - Anything unclear? [Ask in Discord](https://formbricks.com/discord)

.github/PULL_REQUEST_TEMPLATE.md

@@ -31,9 +31,10 @@ Fixes # (issue)
 
 <!-- We're starting to get more and more contributions. Please help us making this efficient for all of us and go through this checklist. Please tick off what you did  -->
 
-- [ ] Added a screen recording or screenshots to this PR
+### Required
+
 - [ ] Filled out the "How to test" section in this PR
-- [ ] Read the [contributing guide](https://github.com/formbricks/formbricks/blob/main/CONTRIBUTING.md)
+- [ ] Read [How we Code at Formbricks](<[https://github.com/formbricks/formbricks/blob/main/CONTRIBUTING.md](https://formbricks.com/docs/contributing/how-we-code)>)
 - [ ] Self-reviewed my own code
 - [ ] Commented on my code in hard-to-understand bits
 - [ ] Ran `pnpm build`
@@ -41,4 +42,9 @@ Fixes # (issue)
 - [ ] Removed all `console.logs`
 - [ ] Merged the latest changes from main onto my branch with `git pull origin main`
 - [ ] My changes don't cause any responsiveness issues
+- [ ] First PR at Formbricks? [Please sign the CLA!](https://formbricks.com/clmyhzfrymr4ko00hycsg1tvx) Without it we wont be able to merge it 🙏
+
+### Appreciated
+
+- [ ] If a UI change was made: Added a screen recording or screenshots to this PR
 - [ ] Updated the Formbricks Docs if changes were necessary

.github/workflows/build.yml

@@ -1,27 +1,23 @@
-name: Tests
+name: Build
 on:
   workflow_call:
 jobs:
   build:
-    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+    name: Build Formbricks-web
     runs-on: ubuntu-latest
     timeout-minutes: 30
 
-    env:
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 18.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
@@ -29,5 +25,10 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
-      - name: Build formbricks-js dependencies
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -base64 24)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
+      - name: Build Formbricks-web
         run: pnpm build --filter=web...

.github/workflows/labeler.yml

@@ -6,6 +6,7 @@ concurrency:
   cancel-in-progress: true
 jobs:
   labeler:
+    name: Pull Request Labeler
     permissions:
       contents: read
       pull-requests: write

.github/workflows/lint.yml

@@ -3,28 +3,32 @@ on:
   workflow_call:
 jobs:
   build:
-    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+    name: Linters
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
-    env:
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 18.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
 
+      - name: create .env
+        run: cp .env.example .env
+
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -base64 24)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Lint
         run: pnpm lint

.github/workflows/nextjs-bundle-analysis.yml

@@ -1,125 +0,0 @@
-# Copyright (c) HashiCorp, Inc.
-# SPDX-License-Identifier: MPL-2.0
-
-name: "Next.js Bundle Analysis"
-
-on:
-  workflow_call:
-  push:
-    branches:
-      - main
-
-defaults:
-  run:
-    # change this if your nextjs app does not live at the root of the repo
-    working-directory: ./
-
-permissions:
-  contents: read # for checkout repository
-  actions: read # for fetching base branch bundle stats
-  pull-requests: write # for comments
-
-jobs:
-  analyze:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      # If pnpm is used, you need to switch the previous step with the following one. pnpm does not create a package-lock.json
-      # so the step above will fail to pull dependencies
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 7
-          run_install: true
-
-      - name: Restore next build
-        uses: actions/cache@v3
-        id: restore-build-cache
-        env:
-          cache-name: cache-next-build
-        with:
-          # if you use a custom build directory, replace all instances of `.next` in this file with your build directory
-          # ex: if your app builds to `dist`, replace `.next` with `dist`
-          path: apps/web/.next/cache
-          # change this if you prefer a more strict cache
-          key: ${{ runner.os }}-build-${{ env.cache-name }}
-
-      - name: Build next.js app
-        # change this if your site requires a custom build command
-        run: pnpm build --filter=web...
-
-      # Here's the first place where next-bundle-analysis' own script is used
-      # This step pulls the raw bundle stats for the current bundle
-      - name: Analyze bundle
-        run: npx -p nextjs-bundle-analysis report
-
-      - name: Upload bundle
-        uses: actions/upload-artifact@v3
-        with:
-          name: bundle
-          path: apps/web/.next/analyze/__bundle_analysis.json
-
-      - name: Download base branch bundle stats
-        uses: dawidd6/action-download-artifact@v2
-        if: success() && github.event.number
-        with:
-          workflow: nextjs_bundle_analysis.yml
-          branch: ${{ github.event.pull_request.base.ref }}
-          path: apps/web/.next/analyze/base
-
-      # And here's the second place - this runs after we have both the current and
-      # base branch bundle stats, and will compare them to determine what changed.
-      # There are two configurable arguments that come from package.json:
-      #
-      # - budget: optional, set a budget (bytes) against which size changes are measured
-      #           it's set to 350kb here by default, as informed by the following piece:
-      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
-      #
-      # - red-status-percentage: sets the percent size increase where you get a red
-      #                          status indicator, defaults to 20%
-      #
-      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
-      # entry in your package.json file.
-      - name: Compare with base branch bundle
-        if: success() && github.event.number
-        run: ls -laR apps/web/.next/analyze/base && npx -p nextjs-bundle-analysis compare
-
-      - name: Get Comment Body
-        id: get-comment-body
-        if: success() && github.event.number
-        # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
-        run: |
-          echo "body<<EOF" >> $GITHUB_OUTPUT
-          echo "$(cat apps/web/.next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT
-          echo EOF >> $GITHUB_OUTPUT
-
-      - name: Find Comment
-        uses: peter-evans/find-comment@v2
-        if: success() && github.event.number
-        id: fc
-        with:
-          issue-number: ${{ github.event.number }}
-          body-includes: "<!-- __NEXTJS_BUNDLE -->"
-
-      - name: Create Comment
-        uses: peter-evans/create-or-update-comment@v2
-        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
-        with:
-          issue-number: ${{ github.event.number }}
-          body: ${{ steps.get-comment-body.outputs.body }}
-
-      - name: Update Comment
-        uses: peter-evans/create-or-update-comment@v2
-        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
-        with:
-          issue-number: ${{ github.event.number }}
-          body: ${{ steps.get-comment-body.outputs.body }}
-          comment-id: ${{ steps.fc.outputs.comment-id }}
-          edit-mode: replace

.github/workflows/pr.yml

@@ -4,9 +4,6 @@ on:
   pull_request_target:
     branches:
       - main
-    paths-ignore:
-      - "**.md"
-      - ".github/CODEOWNERS"
   merge_group:
   workflow_dispatch:
 
@@ -16,27 +13,22 @@ concurrency:
 
 jobs:
   test:
-    name: Unit tests
+    name: Run Tests
     uses: ./.github/workflows/test.yml
     secrets: inherit
 
   lint:
-    name: Linters
+    name: Run Linters
     uses: ./.github/workflows/lint.yml
     secrets: inherit
 
-  build-production:
-    name: Production build (without database)
-    uses: ./.github/workflows/build-production.yml
-    secrets: inherit
-
-  analyze:
-    needs: build-production
-    uses: ./.github/workflows/nextjs-bundle-analysis.yml
+  build:
+    name: Build Formbricks-web
+    uses: ./.github/workflows/build.yml
     secrets: inherit
 
   required:
-    needs: [lint, test, build-production]
+    needs: [lint, test, build]
     if: always()
     runs-on: ubuntu-latest
     steps:

.github/workflows/release-docker.yml

@@ -12,7 +12,18 @@ jobs:
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+      DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
     steps:
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 16)
+          echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
+
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -base64 24)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Checkout Repo
         uses: actions/checkout@v2
 
@@ -41,3 +52,6 @@ jobs:
           tags: |
             ${{ secrets.DOCKER_USERNAME }}/formbricks:${{ env.RELEASE_TAG }}
             ${{ secrets.DOCKER_USERNAME }}/formbricks:latest
+          build-args: |
+            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
+            DATABASE_URL=${{ env.DATABASE_URL }}

.github/workflows/semantic-pull-requests.yml

@@ -1,4 +1,4 @@
-name: "Validate PRs"
+name: "Check PR"
 
 on:
   pull_request_target:
@@ -13,7 +13,7 @@ permissions:
 
 jobs:
   validate-pr:
-    name: Validate PR title
+    name: PR title
     runs-on: ubuntu-latest
     steps:
       - uses: amannn/action-semantic-pull-request@v5

.github/workflows/test.yml

@@ -3,7 +3,7 @@ on:
   workflow_call:
 jobs:
   build:
-    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+    name: Tests
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
@@ -13,15 +13,15 @@ jobs:
 
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 18.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64

.gitpod.yml

@@ -32,8 +32,12 @@ tasks:
     command: |
       gp sync-await init &&
       cp .env.example .env &&
-      sed -i -r "s#^(NEXT_PUBLIC_WEBAPP_URL=).*#\1 $(gp url 3000)#" .env &&
+      sed -i -r "s#^(WEBAPP_URL=).*#\1 $(gp url 3000)#" .env &&
       sed -i -r "s#^(NEXTAUTH_URL=).*#\1 $(gp url 3000)#" .env &&
+      RANDOM_FORMBRICKS_ENCRYPTION_KEY=$(openssl rand -base64 16)
+      sed -i 's/^FORMBRICKS_ENCRYPTION_KEY=.*/FORMBRICKS_ENCRYPTION_KEY='"$RANDOM_FORMBRICKS_ENCRYPTION_KEY"'/' .env
+      RANDOM_ENCRYPTION_KEY=$(openssl rand -base64 24)
+      sed -i 's/^ENCRYPTION_KEY=.*/ENCRYPTION_KEY='"$RANDOM_ENCRYPTION_KEY"'/' .env
       turbo --filter "@formbricks/web" go
       
 image:
@@ -57,7 +61,7 @@ ports:
     onOpen: ignore
   - port: 8025
     visibility: public
-    onOpen: ignore
+    onOpen: open-browser
     
 github:
   prebuilds:

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpm lint-staged
+pnpm lint-staged

.npmrc

@@ -3,4 +3,6 @@ link-workspace-packages = true
 shamefully-hoist = true
 shared-workspace-shrinkwrap = true
 access = public
-enable-pre-post-scripts = true
+enable-pre-post-scripts = true
+legacy-peer-deps=true
+node-linker=hoisted

CODE_OF_CONDUCT.md

@@ -0,0 +1,70 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in Formbricks and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct that could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+We as project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+We have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project email address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hola@formbricks.com - all complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident.
+
+## Enforcement Guidelines
+
+Community managers will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public of private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior,  harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+
+## Attribution
+
+This Code of Conduct is adapted from the Contributor Covenant, version 2.0, available at [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html).

CONTRIBUTING.md

@@ -1,29 +1,34 @@
-We are so happy that you are interested in contributing to Formbricks 🤗
+# 🚀 Join the Formbricks Tribe! 🧱
 
-There are many ways to contribute to Formbricks with writing Issues, fixing bugs, building new features or updating the docs.
+First and foremost, we're absolutely thrilled that you're considering becoming a part of the Formbricks Tribe! 🤗
 
-# Issues
+Discover a myriad of ways to leave your mark on Formbricks — whether it's by squashing bugs, crafting new features, or enhancing our documentation.
 
-Spotted a bug? Has deployment gone wrong? Do you have user feedback? [Raise an issue](https://github.com/formbricks/formbricks/issues/new/choose) for the fastest response.
+## 🐛 Issue Hunters
 
-... or pick up and fix an issue if you want to do a Pull Request.
+Did you stumble upon a bug? Encountered a hiccup in deployment? Perhaps you have some user feedback to share? Your quickest route to help us out is by [raising an issue](https://github.com/formbricks/formbricks/issues/new/choose). We're on standby to respond swiftly. 
 
-# Feature requests
+## 💡 Feature Architects
 
-Raise an issue for these and tag it as an Enhancement. We love every idea. Please give us as much context on the why as possible.
+Are you brimming with brilliant ideas? For new features that can elevate Formbricks, create an issue and slap on the "Enhancement" tag. We adore every concept that you throw our way. Just make sure to provide us with the "why" behind your idea. We're all ears!
 
-# Creating a PR
+## 🛠 Crafting Pull Requests
 
-Please fork the repository, make your changes and create a new pull request if you want to make an update.
+Ready to dive into the code and make a real impact? Here's your path:
 
-If you want to speak to us before doing lots of work, please join our [Discord server](https://formbricks.com/discord) and tell us what you would like to work on - we're very responsive and friendly!
+1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/contributing/how-we-code) but will help you save hours 🤓
 
-For QA of your Pull-Request, you can also get in touch with Matti on Discord. But we will also get to your PR without you taking additional action ;-)
+1. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/contributing/gitpod)
 
-# Features
+2. **Tweak and Transform:** Work your coding magic and apply your changes.
 
-We are currently working on having a clear [Roadmap](https://github.com/orgs/formbricks/projects/1) for the next steps ahead.
+3. **Pull Request Act:** If you're ready to go, craft a new pull request closely following our PR template 🙏
 
-But you can also pick a feature that is not already on the roadmap if you think it creates a positive impact for Formbricks.
+Would you prefer a chat before you dive into a lot of work? Our [Discord server](https://formbricks.com/discord) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
 
-If you are at all unsure, just raise it as an enhancement issue first and tell us that you like to work on it, and we'll very quickly respond.
+
+## 🚀 Aspiring Features
+
+If you spot a feature that isn't part of our official plan but could propel Formbricks forward, don't hesitate. Raise it as an enhancement issue, and let us know you're ready to take the lead. We'll be quick to respond.
+
+Together, let's craft the future of Formbricks, making it better, bolder, and more brilliant! 🚀🧱🌟

README.md

@@ -1,3 +1,4 @@
+<div id="top"></div>
 <p align="center">
 <a href="https://formbricks.com">
     <img width="120" alt="Open Source Experience Management Solution Qualtrics Alternative Logo" src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
@@ -29,6 +30,18 @@
 <a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/675065/72e5e37b-8ef7-4340-b06e-f1d12a05330f#gh-light-mode-only" height="20px"></a><a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/72809645/9d9711dc-75e5-4084-b7fa-bbaf621064a8#gh-dark-mode-only" height="20px">
 </p>
 
+<p align="center">
+  <a href="https://trendshift.io/repositories/2570" target="_blank"><img src="https://trendshift.io/api/badge/repositories/2570" alt="Trendshift Badge for formbricks/formbricks" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
+
+<img width="1527" alt="formtribe hackathon" src="https://github.com/formbricks/formbricks/assets/72809645/addc3a5b-421c-4c8d-8be2-eedf087100ed">
+
+## 🔥 The FormTribe Hackathon is on!
+
+To celebrate Hacktoberfest, we've launched our FormTribe hackathon. Write code or perform non-code side quests to collect points and increase your chances of winning the MacBook Air M2!
+
+**Join lottery with a [single tweet!](https://formtribe.com). All info on [formtribe.com](https://formtribe.com)**
+
 ## ✨ About Formbricks
 
 <img width="1527" alt="formbricks-sneak" src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">
@@ -43,13 +56,13 @@ Formbricks helps you apply best practices from data-driven work and experience m
 
 ### Features
 
-- 📲 Create **in-product surveys** with our no code editor with multiple question types
-- 📚 Choose from a variety of best-practice **templates**
-- 👩🏻 Launch and **target your surveys to specific user groups** without changing your application code
-- 🔗 Create shareable **link surveys**
-- 👨‍👩‍👦 Invite your team members to **collaborate** on your surveys
-- 🔌 Integrate Formbricks with **Slack, Posthog, Zapier, n8n and more**
-- 🔒 All **open source**, transparent and self-hostable
+- 📲 Create **in-product surveys** with our no code editor with multiple question types.
+- 📚 Choose from a variety of best-practice **templates**.
+- 👩🏻 Launch and **target your surveys to specific user groups** without changing your application code.
+- 🔗 Create shareable **link surveys**.
+- 👨‍👩‍👦 Invite your team members to **collaborate** on your surveys.
+- 🔌 Integrate Formbricks with **Slack, Posthog, Zapier, n8n and more**.
+- 🔒 All **open source**, transparent and self-hostable.
 
 ### Built on Open Source
 
@@ -63,15 +76,53 @@ Formbricks helps you apply best practices from data-driven work and experience m
 
 ## 🚀 Getting started
 
+We've got several options depending on your need to help you quickly get started with Formbricks.
+
 ### ☁️ Cloud Version
 
-Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://formbricks.com)
+Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://formbricks.com).
 
 ### 🐳 Self-hosted version
 
-Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription. To get started with self-hosting, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).
+Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
 
-(In the future we may develop additional features that aren't in the free Open-Source version)
+(In the future we may develop additional features that aren't in the free Open-Source version).
+
+If you opt for self-hosting Formbricks, here are a few options to consider:
+
+#### Docker
+
+To get started with self-hosting with Docker, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).
+
+#### Community managed One Click Hosting
+
+##### Railway
+
+You can deploy Formbricks on [Railway](https://railway.app) using the button below.
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
+
+### 👨‍💻 Development
+
+#### Prerequisites
+
+Here is what you need to be able to run Formbricks:
+
+- [Node.js](https://nodejs.org/en) (Version: >=18.x)
+- [Pnpm](https://pnpm.io/)
+- [Docker](https://www.docker.com/) - to run PostgreSQL and MailHog
+
+#### Local Setup
+
+To get started locally, we've got a [guide to help you](https://formbricks.com/docs/contributing/setup).
+
+#### Gitpod Setup
+
+1. Click the button below to open this project in Gitpod.
+
+2. This will open a fully configured workspace in your browser with all the necessary dependencies already installed.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/formbricks/formbricks)
 
 ## ✍️ Contribution
 
@@ -79,12 +130,18 @@ We are very happy if you are interested in contributing to Formbricks 🤗
 
 Here are a few options:
 
-- Star this repo
-- Create issues every time you feel something is missing or goes wrong
-- Upvote issues with 👍 reaction so we know what's the demand for particular issue to prioritize it within roadmap
+- Star this repo.
+- Create issues every time you feel something is missing or goes wrong.
+- Upvote issues with 👍 reaction so we know what's the demand for a particular issue to prioritize it within the roadmap.
 
 Please check out [our contribution guide](https://formbricks.com/docs/contributing/introduction) and our [list of open issues](https://github.com/formbricks/formbricks/issues) for more information.
 
+## All Thanks To Our Contributors
+
+<a href="https://github.com/formbricks/formbricks/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=formbricks/formbricks" />
+</a>
+
 ## 📆 Contact us
 
 Let's have a chat about your survey needs and get you started.
@@ -93,8 +150,10 @@ Let's have a chat about your survey needs and get you started.
 
 ## ⚖️ License
 
-Distributed under the AGPLv3 License. See `LICENSE` for more information.
+Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.
 
 ## 🔒 Security
 
-We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See `SECURITY.md` for more information.
+We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See [`SECURITY.md`](./SECURITY.md) for more information.
+
+<p align="right"><a href="#top">🔼 Back to top</a></p>

SECURITY.md

@@ -1,39 +1,75 @@
-# Security
+# Security Policy of Formbricks
 
-Contact: security@formbricks.com
+This is Formbrick's security policy. Please reach out to us
+on our Discord or, if privately, via <security@formbricks.com>
 
-Based on [https://supabase.com/.well-known/security.txt](https://supabase.com/.well-known/security.txt)
+## Introduction
 
-At Formbricks, we consider the security of our systems a top priority. But no matter how much effort we put into system security, there can still be vulnerabilities present.
+Formbricks is dedicated to maintaining the integrity and security of our systems and our clients' data. In our pursuit to keep our technology environment safe, we welcome the collaborative efforts of our user community and security researchers to enhance security protocols and continuously secure our platform. This security policy outlines our approach towards handling data, ensuring secure practices, and managing the disclosure of vulnerabilities.
 
-If you discover a vulnerability, we would like to know about it so we can take steps to address it as quickly as possible. We would like to ask you to help us better protect our clients and our systems.
+## I. Third-Party Data Usage Policy
 
-## Out of scope vulnerabilities:
+We affirm our commitment towards meticulous validation of data usage and collection scope by any third-party library or integration utilized in our operations. We adhere to the following protocols:
 
-- Clickjacking on pages with no sensitive actions.
-- Unauthenticated/logout/login CSRF.
-- Attacks requiring MITM or physical access to a user's device.
-- Any activity that could lead to the disruption of our service (DoS).
-- Content spoofing and text injection issues without showing an attack vector/without being able to modify HTML/CSS.
-- Email spoofing
-- Missing DNSSEC, CAA, CSP headers
-- Lack of Secure or HTTP only flag on non-sensitive cookies
-- Deadlinks
+- Rigorous vetting of third-party services to confirm adherence to our data usage and privacy standards.
+- Continuous monitoring and assessment of third-party practices to ensure ongoing compliance.
+- Immediate action to mitigate risks if a third-party deviates from agreed-upon data practices.
 
-## Please do the following:
+## II. Annual Penetration Testing (Pentest)
 
-- E-mail your findings to [security@formbricks.com](mailto:security@formbricks.com).
-- Do not run automated scanners on our infrastructure or dashboard. If you wish to do this, contact us and we will set up a sandbox for you.
-- Do not take advantage of the vulnerability or problem you have discovered, for example by downloading more data than necessary to demonstrate the vulnerability or deleting or modifying other people's data,
-- Do not reveal the problem to others until it has been resolved,
-- Do not use attacks on physical security, social engineering, distributed denial of service, spam or applications of third parties,
-- Do provide sufficient information to reproduce the problem, so we will be able to resolve it as quickly as possible. Usually, the IP address or the URL of the affected system and a description of the vulnerability will be sufficient, but complex vulnerabilities may require further explanation.
+To understand and bolster our security stature, Formbricks undertakes:
 
-## What we promise:
+- Annual penetration testing executed by an independent, skilled third party.
+- Prioritization of any identified issues, with immediate action on critical vulnerabilities.
+- Transparent communication and learnings shared with relevant stakeholders.
 
-- We will respond to your report within 3 business days with our evaluation of the report and an expected resolution date,
-- If you have followed the instructions above, we will not take any legal action against you in regard to the report,
-- We will handle your report with strict confidentiality, and not pass on your personal details to third parties without your permission,
-- We will keep you informed of the progress towards resolving the problem,
-- In the public information concerning the problem reported, we will give your name as the discoverer of the problem (unless you desire otherwise), and
-- We strive to resolve all problems as quickly as possible, and we would like to play an active role in the ultimate publication on the problem after it is resolved.
+## III. Vulnerability Reporting and Management
+
+Please do not use attacks on physical security, social engineering, distributed denial of service, spam or applications of third parties.
+
+### **A. When to Report a Vulnerability**
+
+We invite you to report if:
+
+- A potential security vulnerability in Formbricks is identified.
+- There is uncertainty about how a vulnerability affects our platform.
+- A vulnerability is detected in a dependent project of Formbricks.
+- An action was executed which, in your belief, should be restricted.
+
+### **B. When Reporting is Unnecessary**
+
+Avoid reporting if:
+
+- Assistance is needed to optimize Formbricks for security – please engage on our Discord for this.
+- Help is required for applying security-related updates.
+- The concern is not related to security.
+
+### **C. Vulnerability Reporting Procedure**
+
+In the interest of responsibly managing vulnerabilities, please adhere to the following procedure:
+
+> Do not reveal the problem to others until it has been resolved.
+
+1. **Send a Detailed Report**:
+   - Address emails to [security@formbricks.com](mailto:security@formbricks.com).
+   - Include:
+     - Problem description.
+     - Detailed, reproducible steps, with screenshots where possible.
+     - Affected version(s).
+     - Known possible mitigations.
+     - Your Discord username or preferred contact method.
+2. **Acknowledgement of Receipt**:
+   - Our security team will acknowledge receipt and provide an initial response within 48 hours.
+   - Following verification of the vulnerability and the fix, a release plan will be formulated, with the fix deployed between 7 to 28 days, depending on the severity and complexity.
+3. **Ongoing Communication**:
+   - A project maintainer may engage with you for additional details or clarification.
+   - We appreciate your patience as we explore the reported item, verify its authenticity, and ascertain the existence of a vulnerability.
+
+---
+
+### Please Read the below carefully
+
+If you have followed the instructions above, we will **not** take any legal action against you in regard to the report,
+We will handle your report with strict confidentiality, and not pass on your personal details to third parties without your permission, We will keep you informed of the progress towards resolving the problem, In the public information concerning the problem reported, we will give your name as the discoverer of the problem (unless you desire otherwise).
+
+We, at Formbricks, wish to express our gratitude towards all individuals who assist us in fortifying our security posture. Your responsible disclosure and cooperation enable us to elevate our security protocols, safeguarding our platform and data therein.

apps/demo/.env.example

@@ -2,4 +2,4 @@ NEXT_PUBLIC_FORMBRICKS_API_HOST=http://localhost:3000
 NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=YOUR_ENVIRONMENT_ID
 
 # Copy the environment ID for the URL of your Formbricks App and
-# paste it above to connect your Formbricks App with the Demo App.
+# paste it above to connect your Formbricks App with the Demo App.

apps/demo/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@heroicons/react": "^2.0.18",
-    "next": "13.4.19",
+    "next": "13.5.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/demo/pages/app/index.tsx

@@ -15,7 +15,7 @@ export default function AppPage({}) {
   }, [darkMode]);
 
   return (
-    <div className="h-full bg-white px-12 py-6 dark:bg-slate-800">
+    <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
       <div className="flex flex-col justify-between md:flex-row">
         <div>
           <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
@@ -29,7 +29,7 @@ export default function AppPage({}) {
         <button
           className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
           onClick={() => setDarkMode(!darkMode)}>
-          Toggle Dark Mode
+          {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
         </button>
       </div>
 

apps/demo/pages/test-nocode-app/index.tsx

@@ -29,7 +29,7 @@ export default function AppPage({}) {
         <button
           className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
           onClick={() => setDarkMode(!darkMode)}>
-          Toggle Dark Mode
+          {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
         </button>
       </div>
 

apps/formbricks-com/app/docs/actions/code/page.mdx

@@ -1,7 +1,7 @@
 export const meta = {
-  title: "Code Actions",
+  title: "Implementing Code Actions in Formbricks | Real-time User Action Tracking",
   description:
-    "Integrate code actions in Formbricks using formbricks.track() to trigger surveys based on user actions, like button clicks, for precise insights. All open-source.",
+    "Dive into the world of Formbricks' code actions. Learn how to seamlessly integrate formbricks.track() method into your codebase, enabling real-time tracking of user actions like button clicks, visiting a specific URL. Up your survey game with precise and exact triggers.",
 };
 
 #### Actions
@@ -9,7 +9,7 @@ export const meta = {
 # Code Actions
 
 Actions can also be set in the code base. You can fire an action using `formbricks.track()`
-
+<Col>
 <CodeGroup title="Track an action">
 
 ```javascript
@@ -17,9 +17,9 @@ formbricks.track("Action Name");
 ```
 
 </CodeGroup>
-
+</Col>
 Here is an example of how to fire an action when a user clicks a button:
-
+<Col>
 <CodeGroup title="Track Button Click">
 
 ```javascript
@@ -31,3 +31,4 @@ return <button onClick={handleClick}>Click Me</button>;
 ```
 
 </CodeGroup>
+</Col>

apps/formbricks-com/app/docs/actions/no-code/page.mdx

@@ -1,7 +1,7 @@
 export const meta = {
-  title: "No-Code Actions",
+  title: "Implementing No-Code Actions in Formbricks | Real-time User Action Tracking",
   description:
-    "Utilize Formbricks' No-Code Actions like Page URL, innerText, and CSS Selector for easy survey triggers and enhanced user insights.",
+    "Discover the power of Formbricks' No-Code Actions. Easily set up triggers based on Page URL, innerText, and CSS Selectors without touching a line of code. Inccrease user engagement and get insights at precise moments in the user journey.",
 };
 
 #### Actions

apps/formbricks-com/app/docs/actions/why/page.mdx

@@ -1,7 +1,7 @@
 export const meta = {
-  title: "What are actions and why are they useful?",
+  title: "Using Actions in Formbricks | Fine-tuning User Moments",
   description:
-    "Actions in Formbricks enable targeted survey displays during specific user journey moments. Enhance user segmentation by tracking actions for granular surveying.",
+    "Dive deep into how actions in Formbricks help products and teams to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",
 };
 
 #### Actions

apps/formbricks-com/app/docs/api/client/displays/page.mdx

@@ -1,17 +1,21 @@
 import { Fence } from "@/components/shared/Fence";
 
 export const meta = {
-  title: "Responses API",
+  title: "Formbricks Public Client API Guide: Manage Survey Displays & Responses",
   description:
-    "Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
+    "Dive deep into Formbricks' Public Client API designed for customisation. This comprehensive guide provides detailed instructions on how to mark surveys as displayed as well as responded for individual persons, ensuring seamless client-side interactions without compromising data security.",
 };
 
-#### Management API
+#### Client API
 
 # Displays API
 
 The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
 
+This set of API can be used to
+- [Mark Survey as Displayed](#mark-survey-as-displayed-for-person)
+- [Mark Survey as Responded](#mark-survey-as-responded-for-person)
+
 ---
 
 ## Mark Survey as Displayed for Person {{ tag: 'POST', label: '/api/v1/client/diplays' }}

apps/formbricks-com/app/docs/api/client/overview/page.mdx

@@ -1,7 +1,7 @@
 export const meta = {
-  title: "API Overview",
+  title: "Formbricks API Overview: Public Client & Management API Breakdown",
   description:
-    "Explore Formbricks' APIs: Public Client API for client-side tasks, and Management API for account management with secure API Key authentication.",
+    "Get a detailed understanding of Formbricks' dual API offerings: the unauthenticated Public Client API optimized for client-side tasks and the secured Management API for advanced account operations. Choose the perfect fit for your integration needs and ensure robust data handling",
 };
 
 #### API
@@ -10,10 +10,15 @@ export const meta = {
 
 Formbricks offers two types of APIs: the **Public Client API** and the **Management API**. Each API serves a different purpose, has different authentication requirements, and provides access to different data and settings.
 
+Checkout the [API Key Setup](/docs/api/api-key-setup) - to generate, store, or delete API Keys.
+
 ## Public Client API
 
 The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
 
+- [Displays API](/docs/api/client/displays) - Mark Survey as Displayed or Responded for a Person
+- [Responses API](/docs/api/client/responses) - Create & update responses for a survey
+
 ## Management API
 
 The Management API provides access to all data and settings that are visible in the Formbricks App. This API requires a personal API Key for authentication, which can be generated in the Settings section of the Formbricks App. With the Management API, you can manage your Formbricks account programmatically, accessing and modifying data and settings as needed.
@@ -24,6 +29,14 @@ API requests made to the Management API are authorized using a personal API key.
 
 To generate, store, or delete an API key, follow the instructions provided on the following page [API Key](/docs/api/api-key-setup).
 
+- [Action Class API](/docs/api/management/action-classes) - Create, Update, and Delete Action Classes
+- [Attribute Class API](/docs/api/management/attribute-classes) - Create, Update, and Delete Attribute Classes
+- [Me API](/docs/api/management/me) - Retrieve Account Information
+- [People API](/docs/api/management/people) - Create, Update, and Delete People
+- [Responses API](/docs/api/management/responses) - Create, Update, and Delete Responses
+- [Surveys API](/docs/api/management/surveys) - Create, Update, and Delete Surveys
+- [Webhook API](/docs/api/management/webhooks) - Create, Update, and Delete Webhooks
+
 <Note>
   By understanding the differences between these two APIs, you can choose the appropriate one for your needs,
   ensuring a secure and efficient integration with the Formbricks platform.

apps/formbricks-com/app/docs/api/client/responses/page.mdx

@@ -1,9 +1,9 @@
 import { Fence } from "@/components/shared/Fence";
 
 export const meta = {
-  title: "Responses API",
+  title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly",
   description:
-    "Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
+    "Unlock the full potential of Formbricks' Responses API. From fetching to updating survey responses, our comprehensive guide helps you integrate and manage survey data efficiently without compromising security. Ideal for client-side interactions.",
 };
 
 #### Management API
@@ -14,104 +14,6 @@ The Public Client API is designed for the JavaScript SDK and does not require au
 
 ---
 
-## List all responses {{ tag: 'GET', label: '/api/v1/responses' }}
-
-<Row>
-  <Col>
-
-    Retrieve all the responses you have received for all your surveys.
-
-    ### Mandatory Headers
-
-    <Properties>
-      <Property name="x-Api-Key" type="string">
-        Your Formbricks API key.
-      </Property>
-    </Properties>
-
-    ### Optional Query Params
-    <Properties>
-      <Property name="surveyId" type="string">
-        SurveyId to filter responses by.
-      </Property>
-    </Properties>
-
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="GET" label="/api/v1/responses">
-
-    ```bash {{ title: 'cURL' }}
-    curl --location \
-    'https://app.formbricks.com/api/v1/responses' \
-    --header \
-    'x-api-key: <your-api-key>'
-    ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-
-    ```json {{title:'200 Success'}}
-    {
-      "data":[
-        {
-          "id":"cllnfybxd051rpl0gieavthr9",
-          "createdAt":"2023-08-23T07:56:33.121Z",
-          "updatedAt":"2023-08-23T07:56:41.793Z",
-          "surveyId":"cllnfy2780fromy0hy7uoxvtn",
-          "finished":true,
-          "data":{
-              "ec7agikkr58j8uonhioinkyk":"Loved it!",
-              "gml6mgy71efgtq8np3s9je5p":"clicked",
-              "klvpwd4x08x8quesihvw5l92":"Product Manager",
-              "kp62fbqe8cfzmvy8qwpr81b2":"Very disappointed",
-              "lkjaxb73ulydzeumhd51sx9g":"Not interesed.",
-              "ryo75306flyg72iaeditbv51":"Would love if it had dark theme."
-          },
-          "meta":{
-              "url":"https://app.formbricks.com/s/cllnfy2780fromy0hy7uoxvtn",
-              "userAgent":{
-                "os":"Linux",
-                "browser":"Chrome"
-              }
-          },
-          "personAttributes":null,
-          "person":null,
-          "notes":[],
-          "tags":[]
-        }
-      ]
-    }
-    ```
-
-    ```json {{ title: '404 Not Found' }}
-    {
-      "code": "not_found",
-      "message": "cllnfy2780fromy0hy7uoxvt not found",
-      "details": {
-        "resource_id": "survey",
-        "resource_type": "cllnfy2780fromy0hy7uoxvt"
-      }
-    }
-    ```
-
-    ```json {{ title: '401 Not Authenticated' }}
-    {
-      "code": "not_authenticated",
-      "message": "Not authenticated",
-      "details": {
-        "x-Api-Key": "Header not provided or API Key invalid"
-        }
-    }
-    ```
-    </CodeGroup>
-
-  </Col>
-</Row>
-
----
-
 ## Create a response {{ tag: 'POST', label: '/api/v1/client/responses' }}
 
 Add a new response to a survey.
@@ -222,7 +124,7 @@ Add a new response to a survey.
 
 ---
 
-## Update a response {{ tag: 'POST', label: '/api/v1/client/responses/[responseId]' }}
+## Update a response {{ tag: 'POST', label: '/api/v1/client/responses/<response-id>' }}
 
 Update an existing response in a survey.
 
@@ -247,10 +149,10 @@ Update an existing response in a survey.
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/api/v1/client/responses/[responseId]">
+    <CodeGroup title="Request" tag="POST" label="/api/v1/client/responses/<response-id>">
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses/[responseId]' \
+    curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses/<response-id>' \
     --data-raw '{
       "personId": "clfqjny0v000ayzgsycx54a2c",
       "surveyId": "clfqz1esd0000yzah51trddn8",

apps/formbricks-com/app/docs/api/management/action-classes/page.mdx

@@ -0,0 +1,301 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Formbricks People API: Fetch or Create Person Overview",
+  description:
+    "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interactions while maintaining data privacy.",
+};
+
+#### Management API
+
+# Action Classes API
+
+This set of API can be used to
+- [List Actions](#get-all-action-classes)
+- [Get Action](#get-action-class-by-id)
+- [Create Actions](#create-action-class)
+- [Delete Actions](#delete-action-class)
+
+<Note>You will need an API Key to interact with these APIs.</Note>
+
+---
+
+## Get all Action Classes {{ tag: 'GET', label: '/api/v1/management/action-classes' }}
+
+<Row>
+  <Col>
+
+    Get all the existing action classes in your environment.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/action-classes">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/action-classes' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data": [
+        {
+            "id": "cln8k0t47000gz87nw4ibwv35",
+            "createdAt": "2023-10-02T07:13:19.207Z",
+            "updatedAt": "2023-10-02T07:13:19.207Z",
+            "name": "New Session",
+            "description": "Gets fired when a new session is created",
+            "type": "automatic",
+            "noCodeConfig": null,
+            "environmentId": "cln8k0t47000fz87njmmu2bck"
+        },
+        {
+            "id": "cln8k0t55000uz87noerwdooj",
+            "createdAt": "2023-10-02T07:13:19.241Z",
+            "updatedAt": "2023-10-02T07:13:19.241Z",
+            "name": "Invited Team Member",
+            "description": "Person invited a team member",
+            "type": "noCode",
+            "noCodeConfig": {
+                "type": "innerHtml",
+                "innerHtml": {
+                    "value": "Add Team Member"
+                }
+            },
+            "environmentId": "cln8k0t47000fz87njmmu2bck"
+        },
+        ]
+    }
+    ```
+
+    ```json {{ title: '401 Unauthorized' }}
+    {
+        "code": "not_authenticated",
+        "message": "Not authenticated",
+        "details": {
+            "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Get Action Class by ID {{ tag: 'GET', label: '/api/v1/management/action-classes/<action-class-id>' }}
+
+<Row>
+  <Col>
+
+    Fetch an action class by its ID.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/action-classes/<action-class-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/action-classes/<action-class-id>' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data": {
+        "id": "cln8k0t55000uz87noerwdooj",
+        "createdAt": "2023-10-02T07:13:19.241Z",
+        "updatedAt": "2023-10-02T07:13:19.241Z",
+        "name": "Invited Team Member",
+        "description": "Person invited a team member",
+        "type": "noCode",
+        "noCodeConfig": {
+            "type": "innerHtml",
+            "innerHtml": {
+                "value": "Add Team Member"
+            }
+        },
+        "environmentId": "cln8k0t47000fz87njmmu2bck"
+        }
+    }
+    ```
+
+    ```json {{ title: '401 Unauthorized' }}
+    {
+        "code": "not_authenticated",
+        "message": "Not authenticated",
+        "details": {
+            "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Create Action Class {{ tag: 'POST', label: '/api/v1/management/action-classes/' }}
+
+<Row>
+  <Col>
+
+    Create an action class.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+    ### Body
+
+    <CodeGroup title="Request Body">
+    ```json {{ title: 'cURL' }}
+    {
+        "environmentId": "cln8k0t47000fz87njmmu2bck",
+        "name": "My Action from API",
+        "type": "code"
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/api/v1/management/action-classes/">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST https://app.formbricks.com/api/v1/management/action-classes/ \
+     --header 'Content-Type: application/json' \
+     --header 'x-api-key: <your-api-key>' \
+     -d '{"environmentId": "cln8k0t47000fz87njmmu2bck", "name": "My Action from API", "type": "code"}'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+    "data": {
+        "id": "cln9w1cno0008z8zu79nk5w0c",
+        "createdAt": "2023-10-03T05:37:26.100Z",
+        "updatedAt": "2023-10-03T05:37:26.100Z",
+        "name": "My Action from API",
+        "description": null,
+        "type": "code",
+        "noCodeConfig": null,
+        "environmentId": "cln8k0t47000fz87njmmu2bck"
+        }
+    }
+    ```
+
+    ```json {{ title: '401 Unauthorized' }}
+    {
+        "code": "not_authenticated",
+        "message": "Not authenticated",
+        "details": {
+            "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Delete Action Class {{ tag: 'DELETE', label: '/api/v1/management/action-classes/<action-class-id>' }}
+
+<Row>
+  <Col>
+
+    Delete an action class by its ID.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="DELETE" label="/api/v1/management/action-classes/<action-class-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X DELETE https://app.formbricks.com/api/v1/management/action-classes/<action-class-id> \
+     --header 'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+    "data": {
+        "id": "cln9w1cno0008z8zu79nk5w0c",
+        "createdAt": "2023-10-03T05:37:26.100Z",
+        "updatedAt": "2023-10-03T05:37:26.100Z",
+        "name": "My Action from API",
+        "description": null,
+        "type": "code",
+        "noCodeConfig": null,
+        "environmentId": "cln8k0t47000fz87njmmu2bck"
+        }
+    }
+    ```
+
+    ```json {{ title: '401 Unauthorized' }}
+    {
+        "code": "not_authenticated",
+        "message": "Not authenticated",
+        "details": {
+            "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---

apps/formbricks-com/app/docs/api/management/api-key-setup/page.mdx

@@ -4,9 +4,9 @@ import AddApiKey from "./add-api-key.webp";
 import ApiKeySecret from "./api-key-secret.webp";
 
 export const meta = {
-  title: "API Key Setup",
+  title: "Formbricks API Key: Setup and Testing",
   description:
-    "Generate, store, and delete personal API keys for secure Formbricks access. Ensure safekeeping to prevent unauthorized account control.",
+    "This guide provides step-by-step instructions to generate, store, and delete API keys, ensuring safe and authenticated access to your Formbricks account.",
 };
 
 #### API

apps/formbricks-com/app/docs/api/management/attribute-classes/page.mdx

@@ -0,0 +1,292 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Formbricks People API: Fetch or Create Person Overview",
+  description:
+    "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interAttributes while maintaining data privacy.",
+};
+
+#### Management API
+
+# Attribute Classes API
+
+This set of API can be used to
+- [List Attributes](#get-all-attribute-classes)
+- [Get Attributes](#get-attribute-class-by-id)
+- [Create Attributes](#create-attribute-class)
+- [Delete Attributes](#delete-attribute-class)
+
+<Note>You will need an API Key to interact with these APIs.</Note>
+
+---
+
+## Get all Attribute Classes {{ tag: 'GET', label: '/api/v1/management/attribute-classes' }}
+
+<Row>
+  <Col>
+
+    Get all the existing attribute classes in your environment.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key. 
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/attribute-classes">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/attribute-classes' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data": [
+        {
+            "id": "cln8k0t47000kz87n3lh23zf0",
+            "createdAt": "2023-10-02T07:13:19.207Z",
+            "updatedAt": "2023-10-02T07:13:19.207Z",
+            "name": "email",
+            "description": "The email of the person",
+            "archived": false,
+            "type": "automatic",
+            "environmentId": "cln8k0t47000fz87njmmu2bck"
+        },
+        {
+            "id": "cln8k0t55000xz87nrtwbo7sf",
+            "createdAt": "2023-10-02T07:13:19.241Z",
+            "updatedAt": "2023-10-02T07:13:19.241Z",
+            "name": "Name",
+            "description": "Full Name of the Person",
+            "archived": false,
+            "type": "code",
+            "environmentId": "cln8k0t47000fz87njmmu2bck"
+        },
+        ]
+    }
+    ```
+
+    ```json {{ title: '401 Unauthorized' }}
+    {
+        "code": "not_authenticated",
+        "message": "Not authenticated",
+        "details": {
+            "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Get Attribute Class by ID {{ tag: 'GET', label: '/api/v1/management/attribute-classes/<attribute-class-id>' }}
+
+<Row>
+  <Col>
+
+    Fetch an Attribute class by its ID.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/attribute-classes/<attribute-class-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/attribute-classes/<attribute-class-id>' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+     "data": {
+        "id": "cln8k0t47000jz87nfwcey6mh",
+        "createdAt": "2023-10-02T07:13:19.207Z",
+        "updatedAt": "2023-10-02T07:13:19.207Z",
+        "name": "userId",
+        "description": "The internal ID of the person",
+        "archived": false,
+        "type": "automatic",
+        "environmentId": "cln8k0t47000fz87njmmu2bck"
+      }
+    }
+    ```
+
+    ```json {{ title: '401 Unauthorized' }}
+    {
+        "code": "not_authenticated",
+        "message": "Not authenticated",
+        "details": {
+            "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Create Attribute Class {{ tag: 'POST', label: '/api/v1/management/attribute-classes/' }}
+
+<Row>
+  <Col>
+
+    Create an Attribute class.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+    ### Body
+
+    <CodeGroup title="Request Body">
+    ```json {{ title: 'cURL' }}
+    {
+        "environmentId": "clmlmwdqq0003196ufewo6ibg",
+        "name": "My Attribute from API",
+        "type": "code",
+        "description": "My description"
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/api/v1/management/attribute-classes/">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST https://app.formbricks.com/api/v1/management/attribute-classes/ \
+     --header 'Content-Type: application/json' \
+     --header 'x-api-key: <your-api-key>' \
+     -d '{"environmentId": "clmlmwdqq0003196ufewo6ibg", "name": "My Attribute from API", "type": "code", "description":"My description"}'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+    "data": {
+        "id": "clna0hd7z0009z8zue2z3a7wy",
+        "createdAt": "2023-10-03T07:41:51.792Z",
+        "updatedAt": "2023-10-03T07:41:51.792Z",
+        "name": "My Attribute from API",
+        "description": null,
+        "archived": false,
+        "type": "code",
+        "environmentId": "cln8k0t47000fz87njmmu2bck"
+      }
+    }
+    ```
+
+    ```json {{ title: '401 Unauthorized' }}
+    {
+        "code": "not_authenticated",
+        "message": "Not authenticated",
+        "details": {
+            "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Delete Attribute Class {{ tag: 'DELETE', label: '/api/v1/management/attribute-classes/<attribute-class-id>' }}
+
+<Row>
+  <Col>
+
+    Delete an Attribute class by its ID.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="DELETE" label="/api/v1/management/attribute-classes/<attribute-class-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X DELETE https://app.formbricks.com/api/v1/management/attribute-classes/<attribute-class-id> \
+     --header 'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+    "data": {
+        "id": "clna0hd7z0009z8zue2z3a7wy",
+        "createdAt": "2023-10-03T07:41:51.792Z",
+        "updatedAt": "2023-10-03T07:41:51.792Z",
+        "name": "My Attribute from API",
+        "description": null,
+        "archived": false,
+        "type": "code",
+        "environmentId": "cln8k0t47000fz87njmmu2bck"
+      }
+    }
+    ```
+
+    ```json {{ title: '401 Unauthorized' }}
+    {
+        "code": "not_authenticated",
+        "message": "Not authenticated",
+        "details": {
+            "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---

apps/formbricks-com/app/docs/api/management/me/page.mdx

@@ -0,0 +1,78 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Formbricks People API: Fetch or Create Person Overview",
+  description:
+    "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interactions while maintaining data privacy.",
+};
+
+#### Management API
+
+# Me API
+
+This API can be used to get your own current environment details.
+
+<Note>You will need an API Key to interact with these APIs.</Note>
+
+---
+
+## Get Environment {{ tag: 'GET', label: '/api/v1/management/me' }}
+
+<Row>
+  <Col>
+
+    Get your current environment details.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/me">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/me' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+        "id": "cln8k0t47000fz87njmmu2bck",
+        "createdAt": "2023-10-02T07:13:19.207Z",
+        "updatedAt": "2023-10-02T07:14:14.162Z",
+        "type": "production",
+        "product": {
+            "id": "cln8k0t47000ez87n57aqywvz",
+            "name": "Demo Product"
+        },
+        "widgetSetupCompleted": true
+    }
+    ```
+
+    ```json {{ title: '401 Unauthorized' }}
+    {
+        "code": "not_authenticated",
+        "message": "Not authenticated",
+        "details": {
+            "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---

apps/formbricks-com/app/docs/api/management/people/page.mdx

@@ -0,0 +1,234 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Formbricks People API: Fetch or Create Person Overview",
+  description:
+    "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interactions while maintaining data privacy.",
+};
+
+#### Management API
+
+# People API
+
+This set of API can be used to
+- [List People](#list-people)
+- [Get Person](#get-person)
+- [Delete Person](#delete-person)
+
+<Note>You will need an API Key to interact with these APIs.</Note>
+
+---
+
+## List People {{ tag: 'GET', label: '/api/v1/management/people' }}
+
+<Row>
+  <Col>
+
+    List People
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/people">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/people' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data": [
+          {
+            "id": "b4wgrzl363dn3zb6yy5gf265",
+            "attributes": {
+                "userId": "CYO618",
+                "email": "sophia@amazon.com",
+                "Name": "Sophia Johnson",
+                "Role": "Designer",
+                "Company": "Amazon",
+                "Experience": "7 years",
+                "Usage Frequency": "Yearly",
+                "Company Size": "1628 employees",
+                "Product Satisfaction Score": "62",
+                "Recommendation Likelihood": "9"
+            },
+            "environmentId": "cln8k0t47000fz87njmmu2bck",
+            "createdAt": "2023-10-02T07:13:19.444Z",
+            "updatedAt": "2023-10-02T07:13:19.444Z"
+          },
+          {
+            "id": "jrb5iyzqvnkg9322ckhde3j4",
+            "attributes": {
+                "userId": "CYO511",
+                "email": "antonio@ibm.com",
+                "Name": "Antonio García",
+                "Role": "Designer",
+                "Company": "IBM",
+                "Experience": "1 years",
+                "Usage Frequency": "Weekly",
+                "Company Size": "4023 employees",
+                "Product Satisfaction Score": "77",
+                "Recommendation Likelihood": "4"
+            },
+            "environmentId": "cln8k0t47000fz87njmmu2bck",
+            "createdAt": "2023-10-02T07:13:19.444Z",
+            "updatedAt": "2023-10-02T07:13:19.444Z"
+          },
+      ]
+    }
+    ```
+
+    ```json {{ title: '400 Bad Request' }}
+    {
+      "code": "bad_request",
+      "message": "Fields are missing or incorrectly formatted",
+      "details": {
+        "userId": ""
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Get Person {{ tag: 'GET', label: '/api/v1/management/people/<person-id>' }}
+
+<Row>
+  <Col>
+
+    Get Person by ID
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/people/<person-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/people/<person-id>' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data": {
+        "id": "jrb5iyzqvnkg9322ckhde3j4",
+        "attributes": {
+            "userId": "CYO511",
+            "email": "antonio@ibm.com",
+            "Name": "Antonio García",
+            "Role": "Designer",
+            "Company": "IBM",
+            "Experience": "1 years",
+            "Usage Frequency": "Weekly",
+            "Company Size": "4023 employees",
+            "Product Satisfaction Score": "77",
+            "Recommendation Likelihood": "4"
+        },
+        "environmentId": "cln8k0t47000fz87njmmu2bck",
+        "createdAt": "2023-10-02T07:13:19.444Z",
+        "updatedAt": "2023-10-02T07:13:19.444Z"
+      }
+    }
+    ```
+
+    ```json {{ title: '404 Not Found' }}
+    {
+      "code": "not_found",
+      "message": "Person not found",
+      "details": {
+          "resource_id": "clmlmykc2000019vz5o3jglsa",
+          "resource_type": "Person"
+      }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Delete Person {{ tag: 'DELETE', label: '/api/v1/management/people/<person-id>' }}
+
+<Row>
+  <Col>
+
+    Delete Person by ID
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="DELETE" label="/api/v1/management/people/<person-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X DELETE https://app.formbricks.com/api/v1/management/people/<person-id> \
+     --header 'x-api-key: <your-api-key>'
+    ```
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data": {
+        "success": "Person deleted successfully"
+      }
+    }
+    ```
+
+    ```json {{ title: '404 Not Found' }}
+    {
+      "code": "not_found",
+      "message": "Person not found",
+      "details": {
+          "resource_id": "clmlmykc2000019vz5o3jglsa",
+          "resource_type": "Person"
+      }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---

apps/formbricks-com/app/docs/api/management/responses/page.mdx

@@ -0,0 +1,289 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly",
+  description:
+    "Unlock the full potential of Formbricks' Responses API. From fetching to updating survey responses, our comprehensive guide helps you integrate and manage survey data efficiently without compromising security. Ideal for client-side interactions.",
+};
+
+#### Management API
+
+# Responses API
+
+This set of API can be used to
+- [List Responses](#list-all-responses)
+- [Get Response](#get-response-by-id)
+- [Delete Response](#delete-a-response)
+
+<Note>You will need an API Key to interact with these APIs.</Note>
+
+---
+
+## List all Responses {{ tag: 'GET', label: '/api/v1/management/responses' }}
+
+<Row>
+  <Col>
+
+    Retrieve all the responses you have received in your environment.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/responses">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/responses' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data":[
+        {
+            "id": "cln8k0tqv00pcz87no4qrw333",
+            "createdAt": "2023-10-02T07:13:20.023Z",
+            "updatedAt": "2023-10-02T07:13:20.023Z",
+            "surveyId": "cln8k0tqu00p7z87nqr4thi3k",
+            "finished": true,
+            "data": {
+                "interview-prompt": "clicked"
+            },
+            "meta": {
+                "userAgent": {
+                    "os": "MacOS",
+                    "browser": "Chrome"
+                }
+            },
+            "personAttributes": null,
+            "person": {
+                "id": "e0x4i5tvsp8puxfztyrwykvn",
+                "attributes": {
+                    "userId": "CYO675",
+                    "email": "ravi@netflix.com",
+                    "Name": "Ravi Kumar",
+                    "Role": "Manager",
+                    "Company": "Netflix",
+                    "Experience": "6 years",
+                    "Usage Frequency": "Monthly",
+                    "Company Size": "4610 employees",
+                    "Product Satisfaction Score": "43",
+                    "Recommendation Likelihood": "4"
+                },
+                "environmentId": "cln8k0t47000fz87njmmu2bck",
+                "createdAt": "2023-10-02T07:13:19.444Z",
+                "updatedAt": "2023-10-02T07:13:19.444Z"
+            },
+            "notes": [],
+            "tags": []
+        },
+      ]
+    }
+    ```
+
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Get Response by ID {{ tag: 'GET', label: '/api/v1/management/responses/<response-id>' }}
+
+<Row>
+  <Col>
+
+    Retrieve a response by its ID.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/responses/<response-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/responses/<response-id>' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data":
+      {
+        "id": "cln8k0tqv00pbz87nwo5lr72b",
+        "createdAt": "2023-10-02T07:13:20.023Z",
+        "updatedAt": "2023-10-02T07:13:20.023Z",
+        "surveyId": "cln8k0tqu00p7z87nqr4thi3k",
+        "finished": true,
+        "data": {
+            "interview-prompt": "clicked"
+        },
+        "meta": {
+            "userAgent": {
+                "os": "Windows",
+                "browser": "Edge"
+            }
+        },
+        "personAttributes": null,
+        "person": {
+            "id": "hsx38f15v50ua8383uadagq5",
+            "attributes": {
+                "userId": "CYO278",
+                "email": "jorge@facebook.com",
+                "Name": "Jorge Sanchez",
+                "Role": "Product Manager",
+                "Company": "Facebook",
+                "Experience": "10 years",
+                "Usage Frequency": "Daily",
+                "Company Size": "1685 employees",
+                "Product Satisfaction Score": "84",
+                "Recommendation Likelihood": "6"
+            },
+            "environmentId": "cln8k0t47000fz87njmmu2bck",
+            "createdAt": "2023-10-02T07:13:19.444Z",
+            "updatedAt": "2023-10-02T07:13:19.444Z"
+        },
+        "notes": [],
+        "tags": []
+      }
+    }
+    ```
+
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Delete a response {{ tag: 'DELETE', label: '/api/v1/client/responses/<response-id>' }}
+
+<Row>
+  <Col>
+
+    Delete Response by ID
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="DELETE" label="/api/v1/client/responses/<response-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X DELETE https://app.formbricks.com/api/v1/management/resposnes/<response-id> \
+     --header 'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{ title: '200 Success' }}
+    {
+      "data": {
+        "id": "cln8k0tqv00pbz87nwo5lr72b",
+        "createdAt": "2023-10-02T07:13:20.023Z",
+        "updatedAt": "2023-10-02T07:13:20.023Z",
+        "surveyId": "cln8k0tqu00p7z87nqr4thi3k",
+        "finished": true,
+        "data": {
+            "interview-prompt": "clicked"
+        },
+        "meta": {
+            "userAgent": {
+                "os": "Windows",
+                "browser": "Edge"
+            }
+        },
+        "personAttributes": null,
+        "person": {
+            "id": "hsx38f15v50ua8383uadagq5",
+            "attributes": {
+                "userId": "CYO278",
+                "email": "jorge@facebook.com",
+                "Name": "Jorge Sanchez",
+                "Role": "Product Manager",
+                "Company": "Facebook",
+                "Experience": "10 years",
+                "Usage Frequency": "Daily",
+                "Company Size": "1685 employees",
+                "Product Satisfaction Score": "84",
+                "Recommendation Likelihood": "6"
+            },
+            "environmentId": "cln8k0t47000fz87njmmu2bck",
+            "createdAt": "2023-10-02T07:13:19.444Z",
+            "updatedAt": "2023-10-02T07:13:19.444Z"
+        },
+        "notes": [],
+        "tags": []
+      }
+    }
+    ```
+
+    ```json {{ title: '400 Bad Request' }}
+    {
+      "code": "bad_request",
+      "message": "surveyId was not provided.",
+      "details": {
+        "surveyId": "This field is required."
+      }
+    }
+    ```
+
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---

apps/formbricks-com/app/docs/api/management/surveys/page.mdx

@@ -0,0 +1,667 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Formbricks Surveys API Documentation - How to Retrieve All Surveys",
+  description:
+    "Explore the comprehensive guide to the Formbricks Surveys API. Learn how to effectively retrieve all the surveys in your environment with the necessary headers and API key setup. Includes sample request and response formats.",
+};
+
+#### Management API
+
+# Surveys API
+
+This set of API can be used to
+- [List All Surveys](#list-all-surveys)
+- [Get Survey](#get-survey-by-id)
+- [Create Survey](#create-survey)
+- [Delete Survey](#delete-survey-by-id)
+
+<Note>You will need an API Key to interact with these APIs.</Note>
+
+---
+
+## List all surveys {{ tag: 'GET', label: '/api/v1/management/surveys' }}
+
+<Row>
+  <Col>
+
+    Retrieve all the surveys you have for the environment.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/surveys">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/surveys' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+        "data": [
+            {
+                "id": "cllnfy2780fromy0hy7uoxvtn",
+                "createdAt": "2023-08-23T07:56:20.516Z",
+                "updatedAt": "2023-08-23T07:56:26.947Z",
+                "name": "Product Market Fit (Superhuman)",
+                "type": "link",
+                "environmentId": "cll2m30r70004mx0huqkitgqv",
+                "status": "inProgress",
+                "attributeFilters": [],
+                "displayOption": "displayOnce",
+                "autoClose": null,
+                "triggers": [],
+                "redirectUrl": null,
+                "recontactDays": null,
+                "questions": [
+                    {
+                        "id": "gml6mgy71efgtq8np3s9je5p",
+                        "type": "cta",
+                        "headline": "You are one of our power users! Do you have 5 minutes?",
+                        "required": false,
+                        "buttonLabel": "Happy to help!",
+                        "logic": [
+                            {
+                                "condition": "skipped",
+                                "destination": "end"
+                            }
+                        ],
+                        "html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We would love to understand your user experience better. Sharing your insight helps a lot!</span></p>",
+                        "buttonExternal": false,
+                        "dismissButtonLabel": "No, thanks."
+                    },
+                    {
+                        "id": "kp62fbqe8cfzmvy8qwpr81b2",
+                        "type": "multipleChoiceSingle",
+                        "headline": "How disappointed would you be if you could no longer use My Product?",
+                        "subheader": "Please select one of the following options:",
+                        "required": true,
+                        "choices": [
+                            {
+                                "id": "bdgy1hnwd7uwmfxk1ljqp1n5",
+                                "label": "Not at all disappointed"
+                            },
+                            {
+                                "id": "poabnvgtwenp8rb2v70gj4hj",
+                                "label": "Somewhat disappointed"
+                            },
+                            {
+                                "id": "opfiqyqz8wrqn0i0f7t24d3n",
+                                "label": "Very disappointed"
+                            }
+                        ],
+                        "shuffleOption": "none"
+                    },
+                    {
+                        "id": "klvpwd4x08x8quesihvw5l92",
+                        "type": "multipleChoiceSingle",
+                        "headline": "What is your role?",
+                        "subheader": "Please select one of the following options:",
+                        "required": true,
+                        "choices": [
+                            {
+                                "id": "c8nerw6l9gpsxcmqkn10f9hy",
+                                "label": "Founder"
+                            },
+                            {
+                                "id": "ebjqezei6a2axtuq86cleetn",
+                                "label": "Executive"
+                            },
+                            {
+                                "id": "ctiijjblyhlp22snypfamqt1",
+                                "label": "Product Manager"
+                            },
+                            {
+                                "id": "ibalyr0mhemfkkr82vypmg40",
+                                "label": "Product Owner"
+                            },
+                            {
+                                "id": "fipk606aegslbd0e7yhc0xjx",
+                                "label": "Software Engineer"
+                            }
+                        ],
+                        "shuffleOption": "none"
+                    },
+                    {
+                        "id": "ryo75306flyg72iaeditbv51",
+                        "type": "openText",
+                        "headline": "What type of people do you think would most benefit from My Product?",
+                        "required": true
+                    },
+                    {
+                        "id": "lkjaxb73ulydzeumhd51sx9g",
+                        "type": "openText",
+                        "headline": "What is the main benefit your receive from My Product?",
+                        "required": true
+                    },
+                    {
+                        "id": "ec7agikkr58j8uonhioinkyk",
+                        "type": "openText",
+                        "headline": "How can we improve My Product for you?",
+                        "subheader": "Please be as specific as possible.",
+                        "required": true
+                    }
+                ],
+                "thankYouCard": {
+                    "enabled": true,
+                    "headline": "Thank you!",
+                    "subheader": "We appreciate your feedback."
+                },
+                "delay": 0,
+                "autoComplete": null,
+                "closeOnDate": null
+            }
+        ]
+    }
+    ```
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Get Survey by ID {{ tag: 'GET', label: '/api/v1/management/surveys/<survey-id>' }}
+
+<Row>
+  <Col>
+
+    Get a specific survey by its ID.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/management/surveys/<survey-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/management/surveys/<survey-id>' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+    "data": {
+            "id": "cln8k0tjz00n5z87nwq527h3z",
+            "createdAt": "2023-10-02T07:13:19.775Z",
+            "updatedAt": "2023-10-02T07:13:19.775Z",
+            "name": "Churn Survey",
+            "type": "link",
+            "environmentId": "cln8k0t47000fz87njmmu2bck",
+            "status": "inProgress",
+            "attributeFilters": [],
+            "displayOption": "displayOnce",
+            "autoClose": null,
+            "triggers": [],
+            "redirectUrl": null,
+            "recontactDays": null,
+            "questions": [
+                {
+                    "id": "churn-reason",
+                    "type": "multipleChoiceSingle",
+                    "headline": "Why did you cancel your subscription?",
+                    "subheader": "We're sorry to see you leave. Help us do better:",
+                    "required": true,
+                    "logic": [
+                        {
+                            "condition": "equals",
+                            "value": "Difficult to use",
+                            "destination": "easier-to-use"
+                        },
+                        {
+                            "condition": "equals",
+                            "value": "It's too expensive",
+                            "destination": "30-off"
+                        },
+                        {
+                            "condition": "equals",
+                            "value": "I am missing features",
+                            "destination": "missing-features"
+                        },
+                        {
+                            "condition": "equals",
+                            "value": "Poor customer service",
+                            "destination": "poor-service"
+                        },
+                        {
+                            "condition": "equals",
+                            "value": "I just didn't need it anymore",
+                            "destination": "end"
+                        }
+                    ],
+                    "choices": [
+                        {
+                            "id": "isud2xethsw63dlwl89kr4kj",
+                            "label": "Difficult to use"
+                        },
+                        {
+                            "id": "opuu4ba3dlele3n0gjkuh27c",
+                            "label": "It's too expensive"
+                        },
+                        {
+                            "id": "gnypapo0rhvkt8pwosrphvbl",
+                            "label": "I am missing features"
+                        },
+                        {
+                            "id": "wkgsrsrazd9kfunqhzjezx6t",
+                            "label": "Poor customer service"
+                        },
+                        {
+                            "id": "pykmgyyw74vg0gaeryj6bo4c",
+                            "label": "I just didn't need it anymore"
+                        }
+                    ]
+                },
+                {
+                    "id": "easier-to-use",
+                    "type": "openText",
+                    "headline": "What would have made {{productName}} easier to use?",
+                    "subheader": "",
+                    "required": true,
+                    "buttonLabel": "Send",
+                    "logic": [
+                        {
+                            "condition": "submitted",
+                            "destination": "end"
+                        }
+                    ]
+                },
+                {
+                    "id": "30-off",
+                    "type": "cta",
+                    "headline": "Get 30% off for the next year!",
+                    "required": true,
+                    "buttonLabel": "Get 30% off",
+                    "logic": [
+                        {
+                            "condition": "clicked",
+                            "destination": "end"
+                        }
+                    ],
+                    "html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We'd love to keep you as a customer. Happy to offer a 30% discount for the next year.</span></p>",
+                    "buttonUrl": "https://formbricks.com",
+                    "buttonExternal": true,
+                    "dismissButtonLabel": "Skip"
+                },
+                {
+                    "id": "missing-features",
+                    "type": "openText",
+                    "headline": "What features are you missing?",
+                    "subheader": "",
+                    "required": true,
+                    "logic": [
+                        {
+                            "condition": "submitted",
+                            "destination": "end"
+                        }
+                    ]
+                },
+                {
+                    "id": "poor-service",
+                    "type": "cta",
+                    "headline": "So sorry to hear 😔 Talk to our CEO directly!",
+                    "required": true,
+                    "buttonLabel": "Send email to CEO",
+                    "logic": [
+                        {
+                            "condition": "clicked",
+                            "destination": "end"
+                        }
+                    ],
+                    "html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We aim to provide the best possible customer service. Please email our CEO and she will personally handle your issue.</span></p>",
+                    "buttonUrl": "mailto:ceo@company.com",
+                    "buttonExternal": true,
+                    "dismissButtonLabel": "Skip"
+                }
+            ],
+            "thankYouCard": {
+                "enabled": false
+            },
+            "delay": 0,
+            "autoComplete": null,
+            "closeOnDate": null,
+            "surveyClosedMessage": null,
+            "verifyEmail": null
+        }
+    }
+    ```
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Create Survey {{ tag: 'POST', label: '/api/v1/management/surveys' }}
+
+<Row>
+  <Col>
+
+    Create a survey
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+    ### Body
+
+    <CodeGroup title="Request Body">
+    ```json {{ title: 'cURL' }}
+    {
+        "environmentId": "clmlmwdqq0003196ufewo6ibg",
+        "type": "link",
+        "name": "My new Survey"
+    }
+    ```
+    </CodeGroup>
+
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/api/v1/management/surveys">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X DELETE \
+    'https://app.formbricks.com/api/v1/management/surveys' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST https://app.formbricks.com/api/v1/management/surveys/ \
+     --header 'Content-Type: application/json' \
+     --header 'x-api-key: <your-api-key>' \
+     -d '{"environmentId": "cln8k0t47000fz87njmmu2bck", "name": "My Survey from API", "type": "link"}'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+    "data": {
+        "id": "clna6bqnz000az8zubq3e757t",
+            "createdAt": "2023-10-03T10:25:26.975Z",
+            "updatedAt": "2023-10-03T10:25:26.975Z",
+            "name": "My new Survey",
+            "redirectUrl": null,
+            "type": "link",
+            "environmentId": "cln8k0t47000fz87njmmu2bck",
+            "status": "draft",
+            "questions": [],
+            "thankYouCard": {
+                "enabled": false
+            },
+            "displayOption": "displayOnce",
+            "recontactDays": null,
+            "autoClose": null,
+            "delay": 0,
+            "autoComplete": null,
+            "closeOnDate": null,
+            "surveyClosedMessage": null,
+            "verifyEmail": null
+        }
+    }
+    ```
+    
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+
+## Delete Survey by ID {{ tag: 'DELETE', label: '/api/v1/management/surveys/<survey-id>' }}
+
+<Row>
+  <Col>
+
+    Delete a survey by its ID.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="DELETE" label="/api/v1/management/surveys/<survey-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X DELETE \
+    'https://app.formbricks.com/api/v1/management/surveys/<survey-id>' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+    "data": {
+            "id": "cln8k0tjz00n5z87nwq527h3z",
+            "createdAt": "2023-10-02T07:13:19.775Z",
+            "updatedAt": "2023-10-02T07:13:19.775Z",
+            "name": "Churn Survey",
+            "type": "link",
+            "environmentId": "cln8k0t47000fz87njmmu2bck",
+            "status": "inProgress",
+            "attributeFilters": [],
+            "displayOption": "displayOnce",
+            "autoClose": null,
+            "triggers": [],
+            "redirectUrl": null,
+            "recontactDays": null,
+            "questions": [
+                {
+                    "id": "churn-reason",
+                    "type": "multipleChoiceSingle",
+                    "headline": "Why did you cancel your subscription?",
+                    "subheader": "We're sorry to see you leave. Help us do better:",
+                    "required": true,
+                    "logic": [
+                        {
+                            "condition": "equals",
+                            "value": "Difficult to use",
+                            "destination": "easier-to-use"
+                        },
+                        {
+                            "condition": "equals",
+                            "value": "It's too expensive",
+                            "destination": "30-off"
+                        },
+                        {
+                            "condition": "equals",
+                            "value": "I am missing features",
+                            "destination": "missing-features"
+                        },
+                        {
+                            "condition": "equals",
+                            "value": "Poor customer service",
+                            "destination": "poor-service"
+                        },
+                        {
+                            "condition": "equals",
+                            "value": "I just didn't need it anymore",
+                            "destination": "end"
+                        }
+                    ],
+                    "choices": [
+                        {
+                            "id": "isud2xethsw63dlwl89kr4kj",
+                            "label": "Difficult to use"
+                        },
+                        {
+                            "id": "opuu4ba3dlele3n0gjkuh27c",
+                            "label": "It's too expensive"
+                        },
+                        {
+                            "id": "gnypapo0rhvkt8pwosrphvbl",
+                            "label": "I am missing features"
+                        },
+                        {
+                            "id": "wkgsrsrazd9kfunqhzjezx6t",
+                            "label": "Poor customer service"
+                        },
+                        {
+                            "id": "pykmgyyw74vg0gaeryj6bo4c",
+                            "label": "I just didn't need it anymore"
+                        }
+                    ]
+                },
+                {
+                    "id": "easier-to-use",
+                    "type": "openText",
+                    "headline": "What would have made {{productName}} easier to use?",
+                    "subheader": "",
+                    "required": true,
+                    "buttonLabel": "Send",
+                    "logic": [
+                        {
+                            "condition": "submitted",
+                            "destination": "end"
+                        }
+                    ]
+                },
+                {
+                    "id": "30-off",
+                    "type": "cta",
+                    "headline": "Get 30% off for the next year!",
+                    "required": true,
+                    "buttonLabel": "Get 30% off",
+                    "logic": [
+                        {
+                            "condition": "clicked",
+                            "destination": "end"
+                        }
+                    ],
+                    "html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We'd love to keep you as a customer. Happy to offer a 30% discount for the next year.</span></p>",
+                    "buttonUrl": "https://formbricks.com",
+                    "buttonExternal": true,
+                    "dismissButtonLabel": "Skip"
+                },
+                {
+                    "id": "missing-features",
+                    "type": "openText",
+                    "headline": "What features are you missing?",
+                    "subheader": "",
+                    "required": true,
+                    "logic": [
+                        {
+                            "condition": "submitted",
+                            "destination": "end"
+                        }
+                    ]
+                },
+                {
+                    "id": "poor-service",
+                    "type": "cta",
+                    "headline": "So sorry to hear 😔 Talk to our CEO directly!",
+                    "required": true,
+                    "buttonLabel": "Send email to CEO",
+                    "logic": [
+                        {
+                            "condition": "clicked",
+                            "destination": "end"
+                        }
+                    ],
+                    "html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We aim to provide the best possible customer service. Please email our CEO and she will personally handle your issue.</span></p>",
+                    "buttonUrl": "mailto:ceo@company.com",
+                    "buttonExternal": true,
+                    "dismissButtonLabel": "Skip"
+                }
+            ],
+            "thankYouCard": {
+                "enabled": false
+            },
+            "delay": 0,
+            "autoComplete": null,
+            "closeOnDate": null,
+            "surveyClosedMessage": null,
+            "verifyEmail": null
+        }
+    }
+    ```
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---

apps/formbricks-com/app/docs/api/management/webhooks/page.mdx

@@ -1,30 +1,31 @@
 export const meta = {
-  title: "Webhook API Overview",
-  description: "Learn how to use the Formbricks Webhook API.",
+  title: "Formbricks Webhook API Documentation - List, Retrieve, Create, and Delete Webhooks",
+  description:
+    "Explore the comprehensive guide to the Formbricks Webhooks API. This is all you need to interact and play with the Formbricks Webhooks and integrate them into any third party app of your choice",
 };
 
-#### Webhook API
+#### Management API
 
 # Webhook API
 
-Formbricks' Webhook API offers a powerful interface for interacting with webhooks. Webhooks in Formbricks allow you to receive real-time HTTP notifications of changes to specific objects in the Formbricks environment.
-
-Before you start managing webhooks, you need to create an API key. This will be used for authorization when making requests to the Webhook API. Please see the [API key setup page](/docs/api/api-key-setup) for more details on how to create and manage your API keys.
+Formbricks' Webhook API offers a powerful interface for interacting with webhooks. Webhooks allow you to receive real-time HTTP notifications of changes to specific objects in the Formbricks environment.
 
 The behavior of the webhooks is determined by their trigger settings. The trigger determines which updates the webhook sends. Current available triggers include "responseCreated", "responseUpdated", and "responseFinished". This allows you to customize your webhooks to only send notifications for the events that are relevant to your application.
 
 Webhooks are tied to a specific Formbricks environment. Once set, a webhook will receive updates from all surveys within this environment. This makes it easy to manage your data flow and ensure that all relevant updates are caught by the webhook.
 
-Our API has several REST endpoints enabling you to manage these webhooks, providing a great deal of flexibility:
+This set of API can be used to
+- [List All Webhooks](#list-webhooks)
+- [Get Webhook](#retrieve-webhook-by-id)
+- [Create Webhook](#create-webhook)
+- [Delete Webhook](#delete-webhook-by-id)
 
-1. **List Webhooks:** Retrieve a list of all existing webhooks.
-1. **Retrieve Webhook by ID:** Retrieve a specific webhook by it's ID.
-1. **Create a New Webhook:** Add a new webhook to your system.
-1. **Get a Specific Webhook:** Query the details of a specific webhook using its unique ID.
-1. **Delete a Webhook:** Remove an existing webhook.
+And the detailed Webhook Paylod is elaborated [here](#webhook-payload).
 
 These APIs are designed to facilitate seamless integration of Formbricks with third-party systems. By making use of our webhook API, you can automate the process of sending data to these systems whenever significant events occur within your Formbricks environment.
 
+<Note>You will need an API Key to interact with these APIs.</Note>
+
 ---
 
 ## List Webhooks {{ tag: 'GET', label: '/api/v1/webhooks' }}
@@ -92,7 +93,7 @@ These APIs are designed to facilitate seamless integration of Formbricks with th
 
 ---
 
-## Retrieve Webhook by ID {{ tag: 'GET', label: '/api/v1/webhooks/[webhookId]' }}
+## Retrieve Webhook by ID {{ tag: 'GET', label: '/api/v1/webhooks/<webhook-id>' }}
 
 <Row>
   <Col>
@@ -108,11 +109,11 @@ These APIs are designed to facilitate seamless integration of Formbricks with th
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="GET" label="/api/v1/webhooks/[webhookId]">
+    <CodeGroup title="Request" tag="GET" label="/api/v1/webhooks/<webhook-id>">
 
     ```bash {{ title: 'cURL' }}
     curl --location \
-    'https://app.formbricks.com/api/v1/webhooks/[webhookId]' \
+    'https://app.formbricks.com/api/v1/webhooks/<webhook-id>' \
     --header \
     'x-api-key: <your-api-key>'
     ```
@@ -255,7 +256,7 @@ Add a webhook to your product.
 
 ---
 
-## Delete Webhook by ID {{ tag: 'DELETE', label: '/api/v1/webhooks/[webhookId]' }}
+## Delete Webhook by ID {{ tag: 'DELETE', label: '/api/v1/webhooks/<webhook-id>' }}
 
 <Row>
   <Col>
@@ -271,10 +272,10 @@ Add a webhook to your product.
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="DELETE" label="/api/v1/webhooks/[webhookId]">
+    <CodeGroup title="Request" tag="DELETE" label="/api/v1/webhooks/<webhook-id>">
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request DELETE 'https://app.formbricks.com/api/v1/webhooks/[webhookId]' \
+    curl --location --request DELETE 'https://app.formbricks.com/api/v1/webhooks/<webhook-id>' \
     --header 'x-api-key: <your-api-key>'
     ```
 

apps/formbricks-com/app/docs/api/people/page.mdx

@@ -1,76 +0,0 @@
-import { Fence } from "@/components/shared/Fence";
-
-export const meta = {
-  title: "Responses API",
-  description:
-    "Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
-};
-
-#### Management API
-
-# People API
-
-The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
-
----
-
-## Get or Create Person {{ tag: 'GET', label: '/api/v1/client/people/getOrCreate' }}
-
-<Row>
-  <Col>
-
-    Fetch a Person or create (if they don't exist) by their userId and the environmentId.
-
-    ### Mandatory Query Parameters
-    <Properties>
-      <Property name="userId" type="string">
-        User ID to fetch or create (if it does not exist)
-      </Property>
-    </Properties>
-
-    <Properties>
-      <Property name="enviornmentId" type="string">
-        Formbricks Environment ID
-      </Property>
-    </Properties>
-
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="GET" label="/api/v1/client/people/getOrCreate">
-
-    ```bash {{ title: 'cURL' }}
-    curl --location \
-    'https://app.formbricks.com/api/v1/client/people/getOrCreate?userId=<user-id>&environmentId=<env-id>'
-    ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-
-    ```json {{title:'200 Success'}}
-    {
-      "data": {
-        "person": {
-            "id": "clm4bcxms02hspj0ht05k6q5c",
-            "environmentId": "cll2m30r70004mx0huqkitgqv"
-            }
-        }
-    }
-    ```
-
-    ```json {{ title: '400 Bad Request' }}
-    {
-      "code": "bad_request",
-      "message": "Fields are missing or incorrectly formatted",
-      "details": {
-        "userId": ""
-        }
-    }
-    ```
-    </CodeGroup>
-
-  </Col>
-</Row>
-
----

apps/formbricks-com/app/docs/api/surveys/page.mdx

@@ -1,180 +0,0 @@
-import { Fence } from "@/components/shared/Fence";
-
-export const meta = {
-  title: "Surveys API",
-  description:
-    "Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
-};
-
-#### Management API
-
-# Surveys API
-
-The Survey API currently has one endpoint that allows you to get all the surveys you have in your Formbricks environment. You will need the [API Key](/docs/api/api-key-setup) to access the same!
-
----
-
-## List all surveys {{ tag: 'GET', label: '/api/v1/surveys' }}
-
-<Row>
-  <Col>
-
-    Retrieve all the surveys you have for the environment.
-
-    ### Mandatory Headers
-
-    <Properties>
-      <Property name="x-Api-Key" type="string">
-        Your Formbricks API key.
-      </Property>
-    </Properties>
-
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="GET" label="/api/v1/surveys">
-
-    ```bash {{ title: 'cURL' }}
-    curl --location \
-    'https://app.formbricks.com/api/v1/surveys' \
-    --header \
-    'x-api-key: <your-api-key>'
-    ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-
-    ```json {{title:'200 Success'}}
-    {
-        "data": [
-            {
-                "id": "cllnfy2780fromy0hy7uoxvtn",
-                "createdAt": "2023-08-23T07:56:20.516Z",
-                "updatedAt": "2023-08-23T07:56:26.947Z",
-                "name": "Product Market Fit (Superhuman)",
-                "type": "link",
-                "environmentId": "cll2m30r70004mx0huqkitgqv",
-                "status": "inProgress",
-                "attributeFilters": [],
-                "displayOption": "displayOnce",
-                "autoClose": null,
-                "triggers": [],
-                "redirectUrl": null,
-                "recontactDays": null,
-                "questions": [
-                    {
-                        "id": "gml6mgy71efgtq8np3s9je5p",
-                        "type": "cta",
-                        "headline": "You are one of our power users! Do you have 5 minutes?",
-                        "required": false,
-                        "buttonLabel": "Happy to help!",
-                        "logic": [
-                            {
-                                "condition": "skipped",
-                                "destination": "end"
-                            }
-                        ],
-                        "html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We would love to understand your user experience better. Sharing your insight helps a lot!</span></p>",
-                        "buttonExternal": false,
-                        "dismissButtonLabel": "No, thanks."
-                    },
-                    {
-                        "id": "kp62fbqe8cfzmvy8qwpr81b2",
-                        "type": "multipleChoiceSingle",
-                        "headline": "How disappointed would you be if you could no longer use My Product?",
-                        "subheader": "Please select one of the following options:",
-                        "required": true,
-                        "choices": [
-                            {
-                                "id": "bdgy1hnwd7uwmfxk1ljqp1n5",
-                                "label": "Not at all disappointed"
-                            },
-                            {
-                                "id": "poabnvgtwenp8rb2v70gj4hj",
-                                "label": "Somewhat disappointed"
-                            },
-                            {
-                                "id": "opfiqyqz8wrqn0i0f7t24d3n",
-                                "label": "Very disappointed"
-                            }
-                        ],
-                        "shuffleOption": "none"
-                    },
-                    {
-                        "id": "klvpwd4x08x8quesihvw5l92",
-                        "type": "multipleChoiceSingle",
-                        "headline": "What is your role?",
-                        "subheader": "Please select one of the following options:",
-                        "required": true,
-                        "choices": [
-                            {
-                                "id": "c8nerw6l9gpsxcmqkn10f9hy",
-                                "label": "Founder"
-                            },
-                            {
-                                "id": "ebjqezei6a2axtuq86cleetn",
-                                "label": "Executive"
-                            },
-                            {
-                                "id": "ctiijjblyhlp22snypfamqt1",
-                                "label": "Product Manager"
-                            },
-                            {
-                                "id": "ibalyr0mhemfkkr82vypmg40",
-                                "label": "Product Owner"
-                            },
-                            {
-                                "id": "fipk606aegslbd0e7yhc0xjx",
-                                "label": "Software Engineer"
-                            }
-                        ],
-                        "shuffleOption": "none"
-                    },
-                    {
-                        "id": "ryo75306flyg72iaeditbv51",
-                        "type": "openText",
-                        "headline": "What type of people do you think would most benefit from My Product?",
-                        "required": true
-                    },
-                    {
-                        "id": "lkjaxb73ulydzeumhd51sx9g",
-                        "type": "openText",
-                        "headline": "What is the main benefit your receive from My Product?",
-                        "required": true
-                    },
-                    {
-                        "id": "ec7agikkr58j8uonhioinkyk",
-                        "type": "openText",
-                        "headline": "How can we improve My Product for you?",
-                        "subheader": "Please be as specific as possible.",
-                        "required": true
-                    }
-                ],
-                "thankYouCard": {
-                    "enabled": true,
-                    "headline": "Thank you!",
-                    "subheader": "We appreciate your feedback."
-                },
-                "delay": 0,
-                "autoComplete": null,
-                "closeOnDate": null
-            }
-        ]
-    }
-    ```
-    ```json {{ title: '401 Not Authenticated' }}
-    {
-      "code": "not_authenticated",
-      "message": "Not authenticated",
-      "details": {
-        "x-Api-Key": "Header not provided or API Key invalid"
-        }
-    }
-    ```
-    </CodeGroup>
-
-  </Col>
-</Row>
-
----

apps/formbricks-com/app/docs/attributes/custom-attributes/page.mdx

@@ -1,7 +1,7 @@
 export const meta = {
-  title: "Setting attributes with code",
+  title: "Guide for Setting Custom Attributes | Formbricks Documentation",
   description:
-    "Set attributes in code using setAttribute function. Enhance user segmentation, target surveys effectively, and gather valuable insights for better decisions. All open-source.",
+    "Learn how to set attributes in code using setAttribute function. Enhance user segmentation, target surveys effectively, and gather valuable insights for better decisions. Easily send user-specific details for better survey segmentation and gain deeper insights.",
 };
 
 #### Attributes
@@ -13,7 +13,7 @@ One way to send attributes to Formbricks is in your code. In Formbricks, there a
 ## Setting Custom User Attributes
 
 You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
-
+<Col>
 <CodeGroup title="Setting Plan to Pro">
 
 ```javascript
@@ -21,9 +21,9 @@ formbricks.setAttribute("Plan", "Pro");
 ```
 
 </CodeGroup>
-
+</Col>
 Generally speaking, the setAttribute function works like this:
-
+<Col>
 <CodeGroup title="Setting Custom Attributes">
 
 ```javascript
@@ -31,5 +31,5 @@ formbricks.setAttribute("attribute_key", "attribute_value");
 ```
 
 </CodeGroup>
-
+</Col>
 Where `attributeName` is the name of the attribute you want to set, and `attributeValue` is the value of the attribute you want to set.

apps/formbricks-com/app/docs/attributes/identify-users/page.mdx

@@ -1,7 +1,7 @@
 export const meta = {
-  title: "Identifying Users",
+  title: "User Identification in Formbricks | Enhancing Survey Feedback",
   description:
-    "Identify users with Formbricks by setting User ID, email, and custom attributes. Enhance survey targeting and recontacting while maintaining user privacy.",
+    "A comprehensive guide on identifying users in Formbricks without compromising privacy. Learn how to set User ID, email, and custom attributes to optimize survey targeting, recontact users, and control survey intervals, all while respecting user anonymity.",
 };
 
 #### Attributes
@@ -15,7 +15,7 @@ Once the Formbricks widget is loaded on your web app, our SDK exposes methods fo
 ## Setting User ID
 
 You can use the `setUserId` function to identify a user with any string. It's best to use the default identifier you use in your app (e.g. unique id from database) but you can also anonymize these as long as they are unique for every user. This function can be called multiple times with the same value safely and stores the identifier in local storage. We recommend you set the User ID whenever the user logs in to your website, as well as after the installation snippet (if the user is already logged in).
-
+<Col>
 <CodeGroup title="Setting User ID">
 
 ```javascript
@@ -23,11 +23,11 @@ formbricks.setUserId("USER_ID");
 ```
 
 </CodeGroup>
-
+</Col>
 ## Setting User Email
 
 You can use the setEmail function to set the user's email:
-
+<Col>
 <CodeGroup title="Setting Email">
 
 ```javascript
@@ -35,11 +35,11 @@ formbricks.setEmail("user@example.com");
 ```
 
 </CodeGroup>
-
+</Col>
 ### Setting Custom User Attributes
 
 You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
-
+<Col>
 <CodeGroup title="Setting Custom Attributes">
 
 ```javascript
@@ -47,11 +47,11 @@ formbricks.setAttribute("attribute_key", "attribute_value");
 ```
 
 </CodeGroup>
-
+</Col>
 ### Logging Out Users
 
 When a user logs out of your webpage, make sure to log them out of Formbricks as well. This will prevent new activity from being associated with an incorrect user. Use the logout function:
-
+<Col>
 <CodeGroup title="Logging out User">
 
 ```javascript
@@ -59,3 +59,4 @@ formbricks.logout();
 ```
 
 </CodeGroup>
+</Col>

apps/formbricks-com/app/docs/attributes/why/page.mdx

@@ -1,7 +1,7 @@
 export const meta = {
-  title: "What are attributes and why are they useful?",
+  title: "Understanding User Attributes in Formbricks Surveys",
   description:
-    "How to use attributes for user segmentation, enhancing survey targeting & results. Improve feedback quality and make data-driven decisions.",
+    "Dive into the importance of attributes in surveys. Learn how key-value pairs can significantly improve survey targeting, enhance feedback quality, and guide data-driven decisions with Formbricks.",
 };
 
 #### Attributes

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

@@ -11,8 +11,8 @@ import PublishSurvey from "./publish-survey.webp";
 import SelectAction from "./select-action.webp";
 
 export const meta = {
-  title: "Learn from Churn",
-  description: "To know how to decrease churn, you have to understand it. Use a micro-survey.",
+  title: "Mastering Churn Surveys with Formbricks | Essential Tips & Steps",
+  description: "Learn how to effectively utilize Formbricks' Churn Surveys to gain deeper insights into user departures. Dive into a step-by-step guide to craft, trigger, and optimize your churn surveys, ensuring you capture invaluable feedback at critical junctures",
 };
 
 #### Best Practices

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

@@ -11,8 +11,10 @@ import WhenToAsk from "./when-to-ask.webp";
 import CopyIds from "./copy-ids.webp";
 
 export const meta = {
-  title: "Docs Feedback",
-  description: "Docs Feedback allows you to measure how clear your documentation is.",
+  title:
+    "Integrate Docs Feedback in Your Website: A Step-by-Step Guide on getting feedback on your Documentation with Formbricks",
+  description:
+    "Learn the step-by-step process to effectively measure the clarity of your documentation using Formbricks Cloud. Dive into best practices, setting up cloud environments, integrating feedback widgets on your frontend, and connecting to the Formbricks API for a seamless user experience.",
 };
 
 #### Best Practices
@@ -48,7 +50,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={SwitchToDev}
   alt="switch to dev environment"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 3. Then, create a survey using the template “Docs Feedback”:
@@ -57,7 +59,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={DocsTemplate}
   alt="select docs template"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 4. Change the Internal Question ID of the first question to **“isHelpful”** to make your life easier 😉
@@ -66,15 +68,14 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={ChangeId}
   alt="switch to dev environment"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 5. In the same way, you can change the Internal Question ID of the _Please elaborate_ question to **“additionalFeedback”** and the one of the _Page URL_ question to **“pageUrl”**.
 
 <Note>
-  ## Answers need to be identical 
-  If you want different answers than “Yes 👍” and “No 👎” you need update the choices accordingly. They have to
-  be identical to the frontend we're building in the next step.
+  ## Answers need to be identical If you want different answers than “Yes 👍” and “No 👎” you need update the
+  choices accordingly. They have to be identical to the frontend we're building in the next step.
 </Note>
 
 6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “When to ask” and create a new Action:
@@ -83,7 +84,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={WhenToAsk}
   alt="set up when to ask card"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 7. Our goal is to create an event that never fires. This is a bit nonsensical because it is a workaround. Stick with me 😃 Fill the action out like on the screenshot:
@@ -92,7 +93,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={AddAction}
   alt="add action"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
   className="rounded"
 />
 
@@ -102,7 +103,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={SelectNonevent}
   alt="select nonevent"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 **You’re all setup in Formbricks Cloud for now 👍**
@@ -110,9 +111,8 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 ### 2. Build the frontend
 
 <Note>
-  ## Your frontend might work differently 
-  Your frontend likely looks and works differently. This is an example specific to our tech stack. We want to illustrate
-  what you should consider building yours 😊
+  ## Your frontend might work differently Your frontend likely looks and works differently. This is an example
+  specific to our tech stack. We want to illustrate what you should consider building yours 😊
 </Note>
 
 Before we start, lets talk about the widget. It works like this:
@@ -132,20 +132,21 @@ This allows us to capture and analyze partial feedback where the user is not wil
   src={DocsNavi}
   alt="doc navigation"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
   className="rounded"
 />
 
 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):
-
+<Col>
 <CodeGroup title="Entire Widget">
 
 ```tsx
 import { useState } from "react";
 import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
-import { Popover, PopoverTrigger, PopoverContent, Button } from "@formbricks/ui";
+import { Popover, PopoverTrigger, PopoverContent } from "@formbricks/ui/Popover";
+import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 
 export default function DocsFeedback() {
@@ -216,11 +217,11 @@ export default function DocsFeedback() {
 ```
 
 </CodeGroup>
-
+</Col>
 **Let’s break it down!**
 
 Setting the local states and getting the current URL:
-
+<Col>
 <CodeGroup title="State Management">
 
 ```tsx
@@ -232,9 +233,9 @@ const [freeText, setFreeText] = useState(""); // to locally store the additional
 ```
 
 </CodeGroup>
-
+</Col>
 Disabling feedback if config environment variables are not set properly:
-
+<Col>
 <CodeGroup title="Disable feedback if incorrect config env vars">
 
 ```tsx
@@ -248,9 +249,9 @@ if (
 ```
 
 </CodeGroup>
-
+</Col>
 The actual frontend (read comments):
-
+<Col>
 <CodeGroup title="Actual Frontend">
 
 ```tsx
@@ -307,13 +308,13 @@ return (
 ```
 
 </CodeGroup>
-
+</Col>
 ## 3. Connecting to the Formbricks API
 
 The last step is to hook up your sparkling new frontend to the Formbricks API. To do so, we followed the “[Create Response](/docs/client-api/create-response)” and “[Update Response](/docs/client-api/update-response)” pages in our docs.
 
 Here is the code for the `handleFeedbackSubmit` function with comments:
-
+<Col>
 <CodeGroup title="handleFeedbackSubmit() function definition">
 
 ```tsx
@@ -356,9 +357,9 @@ export const handleFeedbackSubmit = async (YesNo, pageUrl) => {
 ```
 
 </CodeGroup>
-
+</Col>
 And this is the `updateFeedback` function with comments:
-
+<Col>
 <CodeGroup title="updateFeedback() function definition">
 
 ```tsx
@@ -399,7 +400,7 @@ export const updateFeedback = async (freeText, responseId) => {
 ```
 
 </CodeGroup>
-
+</Col>
 That’s almost it! 🤸
 
 ## 4. Setting it up for testing
@@ -411,10 +412,10 @@ Before you roll it out in production, you want to test it. To do so, you need tw
 
 When you are on the survey detail page, you’ll find both of them in the URL:
 
-<Image src={CopyIds} alt="copy IDs" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+<Image src={CopyIds} alt="copy IDs" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 Now, you have to replace the IDs and the API host accordingly in your `handleFeedbackSubmit`:
-
+<Col>
 <CodeGroup title="Replace the ID and API accordingly">
 
 ```tsx
@@ -431,9 +432,9 @@ Now, you have to replace the IDs and the API host accordingly in your `handleFee
 ```
 
 </CodeGroup>
-
+</Col>
 And lastly, in the `updateFeedback` function
-
+<Col>
 <CodeGroup title="Replace the ID and API here as well">
 
 ```tsx
@@ -445,6 +446,7 @@ And lastly, in the `updateFeedback` function
 ```
 
 </CodeGroup>
+</Col>
 ### You’re good to go! 🎉
 
 Something doesn’t work? Check your browser console for the error.

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

@@ -10,8 +10,8 @@ import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
 export const meta = {
-  title: "Feature Chaser",
-  description: "Follow up with users who used a specific feature. Gather feedback and improve your product.",
+  title: "Setting Up Feature Chaser Surveys with Formbricks: A Comprehensive Guide",
+  description: "Learn how to harness the power of Formbricks to gather targeted user feedback on specific features. Dive deep into creating, triggering, and publishing the Feature Chaser survey to enhance your product with actionable insights for specific users.",
 };
 
 #### Best Practices

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

@@ -12,8 +12,8 @@ import SelectAction from "./select-feedback-button-action.webp";
 import RecontactOptions from "./set-recontact-options.webp";
 
 export const meta = {
-  title: "Feedback Box",
-  description: "The Feedback Box gives your users a direct channel to share their feedback and feel heard.",
+  title: "Implementing the Feedback Box with Formbricks: A Step-by-Step Tutorial",
+  description: "Unlock user insights effortlessly! Discover how to set up the Feedback Box in your app using Formbricks, allowing your users to provide real-time feedback. Follow our comprehensive guide to enhance user experience and respond rapidly to feedback",
 };
 
 #### Best Practices

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

@@ -10,8 +10,8 @@ import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
 export const meta = {
-  title: "Improve Trial Conversion",
-  description: "Understand how to improve the trial conversions to get more paying customers.",
+  title: "Boost Your Trial Conversion Rates with Formbricks: Comprehensive Guide",
+  description: "Unlock the secret to converting more trial users into paying customers using Formbricks. Understand insights behind trial cancellations and tailor your offering to fit user needs. Dive into our step-by-step tutorial and improve your conversion strategy today",
 };
 
 #### Best Practices

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

@@ -13,8 +13,8 @@ import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
 export const meta = {
-  title: "In-app Interview Prompt",
-  description: "Invite only power users to schedule an interview with your product team.",
+  title: "Maximize User Interview Participation with In-app Interview Prompts",
+  description: "Engage with your power users seamlessly using Formbricks' In-app Interview Prompt. Ditch traditional email invites and experience way more more respondents. Dive into our comprehensive guide on setting up auto-scheduled interviews today and enhance your user understanding",
 };
 
 #### Best Practices
@@ -125,7 +125,7 @@ Generally, we have two types of user actions: Page views and clicks. The Intervi
 
 2. **innerText & CSS-Selector:** When a user clicks an element (like a button) with a specific text content or CSS selector, the prompt will be displayed as long as the other conditions also match.
 
-<div className="grid grid-cols-2 space-x-2">
+<div className="flex max-w-full flex-col sm:max-w-3xl lg:gap-1">
   <Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
   <Image
     src={ActionInner}

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

@@ -10,8 +10,8 @@ import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
 export const meta = {
-  title: "Product-Market Fit Survey",
-  description: "The Product-Market Fit survey helps you measure, well, Product-Market Fit (PMF).",
+  title: "How to Set Up a Product-Market Fit Survey Using Formbricks - Step-by-Step Guide",
+  description: "Learn to leverage Formbricks to create and implement a Product-Market Fit survey in your web app. Follow our detailed step-by-step guide to measure and understand your PMF effectively. Ensure high data quality, efficient triggers, and actionable insights.",
 };
 
 #### Best Practices
@@ -96,8 +96,8 @@ This way you make sure that you separate potentially misleading opinions from va
 ### 4. Set up a trigger for the Product-Market Fit survey:
 
 You need a trigger to display the survey but in this case, the filtering does all the work. It’s up to you to decide to display the survey after the user viewed a specific subpage (pageURL) or after clicking an element. Have a look at the [Actions manual](/docs/actions/why) if you are not sure how to set them up:
-
-<div className="grid grid-cols-2 space-x-2">
+<Col>
+<div>
   <Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
   <Image
     src={ActionPageurl}
@@ -106,16 +106,16 @@ You need a trigger to display the survey but in this case, the filtering does al
     className="rounded-lg max-w-full sm:max-w-3xl"
   />
 </div>
-
+</Col>
 ### 5. Select Action in the “When to ask” card
-
+<Col>
 <Image
   src={SelectAction}
   alt="Select PMF trigger button action"
   quality="100"
   className="rounded-lg max-w-full sm:max-w-3xl"
 />
-
+</Col>
 ### 6. Last step: Set Recontact Options correctly
 
 Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure your data remains of high quality. You want to make sure that this survey is only responded to once per user. It is up to you to decide if you want to display it several times until the user responds:

apps/formbricks-com/app/docs/contributing/demo/page.mdx

@@ -3,8 +3,8 @@ import Image from "next/image";
 import DemoApp from "./demoapp.webp";
 
 export const meta = {
-  title: "Demo App",
-  description: "To test in-app surveys, trigger actions and set attributes, you can use the Demo App.",
+  title: "Formbricks Demo App Guide: Play around with Formbricks",
+  description: "To test in-app surveys, trigger actions and set attributes, you can use the Demo App. This guide provides hands-on examples of sending both code and no-code actions",
 };
 
 #### Contributing
@@ -20,7 +20,7 @@ To play around with the in-app [User Actions](/docs/actions/why), you can use th
 ### Code Action
 
 This button sends a <a href="/docs/actions/code">Code Action</a> to the Formbricks API called 'Code Action'. You will find it in the Actions Tab.
-
+<Col>
 <CodeGroup title="Track Code action">
 
 ```javascript
@@ -28,11 +28,11 @@ formbricks.track("Code Action");
 ```
 
 </CodeGroup>
-
+</Col>
 ### No Code Action
 
 This button sends a <a href="/docs/actions/no-code">No Code Action</a> as long as you created it beforehand in the Formbricks App. For it to work, you need to add the No Code Action within Formbricks.
-
+<Col>
 <CodeGroup title="Track No-Code action">
 
 ```tsx
@@ -40,11 +40,11 @@ This button sends a <a href="/docs/actions/no-code">No Code Action</a> as long a
 ```
 
 </CodeGroup>
-
+</Col>
 ### Set Plan to "Free"
 
 This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Free'. If the attribute does not exist, it creates it.
-
+<Col>
 <CodeGroup title="Set Plan to Free">
 
 ```tsx
@@ -52,11 +52,11 @@ formbricks.setAttribute("Plan", "Free");
 ```
 
 </CodeGroup>
-
+</Col>
 ### Set Plan to "Paid"
 
 This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Paid'. If the attribute does not exist, it creates it.
-
+<Col>
 <CodeGroup title="Set Plan to Paid">
 
 ```tsx
@@ -64,11 +64,11 @@ formbricks.setAttribute("Plan", "Paid");
 ```
 
 </CodeGroup>
-
+</Col>
 ### Set Email
 
 This button sets the <a href="/docs/attributes/identify-users">user email</a> 'test@web.com'
-
+<Col>
 <CodeGroup title="Set Email">
 
 ```tsx
@@ -76,11 +76,11 @@ formbricks.setEmail("test@web.com");
 ```
 
 </CodeGroup>
-
+</Col>
 ### Set UserId
 
 This button sets an external <a href="/docs/attributes/identify-users">user ID</a> to 'THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING'
-
+<Col>
 <CodeGroup title="Set User ID">
 
 ```tsx
@@ -88,3 +88,4 @@ formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
 ```
 
 </CodeGroup>
+</Col>

apps/formbricks-com/app/docs/contributing/gitpod/page.mdx

@@ -0,0 +1,141 @@
+import Image from "next/image";
+import GitpodPorts from "./gitpod-ports.webp";
+import GitpodAuth from "./gitpod-auth.webp";
+import GitpodNewWorkspace from "./gitpod-new-workspace.webp";
+import GitpodPreparing from "./gitpod-preparing.webp";
+import GitpodRunning from "./gitpod-running.webp";
+
+export const meta = {
+  title: "Gitpod Setup",
+  description:
+    "With one click, you can setup the Formbricks developer environment in your browser using Gitpod",
+};
+
+#### Contributing
+
+# Gitpod
+
+### One Click Setup
+
+- This will open a fully configured workspace in your browser with all the necessary dependencies already installed.
+
+- Click the button below to open this project in Gitpod.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/formbricks/formbricks)
+ 
+## Gitpod Setup Overview
+
+    **Building custom image for the workspace:**
+    - This includes : Installing `yq` and `turbo` globally before the workspace starts. This is accomplished within the `.gitpod.Dockerfile` along with starting upon a base custom image building on [workspace-full](https://hub.docker.com/r/gitpod/workspace-full/dockerfile).
+
+    **Initialization of Formbricks:** 
+     - During the prebuilds phase, we initialize Formbricks by performing the following tasks:
+        1. Setting up environment variables.
+        2. Installing monorepo dependencies.
+        3. Installing Docker images by extracting them from the `packages/database/docker-compose.yml` file.
+        4. Building the @formbricks/js component.
+     - When the workspace starts:
+        1. Waiting for web and demo apps to start and openening the `apps/demo/.env` file automatically such that users can start playing around with the demo app by configuring `NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID` straight away!
+
+    **Web Component Initialization:** 
+     - we initialize the @formbricks/web component during prebuilds. This involves:
+        1. Installing build dependencies for the `@formbricks/web#go` task from turbo.json in prebuilds to save time.
+        2. Starting PostgreSQL and Mailhog containers for running migrations in prebuilds.
+        3. To prevent the "Init" task from running indefinitely due to prebuild rules, a cleanup `docker compose down` step i.e. `db:down` is added to `turbo.json`. This step is designed to halt the execution of containers that are currently running.
+     - When the workspace starts:
+        1. Initializing environment variables.
+        2. Replacing `NEXT_PUBLIC_WEBAPP_URL` and `NEXTAUTH_URL` to take in Gitpod URL's ports when running on VSCode browser.
+        3. Starting the `@formbricks/web` dev environment.
+
+    **Demo Component Initialization:** 
+     - Similar to the web component, the demo component is also initialized during prebuilds. This includes:
+        1. Installing build dependencies for the `formbricks/demo#go` task from turbo.json in prebuilds to save time.
+        2. Caching hits and replaying builds from the `@formbricks/js` component.
+     - When the workspace starts: 
+        1. Initializing environment variables.
+        2. Replaces `NEXT_PUBLIC_FORMBRICKS_API_HOST` to take in Gitpod URL's ports when running on VSCode browser.
+        3. Starting the `@formbricks/demo` dev environment.
+
+    **GitHub Prebuilds Configuration:** 
+     - This configures GitHub Prebuilds for the master branch, pull requests, and adding comments. This helps automate the prebuild process for the specified branches and actions.
+
+    **VSCode Extensions:** 
+     - This includes a list of VSCode extensions that are added to the configuration when using Gitpod. These extensions can enhance the development experience within Gitpod.
+
+
+## Gitpod Guide  
+
+### 1. Browser Redirection
+
+After clicking the one-click setup button, Gitpod will open a new tab or window. Please ensure that your browser allows redirection to successfully access the services:
+
+### 2. Authorizing in Gitpod
+<Image src={GitpodAuth} alt="Gitpod Auth Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+- This is the Gitpod Authentication Page. It appears when you click the "Open in GitPod" button and Gitpod needs to authenticate your access to the workspace. Click on 'Continue With Github' to authorize your GitPod session.
+
+### 3. Creating a New Workspace
+<Image src={GitpodNewWorkspace} alt="Gitpod New Worskpace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+- After authentication, Gitpod asks to create a new workspace for you. This page displays the configurations of your workspace. 
+- You can use either choose either VS Code Browser or  VS Code Desktop editor with the 'Standard Class' for your workspace class.
+- If you opt for the VS Code Desktop, follow the following steps
+   1. Gitpod will prompt you to grant access to the VSCode app. Once approved, install the GitPod extension from the VSCode Marketplace and follow the prompts to authorize the integration.
+   2. Change the `WEBAPP_URL` and the `NEXTAUTH_URL` to `https://localhost:3000`
+
+
+### 4. Gitpod preparing the created Workspace
+<Image src={GitpodPreparing} alt="Gitpod Preparing Worskpace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+- Gitpod is preparing your workspace with all the necessary dependencies and configurations. You will see this page while Gitpod sets up your development environment.
+
+### 5. Gitpod running the Workspace
+<Image src={GitpodRunning} alt="Gitpod Running Workspace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+- Once the workspace is fully prepared, voila, it enters the running state. You can start working on your project in this environment.
+
+### Ports and Services
+
+Here are the ports and corresponding URLs for the services within your Gitpod environment:
+
+- **Port 3000**:
+   - **Service**: Demo App
+   - **Description**: This port hosts the demo application of your project. You can access and interact with your application's demo by navigating to this port.
+
+- **Port 3001**:
+   - **Service**: Formbricks website
+   - **Description**: This port hosts the [Formbricks](https://formbricks.com) website, which contains documents, pricing, blogs, best practices, and concierge service.
+
+- **Port 3002**:
+   - **Service**: Formbricks In-product Survey Demo App
+   - **Description**: This app helps you test your in-app surveys. You can create and test user actions, create and update user attributes, etc.
+
+- **Port 5432**:
+   - **Service**: PostgreSQL Database Server
+   - **Description**: The PostgreSQL DB is hosted on this port.
+
+- **Port 1025**:
+   - **Service**: SMPT server
+   - **Description**: SMTP Server for sending and receiving email messages. This server is responsible for handling email communication.
+
+- **Port 8025**:
+   - **Service**: Mailhog
+
+### Accessing port URLs
+  1. **Direct URL Composition**:
+   - You can access the dedicated port URL by pre-pending the port number to the workspace URL.
+   - For example, if you want to access port 3000, you can use the URL format: `3000-yourworkspace.ws-eu45.gitpod.io`.
+
+  2. **Using [gp CLI](https://www.gitpod.io/docs/references/gitpod-cli)**:
+   - Gitpod provides a convenient command, `gp url`, to quickly retrieve the URL for a specific port.
+   - Simply use the command followed by the desired port number. For example, to get the URL for port 3000, run: `gp url 3000`.
+
+  3. **Listing All Open Port URLs**:
+   - If you prefer to see a list of all open port URLs at once, you can use the `gp ports list` command.
+   - Running this command will display a list of ports along with their corresponding URLs.
+
+  4. **Viewing All Ports in Panel**:
+   - Gitpod also offers a user-friendly 'Ports' tab in the Gitpod panel.
+   - Click on the 'Ports' tab to view a list of all open ports and their respective URLs.
+
+  <Image src={GitpodPorts} alt="Gitpod Ports tab" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+  These URLs and port numbers represent various services and endpoints within your Gitpod environment. You can access and interact with these services by the Port URL for the respective service.
+
+Still can’t figure it out? Join our [Discord](https://discord.com/invite/3YFcABF2Ts)!

apps/formbricks-com/app/docs/contributing/how-we-code/page.mdx

@@ -0,0 +1,140 @@
+import Image from "next/image";
+import CorsHandling from "./cors-handling-in-api.webp";
+
+export const meta = {
+  title: "Formbricks Code Contribution Guide: Best Practices and Standards",
+  description:
+    "Effortlessly Navigate Your Contribution Journey with Formbricks' Coding Guidelines and PR Review Process",
+};
+
+#### Contributing
+
+# How we Code at Formbricks
+
+Thank you for choosing to contribute to Formbricks. Before you start, please familiarize yourself with our coding standards and best practices, as these are key criteria for pull request reviews. Your contributions are greatly valued, and if you have any questions about these guidelines, please don't hesitate to ask.
+
+**Table of content**
+
+- Use Typescript types throughout the application
+- Always prioritise Server components
+- Fetch data only in server components
+- Use Server-Action for mutations
+- Use service abstraction instead of direct database calls
+- Handle authentication and CORS in management APIs
+- Always Document API changes
+- Constants should be in the packages folder
+- Types should be in the packages folder
+- How we handle Pull Requests
+- Read environment variables from `.env.mjs`
+
+---
+
+## Use Typescript types throughout the application
+
+The entire codebase is written in TypeScript, and it is crucial that every new piece of code is thoroughly and accurately typed. Instead of resorting to using the `any` type for variables, please ensure that you explicitly specify the appropriate type.
+
+## Always prioritise Server components
+
+When it comes to prioritizing the development of our components, our main focus is on building them as server components. This ensures that they are optimized for server-side rendering and can handle any necessary interactivity seamlessly. However, in cases where a component requires client-side interactivity, we are able to adapt it into a client component. If you would like to learn more about the advantages and benefits of server components, we highly recommend reading the comprehensive documentation provided by Next.js, which can be accessed [here](https://nextjs.org/docs/app/building-your-application/rendering/server-components).
+
+## Fetch data only in server components
+
+In order to ensure that both data fetching and rendering take place on the server, it is expected that actions to fetch data from the server will be performed within server components. This approach is prioritized as discussed in the previous point, which provides further details on the benefits and importance of server components.
+
+**Note**: Data fetching is done in the `page.tsx` of the route or the corresponding server component that needs this data.
+
+## Use Server-Action for mutations
+
+Server actions are used to perform server actions in client components. For example, a button click (client-side) that should change something in the database. Server actions should be placed in an `actions.ts` file within the specific route to maintain code organization and facilitate efficient development.
+
+## Use service abstraction instead of direct database calls
+
+We utilize [prisma](https://www.prisma.io/) as our Object-Relational Mapping (ORM) tool to interact with the database. This implies that when you need to fetch or modify data in the database, you will be utilizing prisma. All prisma calls should be written in the services folder `packages/lib`, and before creating a new service, please ensure that one does not already exist.
+
+## Handle authentication and CORS in management APIs
+
+We have two APIs: Management API and Client API.
+
+The public endpoints of the Client API are used by the link survey and `formbricks-js` to send responses and displays to formbricks. Client APIs can be found in `apps/web/app/api/v1/client`
+
+The Management API offers the same functionality as the management frontend and can be used to create surveys, view responses or change account settings. The endpoints require an api key that the user can obtain in the management frontend. Management APIs can be found in `apps/web/app/api/v1/management`.
+
+Please keep the following in mind:
+
+- When dealing with Management APIs always make sure to require authentication via API keys and a sufficient authorization check.
+- Make sure to handle CORS requests in any new Client API endpoint you create as these are called from the browser in link surveys or `formbricks-js`. Example below:
+
+<Image
+  src={CorsHandling}
+  alt="Cors handling within an API"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Always Document API changes
+
+It is imperative that any and all modifications or updates made to the client API are thoroughly and comprehensively documented. This documentation should provide clear and detailed information about the nature of the changes, their impact on existing functionality, and any new features or improvements introduced. This practice not only ensures transparency and accountability but also aids developers, both internal and external, in understanding and effectively utilizing the API, ultimately fostering a more robust and user-friendly development ecosystem.
+
+## Constants should be in the packages folder
+
+You should store constants in `packages/lib/constants`
+
+## Types should be in the packages folder
+
+You should store type in `packages/types/v1`
+
+## Read environment variables from `.env.mjs`
+
+Environment variables (`process.env`) shouldn’t be accessed directly but be added in the `.env.mjs` and should be accessed from here. This practice helps us ensure that the variables are typesafe.
+
+## How we handle Pull Requests
+
+We have a number of requirements for PRs to ensure they are as easy to review as possible and to ensure that they are up to standard with the code.
+
+### Code change
+
+When submitting a pull request, it is important to avoid combining multiple changes or issues into a single PR. By keeping each PR focused on a specific change or issue, it becomes easier and faster to review. Additionally, separating changes into individual PRs makes it easier to test each change independently. This allows for more efficient and thorough testing, ensuring that each change is properly validated before merging.
+
+### Title & Content
+
+We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). You should provide a short and concise title. Don’t put something generic (e.g. bug fixes), and instead mention more specifically what your PR achieves, for instance “fix: dropdown not expanding on survey page”.
+
+For the PR description, you should go into much greater detail about what your PR adds or fixes. Firstly, the description should include a link to any relevant issues or discussions surrounding the feature or bug that your PR addresses.
+
+### Feature PRs
+
+Give a functional overview of how your feature works, including how the user can use the feature. Then, share any technical details in an overview of how the PR works (e.g. “Once the user enters their password, the password is hashed using BCrypt and stored in the Users database field”).
+
+### Bug Fix PRs
+
+Give an overview of how your PR fixes the bug both as a high-level overview and a technical explanation of what caused the issue and how your PR resolves this.
+
+Add a short video or screenshots of what your PR achieves. Loom is a great way of sharing short videos however you can upload your videos directly to the PR description.
+
+### Code Quality & Styling
+
+It's really important to keep our code styles consistent so that the repository is easy to read and work with.
+
+We rely on various style guides from other amazing companies because they are widely used and we genuinely enjoy working with them.
+
+While we don't expect you to memorize every rule in these style guides, they serve as valuable references for how your code should be styled. However, if your code style significantly deviates from these guides, we may have to reject your pull request.
+
+#### ESLint & Prettier
+
+Formbricks uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
+
+#### HTML & CSS
+
+We use the **[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)** for any HTML and CSS markup. However, exceptions to the HTML guide apply where JSX differentiates from standard HTML.
+
+**Note:** We will reject pull requests that differ significantly from our standardised code styles. All code is automatically checked by Github actions, and will notify you if there are any issues with the code that you submit. We require that code passes these quality checks before merging.
+
+### PR review process
+
+At the moment Matti is responsible for approving and merging pull requests, so please make sure to request his review when opening the PR and make the changes he requests in order to merge the PR.
+
+### Making a Pull Request
+
+- Be sure to **[check the "Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork)** while creating your PR.
+- If your PR refers to or fixes an issue, be sure to add **`refs #XXX`** or **`fixes #XXX`** to the PR description. Replacing **`XXX`** with the respective issue number. See more about **[Linking a pull request to an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue)** .
+- Be sure to fill the PR Template accordingly.

apps/formbricks-com/app/docs/contributing/introduction/page.mdx

@@ -1,6 +1,7 @@
 export const meta = {
-  title: "Contribution Guide",
-  description: "How to contribute to Formbricks",
+  title: "Formbricks Open Source Contribution Guide: How to Enhance yourself and Contribute to Formbricks",
+  description:
+    "Join the Formbricks community and learn how to effectively contribute. From raising issues and feature requests to creating PRs, discover the best practices and communicate with our responsive team on Discord",
 };
 
 #### Contributing
@@ -36,3 +37,11 @@ We are currently working on having a clear [Roadmap](https://github.com/formbric
 But you can also pick a feature that is not already on the roadmap if you think it creates a positive impact for Formbricks.
 
 If you are at all unsure, just raise it as an enhancement issue first and tell us that you like to work on it, and we'll very quickly respond.
+
+## Contributor License Agreement (CLA)
+
+To be able to keep working on Formbricks over the coming years, we need to collect a CLA from all relevant contributors.
+
+Please note that we can only get your contribution merged when we have a CLA signed by you.
+
+To access the CLA form, please click [here](https://formbricks.com/clmyhzfrymr4ko00hycsg1tvx)

apps/formbricks-com/app/docs/contributing/setup/page.mdx

@@ -1,6 +1,6 @@
 export const meta = {
-  title: "Setup Dev Environment",
-  description: "Setup a development environment for Formbricks.",
+  title: "Formbricks Development Setup: Complete Guide to Local Environment Configuration for Dev",
+  description: "Step-by-step guide to setting up your local development environment for Formbricks. Includes installing essential tools like Node.JS, pnpm, and Docker, and accessing the entire Formbricks stack including the Demo app and the main website",
 };
 
 #### Contributing
@@ -14,7 +14,7 @@ To get the project running locally on your machine you need to have the followin
 - [Docker](https://www.docker.com/) (to run PostgreSQL / MailHog)
 
 1. Clone the project:
-
+<Col>
    <CodeGroup title="Git clone Formbricks monorepo">
 
    ```bash
@@ -22,9 +22,9 @@ To get the project running locally on your machine you need to have the followin
    ```
 
    </CodeGroup>
-
+</Col>
    and move into the directory
-
+<Col>
    <CodeGroup title="Move into the Formbricks monorepo">
 
    ```bash
@@ -32,9 +32,9 @@ To get the project running locally on your machine you need to have the followin
    ```
 
    </CodeGroup>
-
+</Col>
 1. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
-
+<Col>
    <CodeGroup title="Install dependencies via pnpm">
 
    ```bash
@@ -42,9 +42,9 @@ To get the project running locally on your machine you need to have the followin
    ```
 
    </CodeGroup>
-
+</Col>
 1. Create a `.env` file based on `.env.example`. It's already preset to work with the docker-compose setup but you can also change values if needed.
-
+<Col>
    <CodeGroup title="Define environment variables">
 
    ```bash
@@ -52,9 +52,20 @@ To get the project running locally on your machine you need to have the followin
    ```
 
    </CodeGroup>
+</Col>
+1. Generate a secret value mandatory to be set for the key ENCRYPTION_KEY in the .env file. You can use the following command to generate the random string of required length:
+<Col>
+   <CodeGroup title="Set value of ENCRYPTION_KEY">
+
+   ```bash
+   openssl rand -base64 24
+   ```
+
+   </CodeGroup>
+</Col>
 
 1. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the formbricks dev setup:
-
+<Col>
    <CodeGroup title="Start Formbricks Dev Setup">
 
    ```bash
@@ -62,7 +73,7 @@ To get the project running locally on your machine you need to have the followin
    ```
 
    </CodeGroup>
-
+</Col>
    This starts the Formbricks main app (plus all its dependencies) as well as the following services using Docker:
 
    - a `postgres` container for hosting your database,
@@ -75,7 +86,7 @@ To get the project running locally on your machine you need to have the followin
 ### Build
 
 To build all apps and packages and check for build errors, run the following command:
-
+<Col>
 <CodeGroup title="Build Formbricks stack">
 
 ```bash
@@ -83,11 +94,11 @@ pnpm build
 ```
 
 </CodeGroup>
-
+</Col>
 ### Access Demo app
 
 To run the [Demo app](/docs/contributing/demo), run the following command in a separate terminal window:
-
+<Col>
 <CodeGroup title="Start Formbricks Demo App">
 
 ```bash
@@ -95,13 +106,13 @@ pnpm dev --filter=demo
 ```
 
 </CodeGroup>
-
+</Col>
 You can now access the Demo app on [http://localhost:3002](http://localhost:3002).
 
 ### Access Formbricks website
 
 If you want to make changes to the Formbricks website, e.g. to update the documentation, run the following command in a separate terminal window:
-
+<Col>
 <CodeGroup title="Start Formbricks Website">
 
 ```bash
@@ -109,5 +120,5 @@ pnpm dev --filter=formbricks-com
 ```
 
 </CodeGroup>
-
+</Col>
 You can now access the Formbricks website on [http://localhost:3001](http://localhost:3001).

apps/formbricks-com/app/docs/contributing/troubleshooting/page.mdx

@@ -5,16 +5,16 @@ import UncaughtPromise from "./uncaught-promise.webp";
 import Logout from "./logout.webp";
 
 export const meta = {
-  title: "Troubleshooting",
+  title: "Formbricks Troubleshooting Guide: How to Solve & Debug Common Issues",
   description:
-    "Formbricks is a complex application in constant development. Sometimes, things don't go as planned. Here are some tips to help you troubleshoot.",
+    "Facing issues with Formbricks? This troubleshooting guide covers frequently encountered problems, from Prisma migrations to package errors and more. Detailed solutions, accompanied by visual aids, ensure a smoother user experience with Formbricks",
 };
 
 #### Contributing
 
 # Troubleshooting
 
-Here you'll find help with Frequently Recurring Problems
+Here you'll find help with frequently recurring problems
 
 ## "The app doesn't work after doing a prisma migration"
 
@@ -24,7 +24,7 @@ This can happen but fear not, the fix is easy: Delete the application storage of
   src={ClearAppData}
   alt="Demo App Preview"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 ## "I ran 'pnpm i' but there seems to be an error with the packages"
@@ -34,7 +34,7 @@ If nothing helps, run `pnpm clean` and then `pnpm i` again. This solves a lot.
 ## "I get a full-screen error with cryptic strings"
 
 This usually happens when the Formbricks Widget wasn't correctly or completely built.
-
+<Col>
 <CodeGroup title="Build js library first and then run again">
 
 ```bash
@@ -45,11 +45,11 @@ pnpm dev
 ```
 
 </CodeGroup>
-
+</Col>
 ## My machine struggles with the repository
 
 Since we're working with a monorepo structure, the repository can get quite big. If you're having trouble working with the repository, try the following:
-
+<Col>
 <CodeGroup title="Only run the required project">
 
 ```bash {{ title: 'Formbricks Web-App' }}
@@ -65,7 +65,7 @@ pnpm dev --filter=demo...
 ```
 
 </CodeGroup>
-
+</Col>
 However, in our experience it's better to run `pnpm dev` than having two terminals open (one with the Formbricks app and one with the demo).
 
 ## Uncaught (in promise) SyntaxError: Unexpected token !DOCTYPE ... is not valid JSON
@@ -74,9 +74,9 @@ However, in our experience it's better to run `pnpm dev` than having two termina
   src={UncaughtPromise}
   alt="Uncaught promise"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 This happens when you're using the Demo App and delete the Person within the Formbricks app which the widget is currently connected with. We're fixing it, but you can also just logout your test person and reload the page to get rid of it.
 
-<Image src={Logout} alt="Logout Person" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+<Image src={Logout} alt="Logout Person" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />

apps/formbricks-com/app/docs/faq/page.mdx

@@ -0,0 +1,14 @@
+import FAQ from "@/components/docs/docsFaq";
+
+export const meta = {
+  title: "FAQ",
+  description: "Frequently Asked Questions about Formbricks and how to use it.",
+};
+
+#### FAQ
+
+# Frequently Asked Questions
+
+Here you'll find help with frequently recurring problems. If you can't find an answer to your question, please join our [Discord server](https://formbricks.com/discord).
+
+<FAQ />

apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx

@@ -6,8 +6,9 @@ import WidgetConnected from "./widget-connected.webp";
 import ReactApp from "./react-in-app-survey-app-popup-form.webp";
 
 export const metadata = {
-  title: "Framework Guides",
-  description: "Explore all the possible ways you can integrate Formbricks into your application.",
+  title: "Integrate Formbricks: Comprehensive Framework Guide & Integration Tutorial",
+  description:
+    "Master the integration of Formbricks into your application with our detailed guides. From HTML to ReactJS, NextJS, and VueJS, get step-by-step instructions and ensure seamless setup.",
 };
 
 # Framework Guides
@@ -30,7 +31,7 @@ Before getting started, make sure you have:
   src={SetupChecklist}
   alt="Step 2 - Setup Checklist"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 ---
@@ -39,16 +40,17 @@ Before getting started, make sure you have:
 
 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 t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.0.0/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks=window.js;window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
+    !function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.1.2/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
     </script>
 <!-- END Formbricks Surveys -->
 ```
 </CodeGroup>
-
+</Col>
 ### Required Customizations to be Made
 
 <Properties>
@@ -70,6 +72,7 @@ Refer our [Example HTML project](https://github.com/formbricks/examples/tree/mai
 
 Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`.
 
+<Col>
 <CodeGroup title="Install Formbricks JS library">
 ```shell {{ title: 'npm' }}
 npm install --save @formbricks/js
@@ -82,9 +85,9 @@ yarn add @formbricks/js
 ```
 
 </CodeGroup>
- 
+</Col>
 Now, update your App.js/ts file to initialise Formbricks.
-
+<Col>
 <CodeGroup title="src/App.js">
 
 ```js
@@ -107,7 +110,7 @@ export default App;
 ```
 
 </CodeGroup>
-
+</Col>
 ### Required Customizations to be Made
 
 <Properties>
@@ -129,7 +132,7 @@ The app initializes 'formbricks' when it's loaded in a browser environment (due
   src={ReactApp}
   alt="In app survey in React app for micro surveys"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 Refer 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!
@@ -147,6 +150,7 @@ guidelines for each convention below:
 
 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 --save @formbricks/js
@@ -159,9 +163,9 @@ yarn add @formbricks/js
 ```
 
 </CodeGroup>
-
+</Col>
 ### App Directory
-
+<Col>
 <CodeGroup title="app/formbricks.tsx">
 ```tsx {{title: 'Typescript'}}
 "use client";
@@ -173,19 +177,19 @@ export default function FormbricksProvider() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  useEffect(() => {
-    formbricks.init({
-      environmentId: "<environment-id>",
-      apiHost: "<api-host>",
-      debug: true, // remove when in production
-    });
-  }, []);
+useEffect(() => {
+formbricks.init({
+environmentId: "<environment-id>",
+apiHost: "<api-host>",
+debug: true, // remove when in production
+});
+}, []);
 
-  useEffect(() => {
-    formbricks?.registerRouteChange();
-  }, [pathname, searchParams]);
+useEffect(() => {
+formbricks?.registerRouteChange();
+}, [pathname, searchParams]);
 
-  return null;
+return null;
 }
 
 ````
@@ -207,11 +211,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 ````
 
 </CodeGroup>
+</Col>
 
 Refer 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' }}
@@ -245,7 +251,7 @@ export default function App({ Component, pageProps }: AppProps) {
 ```
 
 </CodeGroup>
-
+</Col>
 Refer our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
 
 ### Required Customizations to be Made
@@ -283,6 +289,7 @@ Now visit the [Validate your Setup](#validate-your-setup) section to verify your
 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 --save @formbricks/js
@@ -335,7 +342,7 @@ router.afterEach((to, from) => {
 ```
 
 </CodeGroup>
-
+</Col>
 ### Required Customizations to be Made
 
 <Properties>
@@ -367,7 +374,7 @@ Once you have completed the steps above, you can validate your setup by checking
   src={WidgetNotConnected}
   alt="Widget isnt connected"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 To this:
@@ -376,9 +383,9 @@ To this:
   src={WidgetConnected}
   alt="Widget is connected"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 **Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**
 
----
+---

apps/formbricks-com/app/docs/getting-started/quickstart-in-app-survey/page.mdx

@@ -14,8 +14,8 @@ import I11 from "./11-survey-logs-in-app-survey-popup.webp";
 import ReactApp from "../framework-guides/react-in-app-survey-app-popup-form.webp";
 
 export const meta = {
-  title: "Collect in app survey responses in 10 minutes",
-  description: "Get your first in app survey response in 10 minutes.",
+  title: "Formbricks Quickstart Guide: In-App Surveys Made Simple",
+  description: "Launch your first in-app survey effortlessly. Dive into our step-by-step guide to set up, integrate, and debug Formbricks in your web app in under 15 minutes.",
 };
 
 #### Getting Started

apps/formbricks-com/app/docs/integrations/google-sheets/page.mdx

@@ -0,0 +1,168 @@
+import { Fence } from "@/components/shared/Fence";
+import { Callout } from "@/components/shared/Callout";
+import IntegrationTab from "./integrations-tab.webp";
+import ConnectWithGoogle from "./connect-with-google.webp";
+import GoogleConnected from "./google-connected.webp";
+import LinkSurveyWithSheet from "./link-survey-with-sheet.webp";
+import LinkWithQuestions from "./link-with-questions.webp";
+import ListLinkedSurveys from "./list-linked-surveys.webp";
+import DeleteConnection from "./delete-connection.webp";
+import Image from "next/image";
+
+export const meta = {
+  title: "n8n Setup",
+  description: "Wire up Formbricks with n8n and 350+ other apps",
+};
+
+#### Integrations
+
+# Google Sheets
+
+The Google Sheets integration allows you to automatically send responses to a Google Sheet of your choice.
+
+<Note>
+  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
+  self-hosted version of Formbricks.
+</Note>
+
+## Formbricks Cloud
+
+1. Go to the Integrations tab in your [Formbricks Cloud dashboard](https://app.formbricks.com/) and click on the "Connect" button under Google Sheets integration.
+
+<Image
+  src={IntegrationTab}
+  alt="Formbricks Integrations Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. Now click on the "Connect with Google" button to authenticate yourself with Google.
+
+<Image
+  src={ConnectWithGoogle}
+  alt="Connect Formbricks with your Google"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. You will now be taken to the Google OAuth page where you can select the Google account you want to use for the integration.
+
+4. Once you have selected the account and completed the authentication process, you will be taken back to Formbricks Cloud and see the connected status as below:
+
+<Image
+  src={GoogleConnected}
+  alt="Formbricks is now connected with Google"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<Note>
+
+Before the next step, make sure that you have a Formbricks Survey with at least one question and a Google Sheet in the Google account you integrated.
+
+</Note>
+
+6. Now click on the "Link New Sheet" button to link a new Google Sheet with Formbricks and a modal will open up.
+
+<Image
+  src={LinkSurveyWithSheet}
+  alt="Link Formbricks with a Google Sheet"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+7. Select the Google Sheet you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in the Google Sheet. Select the questions and click on the "Link Sheet" button.
+
+<Image
+  src={LinkWithQuestions}
+  alt="Select question to link with Google Sheet"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+
+/>
+
+8. On submitting, the modal will close and you will see the linked Google Sheet in the list of linked Google Sheets.
+
+<Image
+  src={ListLinkedSurveys}
+  alt="List of linked Google Sheets"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Congratulations! You have successfully linked a Google Sheet with Formbricks. Now whenever a response is submitted for the linked Survey, it will be automatically added to the linked Google Sheet.
+
+## Setup in self-hosted Formbricks
+
+Enabling the Google Sheets Integration in a self-hosted environment isn't easy and requires a setup using Google Cloud and changing the environment variables of your Formbricks instance.
+
+<Note>This process is really complicated and we recommend using Formbricks Cloud for this feature.</Note>
+
+We will first create a Google Cloud Project and then enable the Google Sheets API for it. Then we will create an OAuth Client ID and Client Secret for our Formbricks instance and set them as environment variables.
+
+1. Go to the [Google Cloud Console](https://console.cloud.google.com/) and **create a new project**.
+2. Now select the project you just created and go to the "**APIs & Services**" section.
+3. Click on the "**Enable APIs and Services**" button and search for "**Google Sheets API**" and enable it.
+4. Now go to the "**OAuth Consent screen**" section and select the **"External" User Type** if you want any Google User to be able to use the integration or select "Internal" if you want only the users of your Google Workspace to be able to use the integration.
+5. Now provide it the details such as
+   - App name (Will **show up in the OAuth modal** when the user is asked to authenticate with Google)
+   - User support email (ideally should be **your email** for any support queries by the Users or Google)
+   - Developer contact information (ideally should be **your email** for any **support queries by Google**)
+6. Now click on the "Save and Continue" button and you will be taken to the Scopes step.
+7. Click on the "**Add or Remove Scopes**" button and add the scopes `https://www.googleapis.com/auth/userinfo.email`, `https://www.googleapis.com/auth/spreadsheets` & `https://www.googleapis.com/auth/drive` and click on the "Update" button:
+8. Now Verify the scopes and click on the "Save and Continue" button.
+9. Now go to the **"Test Users" section, skip the step**, and click the "Save and Continue" button.
+10. You will now be shown a summary of the OAuth Consent Screen. Verify the details and Click on the "**Back to Dashboard**" button.
+11. Now go to the "**Credentials**" section and click on the "**Create Credentials**" button and select "**OAuth Client ID**".
+12. Select "**Web Application**" as the Application Type and provide it a name (this name will **not be visible** to your end users).
+13. Now add your **public facing URL** in the "**Authorized JavaScript Origins**" section:
+    - https://`<your-public-facing-url`>
+14. Now add the following URL in the "**Authorized redirect URIs**" section and click on the "**Create**" button:
+    - https://`<your-public-facing-url`>/api/google-sheet/callback
+15. You will now be shown the **Client ID** and **Client Secret**. Copy them and set them as the **environment variables** in your Formbricks instance as:
+    - `GOOGLE_SHEETS_CLIENT_ID` - Client ID
+    - `GOOGLE_SHEETS_CLIENT_SECRET` - Client Secret
+16. Also use the **same Authorized redirect URI** in the `GOOGLE_SHEETS_REDIRECT_URL` environment variable.
+
+### By now, your environment variables should include the below ones as well:
+
+- `GOOGLE_SHEETS_CLIENT_ID`
+- `GOOGLE_SHEETS_CLIENT_SECRET`
+- `GOOGLE_SHEETS_REDIRECT_URL`
+
+Voila! You have successfully enabled the Google Sheets integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Formbricks Cloud](#formbricks-cloud) section to link a Google Sheet with Formbricks.
+
+## Remove Integration with Google Account
+
+To remove the integration with Google Account,
+
+1. Visit the Integrations tab in your Formbricks Cloud dashboard.
+2. Select "Manage" button in the Google Sheets card.
+3. Click on the "Connected with `<your-email-here`>" just before the "Link new Sheet" button.
+4. It will now ask for a confirmation to remove the integration. Click on the "Delete" button to remove the integration. You can always come back and connect again with the same Google Account.
+
+<Image
+  src={DeleteConnection}
+  alt="Delete Google Integration with Formbricks"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## What data do you need?
+
+- Your **Email ID** for authentication (We use this to identify you)
+- Your **Google Sheets Names and IDs** (We fetch this to list and show you the options of choosing a sheet to integrate with)
+- Write access to **selected Google Sheet** (The google sheet you choose to integrate it with, we write survey responses to it)
+
+For the above, we ask for:
+
+1. **User Email**: To identify you (that's it, nothing else, we're opensource, see this in our codebase [here](https://github.com/formbricks/formbricks/blob/main/apps/web/app/api/google-sheet/callback/route.ts#L47C17-L47C25))
+1. **Google Drive API**: To list all your google sheets (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L13))
+1. **Google Spreadsheet API**: To write to the spreadsheet you select (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L70))
+
+<Note>
+  We do not store any other information of yours! We value Privacy more than you and rest assured you're safe
+  with us!
+</Note>
+
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/formbricks-com/app/docs/integrations/make/page.mdx

@@ -0,0 +1,136 @@
+import Image from "next/image";
+
+import UpdateQuestionId from "./update-question-id.webp";
+import DuplicateSurvey from "./duplicate-survey.webp";
+import CreateNewScenario from "./create-new-scenario.webp";
+import SearchFormbricks from "./search-formbricks.webp";
+import SelectTriggers from "./select-trigger.webp";
+import CreateWebhook from "./create-webhook.webp";
+import EnterApiKey from "./enter-api-key.webp";
+import SelectSurvey from "./select-survey.webp";
+import SubmitTestResponse from "./submit-test-response.webp";
+import AddModule from "./add-module.webp";
+import SelectFields from "./select-fields.webp";
+import Result from "./result.webp";
+import SelectAction from "./select-action.webp";
+
+export const meta = {
+  title: "Formbricks Integration with Make.com: A Step-by-Step Guide",
+  description: "Discover how to seamlessly integrate Formbricks with Make.com. Dive into our comprehensive guide to set up scenarios, connect with a plethora of apps, and send your survey data to more than 1000 platforms.",
+};
+
+#### Integrations
+
+# Make.com Setup
+
+Make is a powerful tool to send information between Formbricks and thousands of apps. Here's how to set it up.
+
+<Note>
+  ### Nail down your survey first ? 
+  Any changes in the survey cause additional work in the _Scenario_. It
+  makes sense to first settle on the survey you want to run and then get to setting up Make.
+</Note>
+
+## Step 1: Setup your survey incl. `questionId` for every question
+
+Set up the `questionId`s of your survey questions before publishing.
+
+<Image
+  src={UpdateQuestionId}
+  alt="Update Question ID"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+_Update the Question ID field in every question card under Advanced Settings._
+
+<Note>
+  ### Already published? Duplicate survey 
+  You can only update the questionId before publishing the survey. If
+  already published, simply duplicate it.
+  <Image
+    src={DuplicateSurvey}
+    alt="Duplicate Survey"
+    quality="100"
+    className="rounded-lg max-w-full sm:max-w-3xl"
+  />
+</Note>
+
+## Step 2: Setup Make.com
+
+Visit [Make.com](https://make.com) to start a new scenario.
+
+<Image
+  src={CreateNewScenario}
+  alt="Create New Scenario"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+Search for `Formbricks`:
+
+<Image
+  src={SearchFormbricks}
+  alt="Search Formbricks"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+Choose the event to trigger the Scenario:
+
+<Image
+  src={SelectTriggers}
+  alt="Select Triggers"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+## Step 3: Connect Formbricks with Make
+
+Click "Create a webhook":
+
+<Image
+  src={CreateWebhook}
+  alt="Create Webhook"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+Enter the Formbricks API key. Learn how to get one from the [API Key tutorial](/docs/api/api-key-setup).
+
+<Image src={EnterApiKey} alt="Enter API Key" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+## Step 4: Select Survey
+
+Choose from your created surveys:
+
+<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+## Step 5: Send a test response
+
+You need a test response for Make setup. For local Formbricks setup, use the [Demo App](/docs/contributing/demo) to submit a test response.
+
+<Image
+  src={SubmitTestResponse}
+  alt="Submit Test Response"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+## Step 6: Set up Google Sheet
+
+Decide on the desired action for the data. Here, we'll send submissions to a Google Sheet:
+
+<Image src={AddModule} alt="Add Module" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+Choose "Add a Row" for the action:
+
+<Image src={SelectAction} alt="Select Action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+Specify the spreadsheet details and match the Formbricks data:
+
+<Image src={SelectFields} alt="Select Fields" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+A new row gets added to the spreadsheet for every response:
+
+<Image src={Result} alt="Result" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

apps/formbricks-com/app/docs/integrations/n8n/page.mdx

@@ -19,8 +19,8 @@ import SuccessConnection from "./success-connection.png";
 import UpdateQuestionId from "./update-question-id.png";
 
 export const meta = {
-  title: "n8n Setup",
-  description: "Wire up Formbricks with n8n and 350+ other apps",
+  title: "Comprehensive Guide to Integrating Formbricks with n8n",
+  description: "Unlock the potential of combining Formbricks with n8n for a streamlined workflow experience. Dive into our step-by-step guide and send your survey data effortlessly to 350+ applications. Streamline your data processes now!",
 };
 
 #### Integrations

apps/formbricks-com/app/docs/integrations/zapier/page.mdx

@@ -15,8 +15,8 @@ import UpdateQuestionId from "./update-question-id.webp";
 import ZapierMessage from "./zapier-message.webp";
 
 export const meta = {
-  title: "Zapier Setup",
-  description: "Wire up Formbricks with Zapier and 5000+ other apps",
+  title: "Step-by-Step Guide to Integrating Formbricks with Zapier",
+  description: "Master the integration of Formbricks with Zapier using our detailed guide. Seamlessly connect your surveys to 5000+ apps, automate data transfers, and enhance feedback management. Start optimizing your workflow today.",
 };
 
 #### Integrations

apps/formbricks-com/app/docs/introduction/how-it-works/page.mdx

@@ -1,7 +1,7 @@
 export const meta = {
-  title: "How Formbricks works",
+  title: "Inside Look: Formbricks In-Product Micro-Surveys",
   description:
-    "Master in-product micro-surveys with Formbricks: user-friendly form builder, precise targeting, seamless integration, and insightful analytics for SaaS products.",
+    "Unlock the full potential of Formbricks: From intuitive form-building and event-based triggers to effortless integrations and deep analytics. Master the art of in-product surveys for your SaaS or digital platform.",
 };
 
 #### Introduction

apps/formbricks-com/app/docs/introduction/what-is-formbricks/page.mdx

@@ -1,12 +1,12 @@
 import { GettingStarted } from "@/components/docs/GettingStarted";
-import { BestPractices } from "@/components/docs/BestPractices";
+import BestPractices from "@/components/docs/BestPractices";
 import { HeroPattern } from "@/components/docs/HeroPattern";
 import { Button } from "@/components/docs/Button";
 
 export const metadata = {
-  title: "Formbricks – Open Source Experience Management",
+  title: "Formbricks: Privacy-first Experience Management",
   description:
-    "Natively embed qualitative user research into your B2B SaaS. Leverage Best Practices for user discovery to increase Product-Market Fit",
+    "Enhance your product with Formbricks – the leading open-source solution for in-product micro-surveys. Dive deep into user research, amplify product-market fit, and uncover the 'why' behind your analytics.",
 };
 
 export const sections = [
@@ -20,7 +20,7 @@ export const sections = [
 
 Welcome to Formbricks, your go-to solution for in-product micro-surveys that will supercharge your product experience! 🚀 {{ className: 'lead' }}
 
-<div className="not-prose mb-16 mt-6 flex gap-3">
+<div className="mb-16 mt-6 flex gap-3">
   <Button href="/docs/getting-started/quickstart-in-app-survey" arrow="right" children="Quickstart" />
 </div>
 
@@ -34,7 +34,7 @@ Natively embed qualitative user research into your B2B SaaS. Leverage Best Pract
 - 🧪 **Smart triggering**: Show the right survey at the right time with event-based triggers for accurate research and well-defined priorities.
 - 🎉 **Open-source and self-hosted**: Enjoy full control over your data and infrastructure with our AGPL-licensed solution, and stay tuned for our upcoming cloud version!
 
-<div className="not-prose">
+<div>
   <Button
     href="https://app.formbricks.com/"
     variant="text"
@@ -45,5 +45,3 @@ Natively embed qualitative user research into your B2B SaaS. Leverage Best Pract
 </div>
 
 <GettingStarted />
-
-<BestPractices />

apps/formbricks-com/app/docs/introduction/why-is-it-better/page.mdx

@@ -1,7 +1,7 @@
 export const meta = {
-  title: "Why is Formbricks better?",
+  title: "Formbricks vs. Generic Survey Tools: A Comparative Insight",
   description:
-    "The ultimate survey solution for SaaS, offering in-depth micro-surveys, precise targeting, and seamless integrations. Discover the difference today!",
+    "Discover how Formbricks excels as a specialized in-product micro-survey platform for SaaS. Get unmatched targeting, seamless integrations, and make informed decisions with our open-source advantage.",
 };
 
 #### Introduction 

apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx

@@ -3,8 +3,8 @@ import Image from "next/image";
 import QuestionId from "./question-id.webp";
 
 export const meta = {
-  title: "Data Prefilling in Link Surveys",
-  description: "Prefill data in your surveys to make it easier for your users to provide feedback.",
+  title: "URL Data Prefilling for Link Surveys in Formbricks",
+  description: "Master the art of data prefilling in Formbricks link surveys. Dive into our guide on how to use URL parameters to prepopulate answers, boosting conversion rates and enhancing user experience. Learn through examples and ensure correct validation for each question type.",
 };
 
 #### Link Surveys
@@ -22,7 +22,7 @@ URL prefilling of data comes in handy when you:
 - Want to embed the first question in an email and increase conversion by prefilling the choice
 
 ## Quick Example
-
+<Col>
 <CodeGroup title="Example URL">
 
 ```sh
@@ -30,7 +30,7 @@ https://app.formbricks.com/s/clin3dxja02k8l80hpwmx4bjy?question_id=5
 ```
 
 </CodeGroup>
-
+</Col>
 ## How it works
 
 To prefill the first question of a survey, append `?question_id=answer` at the end of the survey URL. The answer has to match the expected type of the question. For example, if the first question is a rating question, the answer has to be a number. If the first question is a single select question, the answer has to be a string.
@@ -58,7 +58,7 @@ You find the `questionId` in the Advanced Settings at the bottom of each questio
 Here are a few examples to get you started:
 
 ### Rating Question
-
+<Col>
 <CodeGroup title="Translates to 5 stars / points / emojis">
 
 ```sh
@@ -66,9 +66,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?rating_question_id=5
 ```
 
 </CodeGroup>
-
+</Col>
 ### NPS Question
-
+<Col>
 <CodeGroup title="Translates to an NPS rating of 10">
 
 ```sh
@@ -76,9 +76,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?nps_question_id=10
 ```
 
 </CodeGroup>
-
+</Col>
 ### Single Select Question (Radio)
-
+<Col>
 <CodeGroup title="Chooses the option 'Very disappointed' in the single select question. The string has to be identical to the option in your question">
 
 ```sh
@@ -86,9 +86,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?single_select_question_id
 ```
 
 </CodeGroup>
-
+</Col>
 ### Multi Select Question (Checkbox)
-
+<Col>
 <CodeGroup title="Selects three options 'Sun, Palms and Beach' in the multi select question. The strings have to be identical to the options in your question">
 
 ```sh
@@ -96,9 +96,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?multi_select_question_id=
 ```
 
 </CodeGroup>
-
+</Col>
 ### Open Text Question
-
+<Col>
 <CodeGroup title="Adds 'I love Formbricks' as the answer to the open text question">
 
 ```sh
@@ -106,9 +106,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?openText_question_id=I%20
 ```
 
 </CodeGroup>
-
+</Col>
 ### CTA Question
-
+<Col>
 <CodeGroup title="Adds 'clicked' as the answer to the CTA question. Alternatively, you can set it to 'dismissed' to skip the question.">
 
 ```txt
@@ -116,7 +116,7 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?cta_question_id=clicked
 ```
 
 </CodeGroup>
-
+</Col>
 ## Validation
 
 Make sure that the answer in the URL matches the expected type for the first question.

apps/formbricks-com/app/docs/link-surveys/single-use-links/page.mdx

@@ -0,0 +1,80 @@
+import Image from "next/image";
+
+import EnvVar from "./env-variable.webp";
+import ShareModal from "./share-modal.webp";
+import Settings from "./single-use-setting.webp";
+import Message from "./used-message.webp";
+import Metadata from "./metadata.webp";
+
+export const meta = {
+  title: "Single Use Links",
+  description: "Make sure that each respondent only replies once with single use links.",
+};
+
+#### Link Surveys
+
+# Single Use Links
+
+This guide will help you understand how to generate and use single-use links within our application.
+
+## Purpose
+
+- Single-use links (or one-time / disposable links) are URLs that grant access to a survey only once.
+
+- The primary purpose of single-use links is to assure that no respondent submits a survey twice.
+
+## Using Single-Use Links with Formbricks
+
+Using single-use links with Formbricks is quite straight-forward:
+
+1. In the survey settings, toggle "Single Use Link" on:
+
+   <Image
+     src={Settings}
+     alt="Single use survey settings"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />
+
+2. When you publish your survey, the following modal will open:
+   <Image
+     src={ShareModal}
+     alt="Share modal with 7 single use links which can be regenerated"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />
+
+Here, you can copy and generate as many single-use links as you need.
+
+## URL Encryption
+
+You can encrypt single use URLs to assure information to be protected. To enable it, you have to set the correct environment variable:
+
+<Image
+  src={EnvVar}
+  alt="Set the right env var to be able to enable encryption."
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Check suId of a submission
+
+You can find the suId of each submission in the submission meta data. To view it, simplte hover over the Avatar:
+
+<Image
+  src={Metadata}
+  alt="View suId in the submission meta data."
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### 'Link used' message
+
+You can customize the 'link used' messaging in the Survey Editor settings:
+
+<Image
+  src={Message}
+  alt="Adjust the message shown to people if a link was already used."
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>