feat: Make formbricks-js ready for public websites (#1470)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
Co-authored-by: Johannes <johannes@formbricks.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,16 @@
 #  BASICS  #
 ############
 
-NEXT_PUBLIC_WEBAPP_URL=http://localhost:3000
+WEBAPP_URL=http://localhost:3000
+
+# Set this if you want to have a shorter link for surveys
+SHORT_URL_BASE=
+
+# Encryption keys
+# Please set both for now, we will change this in the future
+
+# You can use: `openssl rand -hex 32` to generate one
+ENCRYPTION_KEY=
 
 ##############
 #  DATABASE  #
@@ -15,27 +25,18 @@ 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  #
 ###############
 
 # @see: https://next-auth.js.org/configuration/options#nextauth_secret
-# You can use: `openssl rand -base64 32` to generate one
+# You can use: `openssl rand -hex 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  #
 ################
@@ -63,39 +64,50 @@ 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
-NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
 
@@ -104,5 +116,15 @@ 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 
+AIRTABLE_CLIENT_ID=
+
+# Enterprise License Key
+ENTERPRISE_LICENSE_KEY=
+
+*/

.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-formbricks-com.yml

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

.github/workflows/build-web.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 -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
+      - name: Build Formbricks-web
         run: pnpm build --filter=web...

.github/workflows/cron-reportUsageToStripe.yml

@@ -0,0 +1,22 @@
+name: Cron - reportUsageToStripe
+
+on:
+  # "Scheduled workflows run on the latest commit on the default or base branch."
+  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
+  schedule:
+    # This will run the job at 23:00 UTC every day of every month.
+    - cron: "0 21 * * *"
+jobs:
+  cron-reportUsageToStripe:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      CRON_SECRET: ${{ secrets.CRON_SECRET }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: cURL request
+        if: ${{ env.APP_URL && env.CRON_SECRET }}
+        run: |
+          curl ${{ env.APP_URL }}/api/cron/report-usage \
+            -X POST \
+            -H 'x-api-key: ${{ env.CRON_SECRET }}' \
+            --fail

.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 -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Lint
         run: pnpm lint

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

@@ -1,118 +0,0 @@
-name: "Next.js Bundle Analysis"
-
-on:
-  workflow_call:
-  push:
-    branches:
-      - main
-
-jobs:
-  build:
-    name: Production build
-    if: ${{ github.event_name == 'push' }}
-    uses: ./.github/workflows/build-production.yml
-    secrets: inherit
-
-  analyze:
-    needs: build
-    if: always()
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-
-      - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 18.x
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
-
-      - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
-
-      - name: create .env
-        run: cp .env.example .env
-
-      - name: Build formbricks-js dependencies
-        run: pnpm build --filter=web...
-
-      - name: Upload bundle
-        uses: actions/upload-artifact@v2
-        with:
-          name: bundle
-          path: apps/web/.next/analyze/__bundle_analysis.json
-
-      - name: Analyze bundle
-        run: |
-          cd apps/web
-          npx -p nextjs-bundle-analysis@0.5.0 report
-
-      - name: Upload bundle
-        uses: actions/upload-artifact@v2
-        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: |
-          cd apps/web
-          ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
-
-      - name: Get comment body
-        id: get-comment-body
-        if: success() && github.event.number
-        run: |
-          cd apps/web
-          body=$(cat .next/analyze/__bundle_analysis_comment.txt)
-          body="${body//'%'/'%25'}"
-          body="${body//$'\n'/'%0A'}"
-          body="${body//$'\r'/'%0D'}"
-          echo ::set-output name=body::$body
-
-      - name: Find Comment
-        uses: peter-evans/find-comment@v1
-        if: success() && github.event.number
-        id: fc
-        with:
-          issue-number: ${{ github.event.number }}
-          body-includes: "<!-- __NEXTJS_BUNDLE_@calcom/web -->"
-
-      - name: Create Comment
-        uses: peter-evans/create-or-update-comment@v1.4.4
-        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@v1.4.4
-        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-web.yml
     secrets: inherit
 
   required:
-    needs: [lint, test, build-production]
+    needs: [lint, test, build]
     if: always()
     runs-on: ubuntu-latest
     steps:

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

@@ -0,0 +1,93 @@
+name: Docker
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+on:
+  push:
+    tags:
+      - "v*"
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}
+
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Install the cosign tool except on PR
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@6e04d228eb30da1757ee4e1dd75a0ec73a653e06 #v3.1.1
+        with:
+          cosign-release: 'v2.1.1'
+
+      # Set up BuildKit Docker container builder to be able to build
+      # multi-platform images and export cache
+      # https://github.com/docker/setup-buildx-action
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+
+      # Login against a Docker registry except on PR
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      # Sign the resulting Docker image digest except on PRs.
+      # This will only write to the public Rekor transparency log when the Docker
+      # repository is public to avoid leaking data.  If you would like to publish
+      # transparency data even for private images, pass --force to cosign below.
+      # https://github.com/sigstore/cosign
+      - name: Sign the published Docker image
+        if: ${{ github.event_name != 'pull_request' }}
+        env:
+          # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable
+          TAGS: ${{ steps.meta.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+        # This step uses the identity token to provision an ephemeral certificate
+        # against the sigstore community Fulcio instance.
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

.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 32)
+          echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
+
+      - name: Generate Random ENCRYPTION_KEY
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Checkout Repo
         uses: actions/checkout@v2
 
@@ -41,3 +52,7 @@ 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 }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}

.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

@@ -10,7 +10,7 @@ tasks:
       gp sync-await init && 
       turbo --filter "@formbricks/demo" go
 
-  - name : website
+  - name: website
     command: gp sync-await init && turbo --filter "@formbricks/formbricks-com" dev
 
   - name: Init Formbricks
@@ -32,10 +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_ENCRYPTION_KEY=$(openssl rand -hex 32)
+      sed -i 's/^ENCRYPTION_KEY=.*/ENCRYPTION_KEY='"$RANDOM_ENCRYPTION_KEY"'/' .env
       turbo --filter "@formbricks/web" go
-      
+
 image:
   file: .gitpod.Dockerfile
 
@@ -57,8 +59,8 @@ ports:
     onOpen: ignore
   - port: 8025
     visibility: public
-    onOpen: ignore
-    
+    onOpen: open-browser
+
 github:
   prebuilds:
     master: true
@@ -73,4 +75,4 @@ vscode:
     - "dbaeumer.vscode-eslint"
     - "esbenp.prettier-vscode"
     - "Prisma.prisma"
-    - "yzhang.markdown-all-in-one"
+    - "yzhang.markdown-all-in-one"

.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,69 @@
+# 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,33 @@
-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
+1. **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.
+1. **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,7 @@
+<div id="top"></div>
+
+[<img src="ph.png">](https://www.producthunt.com/posts/formbricks)
+
 <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">
@@ -5,7 +9,7 @@
   <h3 align="center">Formbricks</h3>
 
   <p align="center">
-    The Open Source Survey & Experience Management solution for fast growing companies
+    The Open Source Survey Toolbox
     <br />
     <a href="https://formbricks.com/">Website</a>  |  <a href="https://formbricks.com/discord">Join Discord community</a>
   </p>
@@ -29,6 +33,10 @@
 <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>
+
 ## ✨ 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">
@@ -39,17 +47,31 @@ Formbricks is your go-to solution for in-product micro-surveys that will superch
 
 ## 💪 Mission: Make customer-centric decisions based on data.
 
-Formbricks helps you apply best practices from data-driven work and experience management to make better business decisions. Ask users as they experience your product - and leverage a significantly higher conversion rate. Gather all insights you can - including partial submissions and build conviction for the next product decision. Better data, better business.
+Formbricks is a powerful tool for creating in-product micro-surveys - and leverage a significantly higher conversion rate. It allows you to gather valuable insights from your users, enabling you to make data-driven decisions that enhance your product's user experience. With Formbricks, you can create surveys with our no-code editor, choose from a variety of templates, target specific user groups, and much more.
+
+### Table of Contents
+
+- [Features](#features)
+- [Getting Started](#getting-started)
+  - [Cloud Version](#cloud-version)
+  - [Self-hosted Version](#self-hosted-version)
+  - [Development](#development)
+- [Contribution](#contribution)
+- [Contact](#contact-us)
+- [License](#license)
+- [Security](#security)
+
+<a id="features"></a>
 
 ### 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
 
@@ -61,17 +83,65 @@ Formbricks helps you apply best practices from data-driven work and experience m
 - 🔒 [Auth.js](https://authjs.dev/)
 - 🧘‍♂️ [Zod](https://zod.dev/)
 
+<a id="getting-started"></a>
+
 ## 🚀 Getting started
 
+We've got several options depending on your need to help you quickly get started with Formbricks.
+
+<a id="cloud-version"></a>
+
 ### ☁️ 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).
+
+<a id="self-hosted-version"></a>
 
 ### 🐳 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)
+
+<a id="development"></a>
+
+### 👨‍💻 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)
+
+<a id="contribution"></a>
 
 ## ✍️ Contribution
 
@@ -79,22 +149,36 @@ 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 the demand for a particular issue is 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>
+
+<a id="contact-us"></a>
+
 ## 📆 Contact us
 
 Let's have a chat about your survey needs and get you started.
 
 <a href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
 
+<a id="license"></a>
+
 ## ⚖️ License
 
-Distributed under the AGPLv3 License. See `LICENSE` for more information.
+Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.
+
+<a id="security"></a>
 
 ## 🔒 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.12",
+    "next": "14.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/demo/pages/_app.tsx

@@ -1,38 +1,8 @@
-import formbricks from "@formbricks/js";
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
 import "../styles/globals.css";
 
-declare const window: any;
-
-if (typeof window !== "undefined") {
-  if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-    formbricks.init({
-      environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
-      apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
-      debug: true,
-    });
-    window.formbricks = formbricks;
-  }
-}
-
 export default function App({ Component, pageProps }: AppProps) {
-  const router = useRouter();
-
-  useEffect(() => {
-    // Connect next.js router to Formbricks
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const handleRouteChange = formbricks?.registerRouteChange;
-      router.events.on("routeChangeComplete", handleRouteChange);
-
-      return () => {
-        router.events.off("routeChangeComplete", handleRouteChange);
-      };
-    }
-  }, []);
-
   return (
     <>
       <Head>

apps/demo/pages/app/index.tsx

@@ -2,9 +2,13 @@ import formbricks from "@formbricks/js";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import fbsetup from "../../public/fb-setup.png";
+import { useRouter } from "next/router";
+
+declare const window: any;
 
 export default function AppPage({}) {
   const [darkMode, setDarkMode] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     if (darkMode) {
@@ -14,8 +18,32 @@ export default function AppPage({}) {
     }
   }, [darkMode]);
 
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+      const isUserId = window.location.href.includes("userId=true");
+      const userId = isUserId ? "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING" : undefined;
+      formbricks.init({
+        environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
+        apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
+        userId,
+        debug: true,
+      });
+      window.formbricks = formbricks;
+    }
+
+    // Connect next.js router to Formbricks
+    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+      const handleRouteChange = formbricks?.registerRouteChange;
+      router.events.on("routeChangeComplete", handleRouteChange);
+
+      return () => {
+        router.events.off("routeChangeComplete", handleRouteChange);
+      };
+    }
+  });
+
   return (
-    <div className="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 +57,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>
 
@@ -204,25 +232,37 @@ export default function AppPage({}) {
             </div>
           </div>
           <div className="p-6">
-            <div>
-              <button
-                onClick={() => {
-                  formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
-                }}
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
-                Set User ID
-              </button>
-            </div>
+            {router.query.userId === "true" ? (
+              <div>
+                <button
+                  onClick={() => {
+                    window.location.href = "/app";
+                  }}
+                  className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                  Deactivate User Identification
+                </button>
+              </div>
+            ) : (
+              <div>
+                <button
+                  onClick={() => {
+                    window.location.href = "/app?userId=true";
+                  }}
+                  className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                  Activate User Identification
+                </button>
+              </div>
+            )}
             <div>
               <p className="text-xs text-slate-700 dark:text-gray-300">
-                This button sets an external{" "}
+                This button activates/deactivates{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/identify-users"
                   target="_blank"
                   className="underline dark:text-blue-500">
-                  user ID
+                  user identification
                 </a>{" "}
-                to &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
+                with the userId &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
               </p>
             </div>
           </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,15 +1,18 @@
-export const meta = {
-  title: "Code Actions",
+export const metadata = {
+  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
 
 # Code Actions
 
-Actions can also be set in the code base. You can fire an action using `formbricks.track()`
+Actions can also be set in the codebase to trigger surveys. Please add the code action first in the Formbricks web interface to be able to configure your surveys to use this action.
 
+After that you can fire an action using `formbricks.track()`
+
+<Col>
 <CodeGroup title="Track an action">
 
 ```javascript
@@ -17,9 +20,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 +34,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",
+export const metadata = {
+  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?",
+export const metadata = {
+  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",
+export const metadata = {
+  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",
+export const metadata = {
+  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",
+export const metadata = {
+  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 metadata = {
+  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

@@ -3,10 +3,10 @@ import Image from "next/image";
 import AddApiKey from "./add-api-key.webp";
 import ApiKeySecret from "./api-key-secret.webp";
 
-export const meta = {
-  title: "API Key Setup",
+export const metadata = {
+  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 metadata = {
+  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 metadata = {
+  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 metadata = {
+  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 metadata = {
+  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 metadata = {
+  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 POST \
+    '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.",
+export const metadata = {
+  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 Payload 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",
+export const metadata = {
+  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",
+export const metadata = {
+  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
@@ -10,24 +10,30 @@ export const meta = {
 
 At Formbricks, we value user privacy. By default, Formbricks doesn't collect or store any personal information from your users. However, we understand that it can be helpful for you to know which user submitted the feedback and also functionality like recontacting users and controlling the waiting period between surveys requires identifying the users. That's why we provide a way for you to share existing user data from your app, so you can view it in our dashboard.
 
-Once the Formbricks widget is loaded on your web app, our SDK exposes methods for identifying user attributes. Let's set it up!
+If you would like to use the User Identification feature of Formbricks, target surveys to specific user segments and see more information about the user who responded to a survey, you can identify users by setting a User ID, email, and custom attributes. This guide will walk you through how to do that.
 
 ## 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).
+To enable the User identification feature you need to set the `userId` in the init() call of Formbricks. Only when the `userId` is set the person will be visible in the Formbricks dashboard. The `userId` can be any string and it's best to use the default identifier you use in your app (e.g. unique id from database or the email address if it's unique) but you can also anonymize these as long as they are unique for every user.
 
+<Col>
 <CodeGroup title="Setting User ID">
 
 ```javascript
-formbricks.setUserId("USER_ID");
+formbricks.init({
+  environmentId: "<environment-id>",
+  apiHost: "<api-host>",
+  userID: "<user_id>",
+});
 ```
 
 </CodeGroup>
-
+</Col>
 ## Setting User Email
 
-You can use the setEmail function to set the user's email:
+The `userId` is the main identifier used in Formbricks and user identification is only enabled when it is set. In addition to the userId you can also set attributes that describes the user better. The email address can be set using the setEmail function:
 
+<Col>
 <CodeGroup title="Setting Email">
 
 ```javascript
@@ -35,23 +41,25 @@ 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
-formbricks.setAttribute("attribute_key", "attribute_value");
+formbricks.setAttribute("Plan", "free");
 ```
 
 </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 +67,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?",
+export const metadata = {
+  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

@@ -10,9 +10,9 @@ import RecontactOptions from "./recontact-options.webp";
 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.",
+export const metadata = {
+  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
@@ -23,7 +23,7 @@ Churn is hard, but can teach you a lot. Whenever a user decides that your produc
 
 ## Purpose
 
-The Churn Survey is among the most effective ways to identify weaknesses in you offering. People were willing to pay but now are not anymore: What changed? Let’s find out!
+The Churn Survey is among the most effective ways to identify weaknesses in your offering. People were willing to pay but now are not anymore: What changed? Let’s find out!
 
 ## Preview
 

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

@@ -10,9 +10,11 @@ import SwitchToDev from "./switch-to-dev.webp";
 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.",
+export const metadata = {
+  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 to 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

@@ -9,9 +9,9 @@ import Publish from "./publish.webp";
 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.",
+export const metadata = {
+  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
@@ -22,7 +22,7 @@ Following up on specific features only makes sense with very targeted surveys. F
 
 ## Purpose
 
-Product analytics never tell you why a feature is used - and why not. Following up on specfic features with highly relevant questions is a great way to gather feedback and improve your product.
+Product analytics never tell you why a feature is used - and why not. Following up on specific features with highly relevant questions is a great way to gather feedback and improve your product.
 
 ## Preview
 

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

@@ -11,9 +11,9 @@ import PublishSurvey from "./publish-survey.webp";
 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.",
+export const metadata = {
+  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

@@ -9,9 +9,9 @@ import Publish from "./publish.webp";
 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.",
+export const metadata = {
+  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

@@ -12,9 +12,9 @@ import Publish from "./publish-survey.webp";
 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.",
+export const metadata = {
+  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
@@ -112,7 +112,7 @@ To create the trigger to show your Interview Prompt, go to the “Audience” ta
   appear in your Actions overview as long as the SDK is embedded.
 </Note>
 
-Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display on a page visit since you already filter who sees the prompt by attributes.
+Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display it on a page visit since you already filter who sees the prompt by attributes.
 
 1. **pageURL:** Whenever a user visits a page the survey will be displayed, as long as the other conditions match. Other conditions are pre-segmentation, if this user has seen a survey in the past 2 weeks, etc.
 
@@ -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

@@ -9,9 +9,9 @@ import Publish from "./publish.webp";
 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).",
+export const metadata = {
+  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/creating-a-service/page.mdx

@@ -0,0 +1,280 @@
+import Image from "next/image";
+import UnstableCache from "./unstable-cache-documentation.webp";
+
+export const metadata = {
+  title: "Formbricks Code Contribution Guide: How to create a service in Formbricks",
+  description:
+    "Services are the core backbone of the Formbricks codebase. This is the complete guide to help you create a service in Formbricks.",
+};
+
+#### Contributing
+
+# How to Create a Service
+
+In this guide, you will learn how to create a new service in Formbricks codebase. To begin let’s define what we mean when we use the word `Service`
+
+<Note>
+A service is an abstraction of database calls related to a specific model in the database which comprises of cached functions that can perform generic database level functionalities.
+
+</Note>
+
+Let’s break down some of the jargon in that definition:
+
+**Abstraction of database calls**
+
+From our guide on [How we Code at Formbricks](https://formbricks.com/docs/contributing/how-we-code), we mention that database calls should not be made directly from components or other places other than a **service**. This means that if you need to make a request to the database to fetch some data, let’s say “get the **surveys** of the current user in the current **environment**”, you would need a function in the surveys service like `getSurveysByEnvironmentId`. It is also worth mentioning that we use [Prisma](https://prisma.io/) as a database abstraction layer to perform database calls.
+
+**Comprises of cached functions**
+
+A service consists of multiple functions that can be easily reused in server actions. The other important part of this is that the output of a function in a service MUST be cached so we don’t have make unnecessary database calls for data that hasn’t changed. We will talk more about caching in services a bit later.
+
+**Generic database level functionalities**
+
+By generic we mean that if in the `survey` service there is a function that only gets a survey and now you want a function to get both survey and all its responses, you should not create another function specifically for that. Instead use the `getSurvey` function and then a `getResponsesBySurveyId` function in the `response` service to get this data. The functions need to be generic so that they can be reused for cases like this where you need to combine multiple cached functions to get what you need.
+
+## Do you need a new service?
+
+Firstly you must note that you almost won’t need to create a new service unless a new model was created. If you think that you need a new service or a new function in an existing service, first double check if you can combine one or two existing functions in an existing service to achieve what you want. If you still think that it doesn’t meet your need, please discuss with Matti first with your specific use-case to get the green light to create a new service or function in a service.
+
+This is critical to us as a project because services are a key part of our project and we want to make them as organised, minimal, easy to change and use as possible. This is important to us as a team to move quickly and still keep a good and maintainable codebase.
+
+## Steps to creating a new service
+
+Below is a break down on how to create a new service, if you ned to implement a function in an existing service you can jump to Step 3:
+
+### Step 1: Create the service folder in `packages/lib`
+
+For the sake of this section, let’s say we just added a new model called `ApiKey`, (note this model already exists)
+
+<Col>
+<CodeGroup title="packages/database/schema.prisma">
+
+```sql
+model ApiKey {
+  id            String      @id @unique @default(cuid())
+  createdAt     DateTime    @default(now())
+  lastUsedAt    DateTime?
+  label         String?
+  hashedKey     String      @unique()
+  environment   Environment @relation(fields: [environmentId], references: [id], onDelete: Cascade)
+  environmentId String
+}
+```
+
+</CodeGroup>
+</Col>
+
+**Step 1a**: The first thing you need to do is go to `packages/lib` and create a new folder called `apiKey`, note that this is the camel cased version of the Model name.
+
+**Step 1b**: We need to create the types for our service once we have the model. To do that you go to `packages/types` and create a file called `apiKey.ts`.
+
+In the type file, we must first create a Zod type that matches the Prisma model called`ZApiKey` (note here that it MUST begin with `Z` (indicating a Zod type) then the service name in pascal case). Next from this Zod type, we create a derived Typescript type called `TApiKey` (this MUST begin with a `T` and then the service name in pascal case).
+
+The reason we need both of them is because the Zod type is used for validating arguments passed into a service and we use the Typescript type to specify what data type a service function returns.
+
+### Step 2: Create `service.ts` and `cache.ts` in the service folder.
+
+The 2 required files are `service.ts` and `cache.ts`, note they are in singular form.
+
+`service.ts` - Where all the reusable cached functions are placed.
+
+`cache.ts` - Where the caching functionality for that service is abstracted to.
+
+### Step 3: Writing your functions in `service.ts` .
+
+A function in a service must have the following requirements:
+
+1. Follow the same naming pattern as we have in other services
+   - If using Prisma’s `findUnique` then the name should be `get` + `ServiceName` (in singular), e.g `getApiKey`
+   - If using Prisma’s `findMany` then the name should be `get` + `ServiceName` (in plural), e.g `getApiKeys`
+   - If your function's primary purpose is to retrieve or manipulate data based on a specific attribute or property of a resource, use "`by`" followed by the attribute name. For example:
+     - **`getMembersByTeamId`**: This function retrieves members filtered by the team's ID.
+     - **`getMembershipByUserIdTeamId`**: It retrieves a membership by the user's and team's IDs.
+   - If using Prisma’s `create` then `createApiKey`
+   - If using Prisma’s `update` then `updateApiKey`
+   - if using Prisma’s `delete` then `deleteApiKey`
+2. All its arguments must be properly typed.
+3. It should have a return type.
+4. The arguments should be validated using `validateInputs` (reference the code to see how it is used)
+5. Every function must return the standardised data types (`TApiKey`), including create or delete functions.
+6. Handle errors in the function and return specific error types for DatabaseErrors.
+
+<Note>
+  A standardised data type is the derived Typescript type in this case `TApiKey` that matches the model of the
+  service.
+</Note>
+
+Here is an example of a function that gets an api key by id:
+
+<Col>
+<CodeGroup title="packages/lib/apiKey/service.ts">
+
+```ts
+export const getApiKey = async (apiKeyId: string): Promise<TApiKey> => {
+  validateInputs([apiKeyId, ZString]);
+
+  try {
+    const apiKeyData = await prisma.apiKey.findUnique({
+      where: {
+        id: apiKeyId,
+      },
+    });
+
+    if (!apiKeyData) {
+      throw new ResourceNotFoundError("API Key from ID", apiKeyId);
+    }
+
+    return apiKeyData;
+  } catch (error) {
+    if (error instanceof Prisma.PrismaClientKnownRequestError) {
+      throw new DatabaseError(error.message);
+    }
+
+    throw error;
+  }
+};
+```
+
+</CodeGroup>
+</Col>
+
+### Step 4: Implementing caching for your function
+
+**Step 4a**: Firstly in the cache.ts file, you need to follow this structure:
+
+<Col>
+<CodeGroup title="packages/lib/apiKey/cache.ts">
+
+```ts
+import { revalidateTag } from "next/cache";
+
+interface RevalidateProps {
+  id?: string;
+  environmentId?: string;
+}
+
+export const apiKeyCache = {
+  tag: {
+    // Tags can be different depending on your use case
+    byId(id: string) {
+      return `apiKeys-${id}`;
+    },
+    byEnvironmentId(environmentId: string) {
+      return `environments-${environmentId}-apiKeys`;
+    },
+  },
+  revalidate({ id, environmentId }: RevalidateProps): void {
+    if (id) {
+      revalidateTag(this.tag.byId(id));
+    }
+
+    if (environmentId) {
+      revalidateTag(this.tag.byEnvironmentId(environmentId));
+    }
+  },
+};
+```
+
+</CodeGroup>
+</Col>
+
+_Breakdown of the above code._
+
+1. **apiKeyCache**: The name of this object is `serviceName` + `Cache`, which is why this is called `apiKeyCache` .
+2. **tag**: This object is where all the tags for the service cache will be stored. Read below for the definition of a tag
+3. **byId**: This is the required tag, since every service must query by Id at some point, `byId` is a must have in each tag. It is used to revalidate the cache of a single item, e.g. `getApiKey(id)`. If there is a good reason not to query by id, you can avoid creating this tag. The returned string of this function needs to begin with the service name in plural then a dash and the id (which must be passed in).
+4. **byEnvironmentId**: It is used to revalidate the cache of a list of items of the same parent, e.g. `getApiKeys(environmentId)`. For parent dependencies used to query this service, you should add the plural of the name in this case `environments` plus the id of the parent dependency plus the name of the service you are working with in plural, in this case `apiKeys` which results to `environments-${environmentId}-apiKeys`.
+5. **revalidate**: This function receives an object with optional keys. Depending on the key that is passed in, we optionally call the `revalidateTag` from `next/cache` on the appropriate tag. Note each key passed into this function has to match a `tag`.
+
+<Note>
+  A tag is a label or metadata identifier attached to a piece of data, content, or an object to categorize,
+  classify, or organize it for easier retrieval, grouping, or management. In the context of revalidation, tags
+  are used to associate groups of cached data with specific events or triggers. When an event occurs, such as
+  a form submission or content update, the tags are used to identify and revalidate all the cached data items
+  associated with that tag. This ensures that the latest and most up-to-date data is retrieved and displayed
+  in response to the event, contributing to the effective management and real-time updating of cached content.
+</Note>
+
+<Note>
+  We have a [script](https://gist.github.com/rotimi-best/7bd7e4ebda09a68ff0a1dc8ae6fa0009) that can help you
+  auto-generate the `cache.ts` file with the basic structure.
+</Note>
+
+**Step 4b:** Now that you have the `cache.ts`, it is time to actually use the tags and revalidate method in your `service.ts`.
+
+We will rewrite the function `getApiKey` we created in the `service.ts` file to support caching:
+
+<Col>
+<CodeGroup title="packages/lib/apiKey/service.ts">
+
+```ts
+import { unstable_cache } from "next/cache";
+import { SERVICES_REVALIDATION_INTERVAL } from "../constants";
+import { apiKeyCache } from "./cache";
+
+export const getApiKey = async (apiKeyId: string): Promise<TApiKey> =>
+  unstable_cache(
+    async () => {
+      validateInputs([apiKeyId, ZString]);
+
+      try {
+        const apiKeyData = await prisma.apiKey.findUnique({
+          where: {
+            id: apiKeyId,
+          },
+        });
+
+        if (!apiKeyData) {
+          throw new ResourceNotFoundError("API Key from ID", apiKeyId);
+        }
+
+        return apiKeyData;
+      } catch (error) {
+        if (error instanceof Prisma.PrismaClientKnownRequestError) {
+          throw new DatabaseError(error.message);
+        }
+
+        throw error;
+      }
+    },
+    [`getApiKey-${apiKeyId}`],
+    {
+      tags: [apiKeyCache.tag.byId(apiKeyId)],
+      revalidate: SERVICES_REVALIDATION_INTERVAL,
+    }
+  )();
+```
+
+</CodeGroup>
+</Col>
+
+_Breakdown of the above code._
+
+In the above code we only introduce something new called `unstable_cache`, read more about it [here](https://nextjs.org/docs/app/api-reference/functions/unstable_cache#parameters). In a nutshell these are its parameters:
+
+<Image
+  src={UnstableCache}
+  alt="Unstable Cache Parameters"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+From the screenshot above we see that `unstable_cache` receives 3 arguments:
+
+1. `fetchData`: In our case this is the exact function of your service without caching (step 3)
+2. `keyParts`: As a rule of thumb, the key must consist of the name of the function and the arguments passed into the function, all separated by a dash. In our case it is called `getApiKey-${apiKeyId}` because the function name is `getApiKey` and we receive only one argument called `apiKeyId`
+3. `options`: which consists of **tags** and **revalidate**
+   1. `tags`: This is where the tags you created in step 4a comes in, tags are created solely based on the arguments passed to the function. (please reference existing services in `packages/lib` to see more variations of this when dealing with more than one argument)
+   2. `revalidate`: We have a global constant for this which you can use called `SERVICES_REVALIDATION_INTERVAL`
+
+<Note>
+In create, update and delete requests, you don’t need caching however these are the places where the revalidate method is called. For example when the apiKey is deleted we want to call the revalidate method and pass in the id and environmentId, so we invalidate every cached function with `id` and `environmentId` tags.
+`apiKeyCache.revalidate({ id: [apiKey.id](http://apikey.id/), environmentId: apiKey.environmentId });`
+
+</Note>
+
+### Step 5: Check if you need to add these 2 optional files (`auth.ts` and `util.ts`)
+
+`auth.ts` - Is for verifying if the user is authorised to access the service. Typically it has only one function with this naming `canUserAccessApiKey`. Please note that ApiKey at the end of the name is specific to the service name.
+
+`util.ts` - This file holds any helper function that is used in that specific service. For example one common use case for this files is for converting Date fields from string to Date. The reason for this is that when we cache a function using `unstable_cache`, [it does not support deserialisation of dates](https://github.com/vercel/next.js/issues/51613). We therefore need to manually deserialise date fields by writing a function that receives the data of a service and we check for its date fields that are in strings and we convert them into Date.

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

@@ -2,9 +2,10 @@ 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.",
+export const metadata = {
+  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
@@ -13,7 +14,7 @@ export const meta = {
 
 To play around with the in-app [User Actions](/docs/actions/why), you can use the Demo App. It's a simple React app that you can run locally and use to trigger actions and set [Attributes](/docs/attributes/why).
 
-<Image src={DemoApp} alt="Demo App Preview" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+<Image src={DemoApp} alt="Demo App Preview" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 ## Functionality
 
@@ -21,6 +22,7 @@ To play around with the in-app [User Actions](/docs/actions/why), you can use th
 
 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 +30,12 @@ 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 +43,12 @@ 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 +56,12 @@ 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 +69,12 @@ 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,15 +82,17 @@ 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'
+This button sets an external <a href="/docs/attributes/identify-users">user ID</a> in the Formbricks init call to 'THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING'
 
+<Col>
 <CodeGroup title="Set User ID">
 
 ```tsx
-formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
+userId: "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 metadata = {
+  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. Wait for the web and demo apps to launch on Gitpod. This automatically opens the `apps/demo/.env` file. Utilize dynamic localhost URLs (e.g., `localhost:3000` for signup and `localhost:8025` for email confirmation) to configure `NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID`. After creating your account and finding the `ID` in the URL at `localhost:3000`, replace `YOUR_ENVIRONMENT_ID` in the `.env` file located in `app/demo`. 
+
+    **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 workspace 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 workspace 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 metadata = {
+  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`
+
+## 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",
+export const metadata = {
+  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,7 @@
-export const meta = {
-  title: "Setup Dev Environment",
-  description: "Setup a development environment for Formbricks.",
+export const metadata = {
+  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
@@ -15,6 +16,7 @@ To get the project running locally on your machine you need to have the followin
 
 1. Clone the project:
 
+<Col>
    <CodeGroup title="Git clone Formbricks monorepo">
 
    ```bash
@@ -22,9 +24,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 +34,11 @@ 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 +46,11 @@ 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 +58,23 @@ 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 -hex 32
+   ```
+
+   </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 +82,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,
@@ -70,12 +90,15 @@ To get the project running locally on your machine you need to have the followin
 
    **You can now access the Formbricks app on [http://localhost:3000](http://localhost:3000)**. You will be automatically redirected to the login. To use your local installation of formbricks, create a new account.
 
+   <Note>A fresh setup does not have a default account. Please create a new account and proceed accordingly.</Note>
+
    For viewing the confirmation email and other emails the system sends you, you can access mailhog at [http://localhost:8025](http://localhost:8025)
 
 ### 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 +106,12 @@ 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 +119,14 @@ 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 +134,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

@@ -4,17 +4,17 @@ import ClearAppData from "./clear-app-data.webp";
 import UncaughtPromise from "./uncaught-promise.webp";
 import Logout from "./logout.webp";
 
-export const meta = {
-  title: "Troubleshooting",
+export const metadata = {
+  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 metadata = {
+  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,13 +6,14 @@ 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
 
-One can integrate Formbricks into their app using multipe options! Checkout the options below that we provide! If you are looking
+One can integrate Formbricks into their app using multiple options! Checkout the options below that we provide! If you are looking
 for something else, please [join our Discord!](https://formbricks.com/discord) and we would be glad to help. {{ className: 'lead' }}
 
 <Libraries />
@@ -23,14 +24,14 @@ for something else, please [join our Discord!](https://formbricks.com/discord) a
 
 Before getting started, make sure you have:
 
-1. A web application in your desired framework set up and running.
+1. A web application in your desired framework is set up and running.
 2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings:
 
 <Image
   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.2.0/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>
@@ -62,7 +64,7 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
   </Property>
 </Properties>
 
-Refer our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer to our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ---
 
@@ -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,10 +132,10 @@ 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!
+Refer to our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ---
 
@@ -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!
+Refer to our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
 
 ### Pages Directory
 
+<Col>
 <CodeGroup title="src/pages/_app.tsx">
 
 ```tsx {{ title: 'Typescript' }}
@@ -245,8 +251,8 @@ export default function App({ Component, pageProps }: AppProps) {
 ```
 
 </CodeGroup>
-
-Refer our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
+</Col>
+Refer to our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
 
 ### Required Customizations to be Made
 
@@ -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>
@@ -357,7 +364,7 @@ router.afterEach((to, from) => {
   </Property>
 </Properties>
 
-Refer our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer to our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ## Validate your setup
 
@@ -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

@@ -8,14 +8,12 @@ import I5 from "./5-options-survey-popup-in-app-for-feedback.webp";
 import I6 from "./6-setup-in-app-survey-popup-feedback-box.webp";
 import I7 from "./7-in-app-survey-popup-for-feedback.webp";
 import I8 from "./8-pop-up-form-in-web-app-survey.webp";
-import I9 from "./9-set-up-in-app-micro-survey-popup.webp";
-import I10 from "./10-micro-survey-pop-up-in-app.webp";
-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.",
+export const metadata = {
+  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
@@ -32,7 +30,7 @@ While you can [self-host](/docs/self-hosting/deployment) Formbricks, the quickes
   src={I1}
   alt="Choose in app survey template"
   quality="100"
-  className="max-w-full sm:max-w-3xl rounded-lg "
+  className="max-w-full rounded-lg sm:max-w-3xl "
 />
 
 ## Create your first survey
@@ -43,7 +41,7 @@ To be able to see a survey in your app, you need to create one. We’ll choose o
   src={I2}
   alt="Settings for popup survey inside web app"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 As you can see in the orange note here, we have not yet connected Formbricks Cloud with our app. We will do so in just a minute, let’s first setup the survey correctly.
@@ -54,7 +52,7 @@ Select “Web App” in the How to ask settings:
   src={I3}
   alt="Survey settings for popup micro surve"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 Scroll down to Survey Trigger and choose “New Session”. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
@@ -63,7 +61,7 @@ Scroll down to Survey Trigger and choose “New Session”. This will cause this
   src={I4}
   alt="In app survey trigger for feedback popup micro survey"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 In **Recontact Options** we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once to each user to prevent survey fatigue:
@@ -72,7 +70,7 @@ In **Recontact Options** we choose the following settings, so that we can play a
   src={I5}
   alt="Options for survey popup in app micro survey"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey. On the Summary Page click through to the Setup Checklist:
@@ -81,7 +79,7 @@ Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where
   src={I6}
   alt="pop up survey settings for inapp web survey"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 ## Set up the Formbricks Widget in your app
@@ -92,7 +90,7 @@ On the Setup Checklist you have two elements. At the top you find the Widget Sta
   src={I7}
   alt="feedback popup in app survey"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 In the manual below, this code snippet contains all the information you need:
@@ -104,9 +102,11 @@ In the manual below, this code snippet contains all the information you need:
   src={I8}
   alt="settings for in app survey popping up"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
+If you like to use the user identification feature, please follow the [user identification guide](/docs/attributes/identify-users).
+
 ## Load Formbricks widget in your app
 
 In a local instance of your app, you'll embed the Formbricks Widget. Dependent on your frontend tech, the setup differs a bit:
@@ -124,60 +124,5 @@ Now, restart your app in your terminal to make sure the widget is loaded. Once i
   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"
 />
-
-## Most frequent errors and how to debug them
-
-In case you don’t see your survey right away, here's what you can do. Go through these in orderly to find the error fast:
-
-### Formbricks Cloud and your app are not connected properly.
-
-Go back to [app.formbricks.com](http://app.formbricks.com) and go to the Setup Checklist in the Settings. If the status is still indicated as “Not connected” your app hasn't yet pinged the Formbricks Cloud:
-
-<Image
-  src={I9}
-  alt="setup checklist ui of survey popup for in app surveys"
-  quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
-/>
-**How to fix it:**
-
-1. Check if your app loads the Formbricks widget correctly. Make sure you have `debug` mode enabled in your integration and you should see the Formbricks debug logs in your browser console while being in your app (right click in the browser, `Inspect`, switch to the console tab). If you don’t see them, double check your integration or if you are unable to solve this issue, please [join our Discord](https://formbricks.com/discord) and we’ll help you out.
-
----
-
-### Survey not loaded
-
-If your app is connected with Formbricks Cloud, the survey might have not been loaded properly. Check the debug logs and search for the list of surveys loaded. It should look like so:
-
-<Image
-  src={I11}
-  alt="survey logs for in app survey pop up micro"
-  quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
-/>
-
-**How to fix it:**
-
-The widget only loads surveys which are **public** and **in progress**. Go to Formbricks Cloud and to the Survey Summary page. Check if your survey is live:
-
-<Image
-  src={I10}
-  alt="ui of survey popup for in app micro surveys"
-  quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
-/>
-
----
-
-### Survey not triggered
-
-If the survey is loaded by the widget it might not have been triggered properly.
-
-**How to fix:**
-
-1. Open your local app in an incognito tab or window. The New Session event is only fired if a user was inactive for 60 minutes or was logged out of Formbricks via formrbicks.logout().
-2. Check the debug logs for “Event ‘New Session” tracked”. If you see it in the logs and the survey still did not get displayed, [please let us know.](mailto:support@formbricks.com)
-
-That should fix it! If not, please [join our Discord](https://formbricks.com/discord)! We’re more than happy to help you get started 😊

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

@@ -0,0 +1,96 @@
+import Image from "next/image";
+
+import I1 from "./1-set-up-in-app-micro-survey-popup.webp";
+import I2 from "./2-micro-survey-pop-up-in-app.webp";
+import I3 from "./3-survey-logs-in-app-survey-popup.webp";
+
+export const metadata = {
+  title: "Formbricks Troubleshooting Guide",
+  description:
+    "Troubleshoot your Formbricks integration and get your in-app surveys up and running in no time. Most frequent errors and how to debug them.",
+};
+
+#### Getting Started
+
+# Troubleshooting Guide
+
+In case you don’t see your survey right away, here's what you can do. Go through these to find the error fast:
+
+## Formbricks Cloud and your app are not connected properly.
+
+Go back to [app.formbricks.com](http://app.formbricks.com) or your self-hosted instance's URL and go to the Setup Checklist in the Settings. If the status is still indicated as “Not connected” your app hasn't yet pinged the Formbricks Cloud:
+
+<Image
+  src={I1}
+  alt="setup checklist ui of survey popup for in app surveys"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+**How to fix it:**
+
+1. Check if your app loads the Formbricks widget correctly.
+2. Make sure you have `debug` mode enabled in your integration and you should see the Formbricks debug logs in your browser console while being in your app (right click in the browser, `Inspect`, switch to the console tab). If you don’t see them, double check your integration.
+
+---
+
+## Survey not loaded
+
+If your app is connected with Formbricks Cloud, the survey might have not been loaded properly. Check the debug logs and search for the list of surveys loaded. It should look like so:
+
+<Image
+  src={I3}
+  alt="survey logs for in app survey pop up micro"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+**How to fix it:**
+
+The widget only loads surveys which are **public** and **in progress**. Go to Formbricks Cloud and to the Survey Summary page. Check if your survey is live:
+
+<Image
+  src={I2}
+  alt="ui of survey popup for in app micro surveys"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+---
+
+## Survey not triggered
+
+If the survey is loaded by the widget it might not have been triggered properly.
+
+**How to fix:**
+
+1. Open your local app in an incognito tab or window. The New Session event is only fired if a user was inactive for 60 minutes or was logged out of Formbricks via formrbicks.logout().
+2. Check the debug logs for “Event ‘New Session” tracked”. If you see it in the logs and the survey still did not get displayed, [please let us know.](mailto:support@formbricks.com)
+
+---
+
+## Survey not displayed in HTML page
+
+If the survey is loaded by the widget in the HTML page, try the below steps:
+
+**How to fix:**
+
+1. Make sure you have added the [script](/docs/getting-started/framework-guides#html) in the head of the HTML page.
+2. Verify that you have set the \<environment-id\> and \<host\> as per your Formbricks instance.
+3. Verify that you have the latest version of the JS Package.
+4. Check the debug logs to see if you still see any errors.
+
+---
+
+## Cannot read undefined of .init()
+
+If you see this error in the console, it means that the Formbricks JS package is not loaded properly.
+
+**How to fix:**
+
+1. Update to the latest version of the JS Package.
+2. Verify this wherever you call initialise the Formbricks instance in your code.
+3. It should now start working.
+
+---
+
+If you are still facing issues, please [Open an Issue on GitHub](https://github.com/formbricks/formbricks/issues) or [join our Discord](https://formbricks.com/discord)! We’re more than happy to help you get started 😊

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

@@ -0,0 +1,189 @@
+import { Fence } from "@/components/shared/Fence";
+import { Callout } from "@/components/shared/Callout";
+import IntegrationTab from "./integrations-tab.webp";
+import ConnectWithAirtable from "./connect-with-airtable.webp";
+import AirtableConnected from "./airtable-connected.webp";
+import LinkSurveyWithTable from "./link-survey-with-table.webp";
+import LinkWithQuestions from "./link-with-questions.webp";
+import ListLinkedSurveys from "./list-linked-surveys.webp";
+import OpenDeveloperHub from "./open-developer-hub.webp";
+import CreateNewIntegration from "./create-new-integration.webp";
+import RegisterNewIntegration from "./register-new-integration.webp";
+import SelectScopes from "./select-scopes.webp";
+import DeleteIntegration from "./deleteIntegration.webp";
+import Image from "next/image";
+
+export const metadata = {
+  title: "Airtable Setup",
+  description: "Instantly populate your airtable table with survey data",
+};
+
+#### Integrations
+
+# Airtable
+
+The Airtable integration allows you to automatically send responses to an Airtable 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 Airtable 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 Airtable" button to authenticate yourself with Airtable.
+
+<Image
+  src={ConnectWithAirtable}
+  alt="Connect Formbricks with Airtable"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. You will now be taken to a page where you need to add and grant access to the base you want to use for the integration.
+
+<Image
+  src={ConnectWithAirtable}
+  alt="Add and grant access to airtable base"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+4. Once you add and grant access to your base, you will be taken back to Formbricks Cloud and see the connected status as below:
+
+<Image
+  src={AirtableConnected}
+  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 Airtable base with atleast one table in the Airtable account you integrated.
+
+</Note>
+
+6. Now click on the "Link New Table" button to link a new Airtable with Formbricks and a modal will open up.
+
+<Image
+  src={LinkSurveyWithTable}
+  alt="Link Formbricks with a Airtable"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+7. Select the Base and table 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 Airtable. Select the questions and click on the "Save" button.
+
+<Image
+  src={LinkWithQuestions}
+  alt="Select question to link with Airtable"
+  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 table in the list of linked tables.
+
+<Image
+  src={ListLinkedSurveys}
+  alt="List of linked tables"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Congratulations! You have successfully linked an Airtable with Formbricks. Now whenever a response is submitted for the linked Survey, it will be automatically added to the linked Airtable.
+
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!
+
+## Setup in self-hosted Formbricks
+
+Enabling the Airtable Integration in a self-hosted environment requires creating an airtable account and changing the environment variables of your Formbricks instance.
+
+1. Go to the [Airtable](https://airtable.com) and create a new account if you dont already have one.
+
+2. Click on user icon on top left and open to Developer hub
+
+<Image
+  src={OpenDeveloperHub}
+  alt="List of linked tables"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. Navigate to OAuth integrations and click on **Register an OAuth integrations**
+
+<Image
+  src={CreateNewIntegration}
+  alt="List of linked tables"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. Select a name for you integration and also add a redirect URL which will be YOUR_WEBAPP_URL/api/v1/integrations/airtable/callback
+
+   <Image
+     src={RegisterNewIntegration}
+     alt="List of linked tables"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />
+
+4. Now fill some basic details about your integrations and then go to scope section. You need to enable 5 scopes
+
+   - data.records:read
+   - data.records:write
+   - schema.bases:read
+   - schema.bases:write
+   - user.email:read
+
+{" "}
+
+<Image
+  src={SelectScopes}
+  alt="List of linked tables"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+5. Click on the "Save" button and you are done
+6. Now just copy client id and redirect url for your integration and add it to formbricks .env file
+
+### By now, your environment variables should include the below ones:
+
+- `AIRTABLE_CLIENT_ID`
+- `AIRTABLE_REDIRECT_URL`
+
+Voila! You have successfully enabled the Airtable integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Formbricks Cloud](#formbricks-cloud) section to link an Airtable with Formbricks.
+
+## Remove Integration with Airtable
+
+To remove the integration with Airtable,
+
+1. Visit the Integrations tab in your Formbricks Cloud dashboard.
+2. Select "Manage" button in the Airtable card.
+3. Click on the "Connected with `<your-email-here`>" just before the "Link new Table" 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 Airtable Account.
+
+<Image
+  src={DeleteIntegration}
+  alt="Delete Airtable Integration with Formbricks"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<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/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 metadata = {
+  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!