fix shuffle in ranking question

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

.changeset/config.json

@@ -1,11 +1,11 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
-  "access": "public",
-  "baseBranch": "main",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [],
-  "ignore": ["@formbricks/demo", "@formbricks/web"],
   "linked": [],
-  "updateInternalDependencies": "patch"
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": ["@formbricks/formbricks-com", "@formbricks/demo", "@formbricks/web"]
 }

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=20
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>"
+
+RUN su node -c "npm install -g pnpm"

.devcontainer/devcontainer.json

@@ -1,6 +1,29 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node-postgres
+// Update the VARIANT arg in docker-compose.yml to pick a Node.js version
 {
-  "features": {},
-  "image": "mcr.microsoft.com/devcontainers/universal:2",
-  "postAttachCommand": "pnpm go",
-  "postCreateCommand": "cp .env.example .env && sed -i '/^ENCRYPTION_KEY=/c\\ENCRYPTION_KEY='$(openssl rand -hex 32) .env && sed -i '/^NEXTAUTH_SECRET=/c\\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env && sed -i '/^CRON_SECRET=/c\\CRON_SECRET='$(openssl rand -hex 32) .env && pnpm install && pnpm db:migrate:dev"
+  "name": "Node.js & PostgreSQL",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "app",
+  "workspaceFolder": "/workspace",
+
+  // Configure tool-specific properties.
+  "customizations": {
+    // Configure properties specific to VS Code.
+    "vscode": {
+      // Add the IDs of extensions you want installed when the container is created.
+      "extensions": ["dbaeumer.vscode-eslint"]
+    }
+  },
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // This can be used to network with other containers or with the host.
+  "forwardPorts": [3000, 5432, 8025],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "cp .env.example .env && sed -i '/^ENCRYPTION_KEY=/c\\ENCRYPTION_KEY='$(openssl rand -hex 32) .env && sed -i '/^NEXTAUTH_SECRET=/c\\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env && pnpm install && pnpm db:migrate:dev",
+  "postAttachCommand": "pnpm dev --filter=@formbricks/web... --filter=@formbricks/demo...",
+
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node"
 }

.devcontainer/docker-compose.yml

@@ -0,0 +1,52 @@
+version: '3.8'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        # Update 'VARIANT' to pick an LTS version of Node.js: 20, 18, 16, 14.
+        # Append -bullseye or -buster to pin to an OS version.
+        # Use -bullseye variants on local arm64/Apple Silicon.
+        VARIANT: "20"
+
+    volumes:
+      - ..:/workspace:cached
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+    # Uncomment the next line to use a non-root user for all processes.
+    # user: node
+
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally. 
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+  db:
+    image: postgres:latest
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_USER: postgres
+      POSTGRES_DB: formbricks
+    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+  mailhog:
+    image: mailhog/mailhog
+    network_mode: service:app
+    logging:
+      driver: "none" # disable saving logs
+        #    ports:
+      #    - 8025:8025 # web ui
+      # 1025:1025 # smtp server
+
+
+
+volumes:
+  postgres-data: null

.env.example

@@ -157,7 +157,7 @@ ENTERPRISE_LICENSE_KEY=
 # Insert an existing organization id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
 # (Role Management is an Enterprise feature)
 # DEFAULT_ORGANIZATION_ID=
-# DEFAULT_ORGANIZATION_ROLE=owner
+# DEFAULT_ORGANIZATION_ROLE=admin
 
 # Send new users to customer.io
 # CUSTOMER_IO_API_KEY=
@@ -180,12 +180,3 @@ UNSPLASH_ACCESS_KEY=
 
 # Disable custom cache handler if necessary (e.g. if deployed on Vercel)
 # CUSTOM_CACHE_DISABLED=1
-
-# Azure AI settings
-# AI_AZURE_RESSOURCE_NAME=
-# AI_AZURE_API_KEY=
-# AI_AZURE_EMBEDDINGS_DEPLOYMENT_ID=
-# AI_AZURE_LLM_DEPLOYMENT_ID=
-
-# NEXT_PUBLIC_INTERCOM_APP_ID=
-# INTERCOM_SECRET_KEY=

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,31 +1,81 @@
 name: Bug report
 description: "Found a bug? Please fill out the sections below. \U0001F44D"
-type: bug
+title: "[BUG]"
+labels: bug
+assignees: []
 body:
-  - type: textarea
-    id: issue-summary
-    attributes:
-      label: Issue Summary
-      description: A summary of the issue. This needs to be a clear detailed-rich summary.
-    validations:
-      required: true
-  - type: textarea
-    id: issue-expected-behavior
-    attributes:
-      label: Expected Behavior
-      description: A clear and concise description of what you expected to happen.
-    validations:
-      required: false
-  - type: textarea
-    id: other-information
-    attributes:
-      label: Other information (incl. screenshots, Formbricks version, steps to reproduce,...)
-    validations:
-      required: false
-  - type: dropdown
-    id: environment
-    attributes:
-      label: Your Environment
-      options:
-        - Formbricks Cloud (app.formbricks.com)
-        - Self-hosted Formbricks
+- type: textarea
+  id: issue-summary
+  attributes:
+    label: Issue Summary
+    description: A summary of the issue. This needs to be a clear detailed-rich summary.
+  validations:
+    required: true
+- type: textarea
+  id: steps-to-reproduce
+  attributes:
+    label: Steps to Reproduce
+    value: |
+      1. (for example) Went to ...
+      2. Clicked on...
+      3. ...
+  validations:
+    required: true
+- type: textarea
+  id: expected-behavior
+  attributes:
+    label: Expected behavior
+    description: A clear and concise description of what you expected to happen.
+  validations:
+    required: true
+- type: textarea
+  id: other-information
+  attributes:
+    label: Other information
+  validations:
+    required: false
+- type: textarea
+  id: screenshots
+  attributes:
+    label: Screenshots
+    description: If applicable, add screenshots to help explain your problem.
+  validations:
+    required: false
+- type: checkboxes
+  id: environment
+  attributes:
+    label: Environment
+    options:
+      - label: Formbricks Cloud (app.formbricks.com)
+      - label: Self-hosted Formbricks
+- type: textarea
+  id: desktop-version
+  attributes:
+    label: Desktop (please complete the following information)
+    description: | 
+      examples: 
+      - **OS**: [e.g. iOS]
+      - **Browser**: [e.g. chrome, safari]
+      - **Version**: [e.g. 22]
+    value: |
+      - OS:
+      - Node:
+      - npm: 
+    render: markdown
+  validations:
+    required: true
+- type: markdown
+  id: nodejs-version
+  attributes:
+    value: | 
+      #### Node.JS version
+      
+      [e.g. v18.15.0] 
+- type: markdown
+  id: anything-else
+  attributes:
+    value: |
+      #### Anything else?
+      
+      - Screen recording, console logs, network requests: You can make a recording with [Loom](https://www.loom.com).
+      - Anything else that you think could be an issue?

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
   - name: Questions
-    url: https://github.com/formbricks/formbricks/discussions
-    about: Need help selfhosting or ask a general question about the project? Open a discussion
+    url: https://formbricks.com/discord
+    about: Ask a general question about the project on our Discord server

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,6 +1,8 @@
 name: Feature request
 description: "Suggest an idea for this project \U0001F680"
-type: feature
+title: "[FEATURE]"
+labels: enhancement
+assignees: []
 body:
   - type: textarea
     id: problem-description
@@ -16,6 +18,13 @@ body:
       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:
@@ -24,9 +33,15 @@ body:
     validations:
       required: false
   - type: markdown
+    id: formbricks-info
     attributes:
       value: |
-        ### Additional resources 🤓
+        ### How we code at Formbricks 🤓
 
-        - Check out our [Contributor Docs](https://formbricks.com/docs/developer-docs/contributing/get-started)
-        - Anything unclear? [Ask in Github Discussions](https://github.com/formbricks/formbricks/discussions)
+        - 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.
+        - Anything unclear? [Ask in Discord](https://formbricks.com/discord)

.github/ISSUE_TEMPLATE/oss-gg-hack-submission.yml

@@ -0,0 +1,33 @@
+name: oss.gg hack submission 🕹️
+description: "Submit your contribution for the for the oss.gg hackathon"
+title: "[🕹️]"
+labels: 🕹️ oss.gg, player submission, hacktoberfest
+assignees: []
+body:
+  - type: textarea
+    id: contribution-name
+    attributes:
+      label: What side quest or challenge are you solving?
+      description: Add the name of the side quest or challenge.
+    validations:
+      required: true
+  - type: textarea
+    id: points
+    attributes:
+      label: Points
+      description: How many points are assigned to this contribution?
+    validations:
+      required: true
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: What's the task your performed?
+    validations:
+  - type: textarea
+    id: proof
+    attributes:
+      label: Provide proof that you've completed the task
+      description: Screenshots, loom recordings, links to the content you shared or interacted with.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/task.yml

@@ -1,11 +0,0 @@
-name: Task (internal)
-description: "Template for creating a task. Used by the Formbricks Team only \U0001f4e5"
-type: task
-body:
-  - type: textarea
-    id: task-summary
-    attributes:
-      label: Task description
-      description: A clear detailed-rich description of the task.
-    validations:
-      required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,7 +4,7 @@
 
 <!-- Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 
-Fixes #(issue)
+Fixes # (issue)
 
 <!-- Please provide a screenshots or a loom video for visual changes to speed up reviews
  Loom Video: https://www.loom.com/

.github/workflows/build-docs.yml

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

.github/workflows/build-web.yml

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

.github/workflows/codeql.yml

@@ -1,92 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL Advanced"
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
-  schedule:
-    - cron: '17 1 * * 1'
-
-jobs:
-  analyze:
-    name: Analyze (${{ matrix.language }})
-    # Runner size impacts CodeQL analysis time. To learn more, please see:
-    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
-    #   - https://gh.io/supported-runners-and-hardware-resources
-    #   - https://gh.io/using-larger-runners (GitHub.com only)
-    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
-    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
-    permissions:
-      # required for all workflows
-      security-events: write
-
-      # required to fetch internal or private CodeQL packs
-      packages: read
-
-      # only required for workflows in private repositories
-      actions: read
-      contents: read
-
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-        - language: javascript-typescript
-          build-mode: none
-        # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
-        # Use `c-cpp` to analyze code written in C, C++ or both
-        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
-        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
-        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
-        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
-        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
-        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        build-mode: ${{ matrix.build-mode }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
-
-    # If the analyze step fails for one of the languages you are analyzing with
-    # "We were unable to automatically build your code", modify the matrix above
-    # to set the build mode to "manual" for that language. Then modify this step
-    # to build your code.
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-    - if: matrix.build-mode == 'manual'
-      shell: bash
-      run: |
-        echo 'If you are using a "manual" build mode for one or more of the' \
-          'languages you are analyzing, replace this with the commands to build' \
-          'your code, for example:'
-        echo '  make bootstrap'
-        echo '  make release'
-        exit 1
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
-      with:
-        category: "/language:${{matrix.language}}"

.github/workflows/cron-surveyStatusUpdate.yml

@@ -4,9 +4,9 @@ on:
   workflow_dispatch:
   # "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:
-    # Runs "At 00:00." (see https://crontab.guru)
-    - cron: "0 0 * * *"
+  # schedule:
+  # Runs “At 00:00.” (see https://crontab.guru)
+  # - cron: "0 0 * * *"
 jobs:
   cron-weeklySummary:
     env:

.github/workflows/e2e.yml

@@ -11,7 +11,7 @@ jobs:
     timeout-minutes: 60
     services:
       postgres:
-        image: pgvector/pgvector:pg17
+        image: postgres:latest
         env:
           POSTGRES_DB: postgres
           POSTGRES_USER: postgres
@@ -50,7 +50,6 @@ jobs:
           sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
           sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${RANDOM_KEY}/" .env
-          echo "" >> .env
           echo "E2E_TESTING=1" >> .env
         shell: bash
 
@@ -60,8 +59,7 @@ jobs:
 
       - name: Apply Prisma Migrations
         run: |
-          # pnpm prisma migrate deploy
-          pnpm db:migrate:dev
+          pnpm prisma migrate deploy
 
       - name: Run App
         run: |

.github/workflows/pr.yml

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

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

@@ -23,14 +23,6 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      # https://github.com/docker/setup-qemu-action
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-      # https://github.com/docker/setup-buildx-action
-      - name: Set up Docker Buildx
-        id: buildx
-        uses: docker/setup-buildx-action@v3
-
       - name: Install cosign
         if: github.event_name != 'pull_request'
         uses: sigstore/cosign-installer@v3.5.0
@@ -56,7 +48,6 @@ jobs:
         uses: docker/build-push-action@v3
         with:
           context: .
-          platforms: linux/amd64,linux/arm64
           file: ./packages/database/Dockerfile
           push: true
           tags: ${{ steps.meta.outputs.tags }}

.github/workflows/welcome-new-contributors.yml

@@ -22,6 +22,6 @@ jobs:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           pr-message: |-
             Thank you so much for making your first Pull Request and taking the time to improve Formbricks! 🚀🙏❤️
-            Feel free to join the conversation on [Github Discussions](https://github.com/formbricks/formbricks/discussions) if you need any help or have any questions. 😊
+            Feel free to join the conversation at [Discord](https://formbricks.com/discord)
           issue-message: |
             Thank you for opening your first issue! 🙏❤️ One of our team members will review it and get back to you as soon as it possible. 😊

.gitignore

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

.gitpod.Dockerfile

@@ -0,0 +1,6 @@
+FROM gitpod/workspace-full
+
+# Install custom tools, runtime, etc.
+RUN brew install yq 
+
+RUN pnpm install turbo --global

.gitpod.yml

@@ -0,0 +1,77 @@
+tasks:
+  - name: demo
+    init: |
+      gp sync-await init-install && 
+      bash .gitpod/setup-demo.bash
+    command: |
+      cd apps/demo && 
+      cp .env.example .env &&
+      sed -i -r "s#^(NEXT_PUBLIC_FORMBRICKS_API_HOST=).*#\1 $(gp url 3000)#" .env &&
+      gp sync-await init && 
+      turbo --filter "@formbricks/demo" go
+
+  - name: website
+    command: gp sync-await init && turbo --filter "@formbricks/formbricks-com" dev
+
+  - name: Init Formbricks
+    init: |
+      cp .env.example .env &&
+      bash .gitpod/init.bash && 
+      turbo --filter "@formbricks/js" build && 
+      gp sync-done init-install
+    command: |
+      gp sync-done init && 
+      gp tasks list &&
+      gp ports await 3002 && gp ports await 3000 && gp open apps/demo/.env && gp preview $(gp url 3002) --external
+
+  - name: web
+    init: |
+      gp sync-await init-install && 
+      bash .gitpod/setup-web.bash &&
+      turbo --filter "@formbricks/database" db:down
+    command: |
+      gp sync-await init &&
+      cp .env.example .env &&
+      sed -i -r "s#^(WEBAPP_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
+
+ports:
+  - port: 3000
+    visibility: public
+    onOpen: open-browser
+  - port: 3001
+    visibility: public
+    onOpen: ignore
+  - port: 3002
+    visibility: public
+    onOpen: ignore
+  - port: 5432
+    visibility: public
+    onOpen: ignore
+  - port: 1025
+    visibility: public
+    onOpen: ignore
+  - port: 8025
+    visibility: public
+    onOpen: open-browser
+
+github:
+  prebuilds:
+    master: true
+    pullRequests: true
+    addComment: true
+
+vscode:
+  extensions:
+    - "ban.spellright"
+    - "bradlc.vscode-tailwindcss"
+    - "DavidAnson.vscode-markdownlint"
+    - "dbaeumer.vscode-eslint"
+    - "esbenp.prettier-vscode"
+    - "Prisma.prisma"
+    - "yzhang.markdown-all-in-one"

.npmrc

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

.nvmrc

@@ -1 +0,0 @@
-22.1.0

.prettierrc.js

@@ -2,10 +2,5 @@ const baseConfig = require("./packages/config-prettier/prettier-preset");
 
 module.exports = {
   ...baseConfig,
-  plugins: [
-    "@trivago/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss",
-    "prettier-plugin-sort-json",
-  ],
-  jsonRecursiveSort: true,
+  plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
 };

.vscode/launch.json

@@ -1,21 +1,21 @@
 {
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
   "configurations": [
     {
       "name": "Launch localhost:3002",
-      "reAttach": true,
-      "request": "launch",
       "type": "firefox",
+      "request": "launch",
+      "reAttach": true,
       "url": "http://localhost:3002/",
       "webRoot": "${workspaceFolder}"
     },
     {
       "name": "Attach",
-      "request": "attach",
-      "type": "firefox"
+      "type": "firefox",
+      "request": "attach"
     }
-  ],
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0"
+  ]
 }

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "typescript.preferences.importModuleSpecifier": "non-relative",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

CONTRIBUTING.md

@@ -16,15 +16,15 @@ Are you brimming with brilliant ideas? For new features that can elevate Formbri
 
 Ready to dive into the code and make a real impact? Here's your path:
 
-1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/developer-docs/contributing/get-started) but will help you save hours 🤓
+1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/contributing/how-we-code) but will help you save hours 🤓
 
-1. **Fork the Repository:** Fork our repository or use [Gitpod](https://gitpod.io) or use [Github Codespaces](https://github.com/features/codespaces) to get started instantly.
+1. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/contributing/gitpod)
 
 1. **Tweak and Transform:** Work your coding magic and apply your changes.
 
 1. **Pull Request Act:** If you're ready to go, craft a new pull request closely following our PR template 🙏
 
-Would you prefer a chat before you dive into a lot of work? [Github Discussions](https://github.com/formbricks/formbricks/discussions) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
+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!
 
 ## 🚀 Aspiring Features
 

LICENSE

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

README.md

@@ -1,7 +1,5 @@
 <div id="top"></div>
 
-<p align="center">Help us grow and star us on Github! ⭐️</p>
-
 <p align="center">
 
 <a href="https://formbricks.com">
@@ -15,12 +13,12 @@
 <p align="center">
 Harvest user-insights, build irresistible experiences.
 <br />
-<a href="https://formbricks.com/">Website</a>
+<a href="https://formbricks.com/">Website</a> | <a href="https://formbricks.com/discord">Join Discord community</a>
 </p>
 </p>
 
 <p align="center">
-<a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
+<a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://formbricks.com/discord"><img src="https://img.shields.io/discord/979077669410979880?label=Discord&logo=discord&logoColor=%23fff" alt="Join Formbricks Discord"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
 <a href="https://news.ycombinator.com/item?id=32303986"><img src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600" alt="Hacker News"></a>
 <a href="[https://www.producthunt.com/products/formbricks](https://www.producthunt.com/posts/formbricks)"><img src="https://img.shields.io/badge/Product%20Hunt-455-orange?logo=producthunt&logoColor=%23fff" alt="Product Hunt"></a>
 <a href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator" alt="Github Accelerator"></a>
@@ -228,14 +226,14 @@ The Formbricks core application is licensed under the [AGPLv3 Open Source Licens
 
 ### The Enterprise Edition
 
-Additional to the AGPL licensed Formbricks core, this repository contains code licensed under an Enterprise license. The [code](https://github.com/formbricks/formbricks/tree/main/apps/web/modules/ee) and [license](https://github.com/formbricks/formbricks/blob/main/apps/web/modules/ee/LICENSE) for the enterprise functionality can be found in the `/apps/web/modules/ee` folder of this repository. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an [Enterprise License Key](https://formbricks.com/docs/self-hosting/enterprise) to unlock it.
+Additional to the AGPL licensed Formbricks core, this repository contains code licensed under an Enterprise license. The [code](https://github.com/formbricks/formbricks/tree/main/packages/ee) and [license](https://github.com/formbricks/formbricks/blob/main/packages/ee/LICENSE) for the enterprise functionality can be found in the `/packages/ee` folder of this repository. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an [Enterprise License Key](https://formbricks.com/docs/self-hosting/enterprise) to unlock it.
 
 ### White-Labeling Formbricks and Other Licensing Needs
 
-We currently do not offer Formbricks white-labeled. That means that we don't sell a license which let's other companies resell Formbricks to third parties under their name nor take parts (like the survey editor) out of Formbricks to add to their own software products. Any other needs? [Send us an email](mailto:hola@formbricks.com).
+We currently do not offer Formbricks white-labeled. Any other needs? [Send us an email](mailto:hola@formbricks.com).
 
 ### Why charge for Enterprise Features?
 
-The Enterprise Edition allows us to fund the development of Formbricks sustainably. It guarantees that the free and open-source surveying infrastructure we're building will be around for decades to come.
+The Enterprise Edition and White-Label Licenses allow us to fund the development of Formbricks sustainably. It guarantees that the open-source surveying infrastructure we're building will be around for decades to come.
 
 <p align="right"><a href="#top">🔼 Back to top</a></p>

SECURITY.md

@@ -1,7 +1,7 @@
 # Security Policy of Formbricks
 
 This is Formbrick's security policy. Please reach out to us
-on Github or, if privately, via <security@formbricks.com>
+on our Discord or, if privately, via <security@formbricks.com>
 
 ## Introduction
 
@@ -40,7 +40,7 @@ We invite you to report if:
 
 Avoid reporting if:
 
-- Assistance is needed to optimize Formbricks for security – please engage on Github Discussions for this.
+- 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.
 
@@ -51,13 +51,13 @@ In the interest of responsibly managing vulnerabilities, please adhere to the fo
 > Do not reveal the problem to others until it has been resolved.
 
 1. **Send a Detailed Report**:
-   - Raise a security report on [Github](https://github.com/formbricks/formbricks/issues/new/choose) or send an email to [security@formbricks.com](mailto:security@formbricks.com).
+   - 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 preferred contact method.
+     - 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.

apps/demo-react-native/app.json

@@ -1,32 +1,32 @@
 {
   "expo": {
-    "android": {
-      "adaptiveIcon": {
-        "backgroundColor": "#ffffff",
-        "foregroundImage": "./assets/adaptive-icon.png"
-      }
-    },
-    "assetBundlePatterns": ["**/*"],
+    "name": "react-native-demo",
+    "slug": "react-native-demo",
+    "version": "1.0.0",
+    "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "ios": {
-      "infoPlist": {
-        "NSCameraUsageDescription": "Take pictures for certain activities.",
-        "NSMicrophoneUsageDescription": "Need microphone access for recording videos.",
-        "NSPhotoLibraryUsageDescription": "Select pictures for certain activities."
-      },
-      "supportsTablet": true
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
     },
     "jsEngine": "hermes",
-    "name": "react-native-demo",
-    "orientation": "portrait",
-    "slug": "react-native-demo",
-    "splash": {
-      "backgroundColor": "#ffffff",
-      "image": "./assets/splash.png",
-      "resizeMode": "contain"
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "infoPlist": {
+        "NSCameraUsageDescription": "Take pictures for certain activities.",
+        "NSPhotoLibraryUsageDescription": "Select pictures for certain activities.",
+        "NSMicrophoneUsageDescription": "Need microphone access for recording videos."
+      }
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
     },
-    "userInterfaceStyle": "light",
-    "version": "1.0.0",
     "web": {
       "favicon": "./assets/favicon.png"
     }

apps/demo-react-native/package.json

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

apps/demo-react-native/src/app.tsx

@@ -1,5 +1,4 @@
 import { StatusBar } from "expo-status-bar";
-import type { JSX } from "react";
 import { Button, LogBox, StyleSheet, Text, View } from "react-native";
 import Formbricks, { track } from "@formbricks/react-native";
 

apps/demo-react-native/tsconfig.json

@@ -1,6 +1,6 @@
 {
+  "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true
-  },
-  "extends": "expo/tsconfig.base"
+  }
 }

apps/demo/components/SurveySwitch.tsx

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

apps/demo/globals.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

apps/demo/next-env.d.ts

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

apps/demo/next.config.mjs

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

apps/demo/package.json

@@ -4,21 +4,22 @@
   "private": true,
   "scripts": {
     "clean": "rimraf .turbo node_modules .next",
-    "dev": "next dev -p 3002 --turbopack",
-    "go": "next dev -p 3002 --turbopack",
+    "dev": "next dev -p 3002 --turbo",
+    "go": "next dev -p 3002",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@formbricks/js": "workspace:*",
-    "lucide-react": "0.468.0",
-    "next": "15.1.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "@formbricks/ui": "workspace:*",
+    "lucide-react": "^0.418.0",
+    "next": "14.2.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@formbricks/config-typescript": "workspace:*",
-    "@formbricks/eslint-config": "workspace:*"
+    "@formbricks/eslint-config": "workspace:*",
+    "@formbricks/config-typescript": "workspace:*"
   }
 }

apps/demo/pages/_app.tsx

@@ -1,6 +1,6 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import "../globals.css";
+import "@formbricks/ui/globals.css";
 
 const App = ({ Component, pageProps }: AppProps) => {
   return (

apps/demo/pages/app/index.tsx

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

apps/demo/pages/website/index.tsx

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

apps/demo/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

apps/demo/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "exclude": ["node_modules"],
   "extends": "@formbricks/config-typescript/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }

apps/docs/app/[survey-type]/global/access-roles/page.mdx

@@ -1,175 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import AddMember from "./images/add-member.webp";
-import BulkInvite from "./images/bulk-invite.webp";
-import IndvInvite from "./images/individual-invite.webp";
-import MenuItem from "./images/organization-settings-menu.webp";
-
-export const metadata = {
-  title: "User Management",
-  description:
-    "Assign different roles to organization members to grant them specific rights like creating surveys, viewing responses, or managing organization members.",
-};
-
-# Organization Access Roles
-
-Learn about the different organization-level and team-level roles and how they affect permissions in Formbricks.
-
-## Memberships
-
-Permissions in Formbricks are broadly handled using organization-level roles, which apply to all teams and projects in the organization. Users on a self-hosting and Enterprise plan, have access to team-level roles, which enable more granular permissions.
-
-<Note>
-  Access Roles is a feature of the **Enterprise Edition**. In the **Community Edition** and on the **Free**
-  and **Startup** plan in the Cloud you can invite unlimited organization members as `Owner`.
-</Note>
-
-Here are the different access permissions, ranked from highest to lowest access
-
-1. Owner
-2. Manager
-3. Billing
-4. Member
-
-### Organisational level
-
-All users and their organization-level roles are listed in **Organization Settings > General**. Users can hold any of the following org-level roles:
-
-- **Billing** users can manage payment and compliance details in the organization.
-- **Org Members** can view most data in the organization and act in the projects they are members of. They cannot join projects on their own and need to be assigned.
-- **Org Managers** have full management access to all teams and projects. They can also manage the organization's membership. Org Managers can perform Team Admin actions without needing to join the team. They cannot change other organization settings.
-- **Org Owners** have full access to the organization, its data, and settings. Org Owners can perform Team Admin actions without needing to join the team.
-
-### Permissions at project level
-
-- **read**: read access to all resources (except settings) in the project.
-- **read & write**: read & write access to all resources (except settings) in the project.
-- **manage**: read & write access to all resources including settings in the project.
-
-### Team-level Roles
-
-- **Team Contributors** can view and act on surveys and responses.
-- **Team Admins** have additional permissions to manage their team's membership and projects. These permissions are granted at the team-level, and don't apply to teams where they're not a Team Admin.
-
-For more information on user roles & permissions, see below:
-
-|                                  | Owner | Manager | Billing | Member |
-| -------------------------------- | ----- | ------- | ------- | ------ |
-| **Organization**                 |       |         |         |        |
-| Update organization              | ✅    | ❌      | ❌      | ❌     |
-| Delete organization              | ✅    | ❌      | ❌      | ❌     |
-| Add new Member                   | ✅    | ✅      | ❌      | ❌     |
-| Delete Member                    | ✅    | ✅      | ❌      | ❌     |
-| Update Member Access             | ✅    | ✅      | ❌      | ❌     |
-| Update Billing                   | ✅    | ✅      | ✅      | ❌     |
-| **Project**                      |       |         |         |        |
-| Create Project                   | ✅    | ✅      | ❌      | ❌     |
-| Update Project Name              | ✅    | ✅      | ❌      | ✅\*\* |
-| Update Project Recontact Options | ✅    | ✅      | ❌      | ✅\*\* |
-| Update Look & Feel               | ✅    | ✅      | ❌      | ✅\*\* |
-| Update Survey Languages          | ✅    | ✅      | ❌      | ✅\*\* |
-| Delete Project                   | ✅    | ✅      | ❌      | ❌     |
-| **Surveys**                      |       |         |         |        |
-| Create New Survey                | ✅    | ✅      | ❌      | ✅\*   |
-| Edit Survey                      | ✅    | ✅      | ❌      | ✅\*   |
-| Delete Survey                    | ✅    | ✅      | ❌      | ✅\*   |
-| View survey results              | ✅    | ✅      | ❌      | ✅     |
-| **Response**                     |       |         |         |        |
-| Delete response                  | ✅    | ✅      | ❌      | ✅\*   |
-| Add tags on response             | ✅    | ✅      | ❌      | ✅\*   |
-| Edit tags on response            | ✅    | ✅      | ❌      | ✅\*   |
-| **Actions**                      |       |         |         |        |
-| Create Action                    | ✅    | ✅      | ❌      | ✅\*   |
-| Update Action                    | ✅    | ✅      | ❌      | ✅\*   |
-| Delete Action                    | ✅    | ✅      | ❌      | ✅\*   |
-| **API Keys**                     |       |         |         |        |
-| Create API key                   | ✅    | ✅      | ❌      | ✅\*\* |
-| Update API key                   | ✅    | ✅      | ❌      | ✅\*\* |
-| Delete API key                   | ✅    | ✅      | ❌      | ✅\*\* |
-| **Tags**                         |       |         |         |        |
-| Create tags                      | ✅    | ✅      | ❌      | ✅\*   |
-| Update tags                      | ✅    | ✅      | ❌      | ✅\*   |
-| Delete tags                      | ✅    | ✅      | ❌      | ✅\*\* |
-| **People**                       |       |         |         |        |
-| Delete Person                    | ✅    | ✅      | ❌      | ✅\*   |
-| **Integrations**                 |       |         |         |        |
-| Manage Integrations              | ✅    | ✅      | ❌      | ✅\*   |
-
-\* - for the read & write permissions team members
-
-\*\* - for the manage permissions team members
-
-## Inviting organization members
-
-There are two ways to invite organization members: One by one or in bulk.
-
-### Invite organization members one by one
-
-1. Go to the `Organization Settings` page via the menu in the lower right corner:
-
-<MdxImage
-  src={MenuItem}
-  alt="Where to find the Menu Item for Organization Settings"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-2. Click on the `Add member` button:
-
-<MdxImage
-  src={AddMember}
-  alt="Add member Button Position"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-3. In the modal, add the Name, Email and Role of the organization member you want to invite:
-
-<MdxImage
-  src={IndvInvite}
-  alt="Individual Invite Modal Tab"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-<Note>
-  Access Roles is a feature of the **Enterprise Edition**. In the **Community Edition** and on the **Free**
-  and **Startup** plan in the Cloud you can invite unlimited organization members as `Owners`.
-</Note>
-
-Formbricks sends an email to the organization member with an invitation link. The organization member can accept the invitation or create a new account by clicking on the link.
-
-### Invite organization members in bulk
-
-1. Go to the `Organization Settings` page via the menu in the lower right corner:
-
-<MdxImage
-  src={MenuItem}
-  alt="Where to find the Menu Item for Organization Settings"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-2. Click on the `Add member` button:
-
-<MdxImage
-  src={AddMember}
-  alt="Add member Button Position"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-3. In the modal, switch to `Bulk Invite`. You can download an example .CSV file to fill in the Name, Email and Role of the organization members you want to invite:
-
-<MdxImage
-  src={BulkInvite}
-  alt="Individual Invite Modal Tab"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-4. Upload the filled .CSV file and invite the organization members in bulk ✅
-
-Formbricks sends an email to each organization member in the CSV. The member can accept the invitation or create a new account by clicking on the link.
-
----

apps/docs/app/[survey-type]/global/add-image-or-video-question/page.mdx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/docs/app/[survey-type]/global/recall/page.mdx

@@ -1,81 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-import SurveyEmbed from "@/components/SurveyEmbed";
-import StepOne from "./images/StepOne.webp";
-import StepThree from "./images/StepThree.webp";
-import StepTwo from "./images/StepTwo.webp";
-
-export const metadata = {
-  title: "Recall Data in Formbricks Surveys",
-  description:
-    "Personalize your surveys by dynamically inserting data from URL parameters or previous answers into questions and descriptions. The Recall Data feature helps create engaging, adaptive survey experiences tailored to each respondent."};
-
-# Recall Data
-
-Personalize your surveys by dynamically inserting data from URL parameters or previous answers into questions and descriptions. The Recall Data feature helps create engaging, adaptive survey experiences tailored to each respondent.
-
-## Recall Sources
-You can recall data from the following sources:
-
-- From a previous question
-- From a [Hidden Field](/docs/link-surveys/global/hidden-fields)
-- From a [Variable](/docs/link-surveys/global/variables)
-
-## Recalling from a previous question
-
-<Note>
-  The recall functionality is disabled on the first question of the survey since there’s no preceding question
-  to recall data from.
-</Note>
-
-### **Pre-requisite**
-
-Ensure the answer you wish to recall precedes the question in which it will be recalled. Here’s an example of setting up the first question:
-
-<MdxImage
-  src={StepThree}
-  alt="Survey setup example with link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-### **Step 1: Recall Data**
-
-Type **`@`** in the question or description field where you want to insert a recall. This triggers a dropdown menu listing all preceding questions. Select the question you want to recall data from.
-
-<MdxImage
-  src={StepTwo}
-  alt="Dropdown menu for recalling data in survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-### **Step 2: Set a Fallback**
-
-To ensure the survey remains coherent when a response is missing (or the question is optional), you should set a fallback option.
-
-<MdxImage
-  src={StepOne}
-  alt="Setting fallback option in survey question"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-## Recalling from the URL
-1. Create a hidden field, [here is how →](/docs/global/hidden-fields)
-2. Use the `@` symbol in a question or description to recall the value of the hidden field
-3. Set a fallback in case the hidden field is not being filled by a URL parameter
-4. Use [Data Prefilling](/docs/link-surveys/data-prefilling) to set the hidden field value when the survey is accessed
-
-## Recalling from a Variable
-
-1. Create a variable, [here is how →](/docs/link-surveys/global/variables)
-2. Use the `@` symbol in a question or description to recall the value of the variable
-3. Set a fallback in case the variable is not being filled by a URL parameter
-
-## Live Demo
-
-<SurveyEmbed surveyUrl="https://app.formbricks.com/s/cm393eiiq0001kxphzc6lbbku" />
-
-## **Conclusion**
-
-Recall Data in Formbricks surveys allows for a conversational and customized survey experience that enhances engagement and improves the quality of feedback. By integrating previous responses into new questions, you create a more interactive and relevant environment for respondents.

apps/docs/app/[survey-type]/global/variables/page.mdx

@@ -1,89 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import CreatedVariables from "./images/created-variables.webp";
-import InputVariables from "./images/input-variables.webp";
-import LogicWithVariables from "./images/logic-with-variables.webp";
-import VariablesCard from "./images/variables-card.webp";
-import VariablesUsage from "./images/variables-usage.webp";
-
-export const metadata = {
-  title: "Variables",
-  description: "Add variabeles to your surveys to transform your survey into a quiz",
-};
-
-# Variables
-
-Variables are a powerful feature in Formbricks that allows you to keep track of data variables when user fills a form. This feature is especially useful when you want to use your survey as a quiz.
-
-## Types of Variables
-
-There are two types of variables you can add to your survey:
-
-1. **Text**: You can add text variables to your survey to capture text data.
-2. **Number**: You can add number variables to your survey to capture number data.
-
-## How to Add Variables
-
-1. Edit the survey you want to add variables to & switch to the Questions tab and scroll down to the bottom of the page. You will see a section called **Variables**.
-
-<MdxImage
-  src={VariablesCard}
-  alt="Variables card"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-2. Now click on it to add a new variable ID. You can add as many variables as you want. You can also choose the type of variable you want to add along with the default value.
-
-<MdxImage
-  src={InputVariables}
-  alt="add variables"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-<MdxImage
-  src={CreatedVariables}
-  alt="created variables"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-## Use case:
-
-- **Quiz**: You can use variables to create a quiz. For example, you can add a variable `score` and update it every time a user answers a question. You can also use the variable for recall to show the final score to the user.
-
-- **Personalisation**: You can use variables to store user data and personalise the survey experience. For example, you can add a variable `full_name` and update it every time a user fills in their first name and last name. You can use the variable to personalise the survey experience by addressing the user with their full name.
-
-## How is it different from Hidden Fields?
-
-Variables are different from hidden fields in the following ways:
-
-1. **Setting**: Hidden fields can be set through query parameters or `formbricks.init`, but the variables can only be set either during creation or dynamically by using logic actions.
-2. **Updating**: Hidden fields cannot be set again, but the value of variables can be updated while the user fills the survey.
-3. **Type**: Hidden fields can only store text data, but variables can store both text and number data.
-
-## How to use Variables
-
-1. Once you have added the variables to your survey, you'll be able to access them in the logic editor. You can use the variables to create logic actions and conditions.
-
-<MdxImage
-  src={VariablesUsage}
-  alt="Variables usage"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-2. You can create logic based on the variables and questions in your survey and can update the variables based on the user's response.
-
-<MdxImage
-  src={LogicWithVariables}
-  alt="Logic with variables"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-<Note>
-  To know more about how to use logic in Formbricks, check out the [Conditional
-  Logic](/global/conditional-logic).
-</Note>

apps/docs/app/api-docs/components/api-docs.tsx

@@ -1,68 +0,0 @@
-"use client";
-
-import { Button } from "@/components/Button";
-import { LoadingSpinner } from "@/components/icons/LoadingSpinner";
-import { useTheme } from "next-themes";
-import { useState } from "react";
-import { RedocStandalone } from "redoc";
-import "./style.css";
-
-export const ApiDocs = () => {
-  const { resolvedTheme } = useTheme();
-
-  const redocTheme = {
-    hideDownloadButton: true,
-    hideLoading: true,
-    nativeScrollbars: true,
-    theme: {
-      sidebar: {
-        backgroundColor: "transparent",
-        textColor: resolvedTheme === "dark" ? "rgb(203, 213, 225)" : "rgb(51, 51, 51)",
-        activeTextColor: "#2dd4bf",
-      },
-      rightPanel: {
-        backgroundColor: "transparent",
-      },
-      colors: {
-        primary: { main: "#2dd4bf" },
-        text: {
-          primary: resolvedTheme === "dark" ? "#ffffff" : "rgb(51, 51, 51)",
-        },
-        responses: {
-          success: { color: "#22c55e" },
-          error: { color: "#ef4444" },
-          info: { color: "#3b82f6" },
-        },
-      },
-      typography: {
-        fontSize: "16px",
-        lineHeight: "2rem",
-        fontFamily: "Jost, system-ui, -apple-system, sans-serif",
-        headings: {
-          fontFamily: "Jost, system-ui, -apple-system, sans-serif",
-          fontWeight: "600",
-        },
-        code: {
-          fontSize: "16px",
-          fontFamily: "ui-monospace, monospace",
-        },
-      },
-      codeBlock: {
-        backgroundColor: "rgb(24, 35, 58)",
-      },
-      spacing: { unit: 5 },
-    },
-  };
-
-  const [loading, setLoading] = useState(true);
-
-  return (
-    <div className="px-4">
-      <Button href="/developer-docs/rest-api" arrow="left" className="mb-4 mt-8">
-        Back to docs
-      </Button>
-      <RedocStandalone specUrl="/docs/openapi.yaml" onLoaded={() => setLoading(false)} options={redocTheme} />
-      {loading && <LoadingSpinner />}
-    </div>
-  );
-};

apps/docs/app/api-docs/components/style.css

@@ -1,86 +0,0 @@
-:root[data-theme="light"] {
-  --text-color: rgb(51, 65, 85);
-}
-
-:root[data-theme="dark"] {
-  --text-color: rgb(203, 213, 225);
-}
-
-h5,
-.sc-dhCplO,
-.sc-dpBQxM {
-  color: var(--text-color) !important;
-}
-
-.tab-success,
-.react-tabs__tab,
-.tab-error {
-  background-color: transparent !important;
-  border: 1px solid var(--text-color) !important;
-  margin: 10px 5px !important;
-}
-
-.sc-dwGkES,
-.sc-ePpfBx {
-  background-color: rgb(24, 24, 27) !important;
-  border: 1px solid var(--text-color) !important;
-}
-.sc-ePpfBx,
-.corVrN {
-  background-color: rgb(24, 24, 27) !important;
-  border: none !important;
-}
-.cqdCbT {
-  display: none !important;
-}
-.kiMaJz, .iZNUDY {
-  align-items: center !important;
-}
-
-.react-tabs__tab-panel > div {
-  padding: 0 !important;
-  border-radius: 8px !important;
-  overflow: hidden !important;
-}
-.sc-Rjrgp {
-  background-color: rgb(15, 23, 42) !important;
-  display: flex !important;
-  justify-content: center !important;
-  flex-direction: column !important;
-  padding: 8px 16px !important;
-}
-.cugBNu {
-  position: static !important;
-}
-.daIHdK {
-  padding: 0 !important;
-}
-.kqHNPM {
-  margin-top: 0px !important;
-}
-.sc-iwXfZk,
-.redoc-json {
-  padding: 1rem !important;
-  background-color: rgb(24, 35, 58) !important;
-}
-.sc-uYFMi {
-  background-color: rgb(24, 35, 58) !important;
-  padding: 0.5rem 0 !important;
-  color: #2dd4bf !important;
-  font-weight: 600 !important;
-}
-.token {
-  color: #2dd4bf !important;
-}
-
-.property {
-  color: rgb(203, 213, 225) !important;
-}
-.sc-iPHsxv {
-  background-color: rgb(15, 23, 42) !important;
-  border-radius: 8px !important;
-}
-
-.sc-hSyjfr {
-  background-color: rgb(15, 23, 42) !important;
-}

apps/docs/app/api-docs/page.tsx

@@ -1,5 +0,0 @@
-import { ApiDocs } from "./components/api-docs";
-
-export default function ApiDocsPage() {
-  return <ApiDocs />;
-}

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

@@ -9,6 +9,8 @@ export const metadata = {
     "Dive deep into how actions in Formbricks help products and organizations to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",
 };
 
+#### App Surveys
+
 # Actions
 
 Actions are predefined events within your app that prompt Formbricks to display a survey when triggered. These are detected by the Formbricks widget, which then presents the appropriate survey based on your predefined settings.

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

@@ -4,11 +4,13 @@ export const metadata = {
     "Advanced Targeting allows you to show surveys to just the right group of people. You can target surveys based on user attributes, metadata, and other segments. This helps you get more relevant feedback and make data-driven decisions.",
 };
 
+#### App Surveys
+
 # Advanced Targeting
 
 Advanced Targeting allows you to show surveys to the right group of people. You can target surveys based on user attributes, device type, and more instead of spraying and praying. This helps you get more relevant feedback and make data-driven decisions. All of this without writing a single line of code.
 
-## How to setup Advanced Targeting
+# How to setup Advanced Targeting
 
 <Note>Advanced Targeting is only available on the Pro plan!</Note>
 

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

@@ -15,7 +15,7 @@ export const metadata = {
 # Framework Guides
 
 One can integrate Formbricks App Survey SDK into their app using multiple options! Checkout the options below that we provide! If you are looking
-for something else, please [open a new Github Discussion](https://github.com/formbricks/formbricks/discussions) and we would be glad to help.
+for something else, please [join our Discord!](https://formbricks.com/discord) and we would be glad to help.
 
 <Libraries />
 
@@ -42,8 +42,8 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
 !function(){
     var apiHost = "https://app.formbricks.com";
     var environmentId = "<your-environment-id>";
-    var userId = "<your-user-id>"; //optional
-    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=apiHost+"/js/formbricks.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: environmentId, apiHost: apiHost, userId: userId})},500)}();
+    var userId = "<your-user-id>";
+    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=apiHost+"/api/packages/app";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: environmentId, apiHost: apiHost, userId: userId})},500)}();
 </script>
 <!-- END Formbricks Surveys -->
 ```
@@ -58,9 +58,12 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
 </Properties>
 
-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!
 
 ---
 
@@ -88,13 +91,13 @@ Now, update your App.js/ts file to initialise Formbricks.
 
 ```js
 // other imports
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>", //optional
+    userId: "<user-id>",
   });
 }
 
@@ -116,9 +119,12 @@ export default App;
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
 </Properties>
 
-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!
 
 ---
 
@@ -158,7 +164,7 @@ yarn add @formbricks/js zod
 
 import { usePathname, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 
 export default function FormbricksProvider() {
   const pathname = usePathname();
@@ -168,7 +174,7 @@ export default function FormbricksProvider() {
     formbricks.init({
       environmentId: "<environment-id>",
       apiHost: "<api-host>",
-      userId: "<user-id>", //optional
+      userId: "<user-id>",
     });
   }, []);
 
@@ -200,6 +206,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 </CodeGroup>
 </Col>
 
+Refer to our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
+
 ### Pages Directory
 
 <Col>
@@ -209,13 +217,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 // other import
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>", //optional
+    userId: "<user-id>",
   });
 }
 
@@ -237,6 +245,7 @@ export default function App({ Component, pageProps }: AppProps) {
 
 </CodeGroup>
 </Col>
+Refer to our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
 
 ### Required customizations to be made
 
@@ -247,6 +256,9 @@ export default function App({ Component, pageProps }: AppProps) {
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
 </Properties>
 
 First we initialize the Formbricks SDK, ensuring that it only runs on the client side.
@@ -280,13 +292,13 @@ yarn add @formbricks/js
 <CodeGroup title="src/formbricks.js">
 
 ```js
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>", //optional
+    userId: "<user-id>",
   });
 }
 
@@ -327,9 +339,12 @@ router.afterEach((to, from) => {
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
 </Properties>
 
-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!
 
 ## React Native
 
@@ -384,6 +399,9 @@ export default function App() {
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
 </Properties>
 
 ---
@@ -448,6 +466,6 @@ Debug log messages provide insights into:
 - Event tracking, survey triggers and form interactions.
 - Initialization errors.
 
-**Can’t figure it out?**: **[Get help in Github Discussions](https://github.com/formbricks/formbricks/discussions)**
+**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**
 
 ---

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

@@ -3,7 +3,6 @@ import { MdxImage } from "@/components/MdxImage";
 import I1 from "./images/I1.webp";
 import I2 from "./images/I2.webp";
 import I3 from "./images/I3.webp";
-import I3_1 from "./images/I3_1.webp";
 import I4 from "./images/I4.webp";
 import I5 from "./images/I5.webp";
 import I6 from "./images/I6.webp";
@@ -16,41 +15,44 @@ export const metadata = {
     "Formbricks is the easiest way to create and manage app surveys. This quickstart guide will show you how to create your first app survey in under 5 minutes.",
 };
 
+#### App Surveys
+
 # Quickstart
 
 App surveys have 6-10x better conversion rates than emailed surveys. This tutorial explains how to run a survey in both your web app and mobile app (React Native) in just 10 to 15 minutes. Let’s go!
 
-1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and you'll be guided to our onboarding like below, choose the "Formbricks Surveys" option:
+<Note>
+  App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run
+  surveys on your public facing website, head over to the [Website Surveys Quickstart
+  Guide](/website-surveys/quickstart).
+</Note>
+
+1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and you'll be guided to our onboarding like below:
+
+<Note>
+  Website & App Surveys have the same integration process. The difference will come when we setup our survey.
+</Note>
 
 <MdxImage
   src={I1}
-  alt="Choose Formbricks Surveys"
+  alt="Choose website survey from survey type"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-2. **Choose your Project Channel**: On this step, you have to choose between the various channels that you want your project to be created in, you can create both app and link surveys from all the channels, but for the onboarding, please choose between the app surveys or the public website options, upon doing this, you'll be prompted to connect your app / website to formbricks.
+2. **Connect your App/Website**: Once you get through a couple of onboarding steps, you’ll be asked to connect your app or website. This is where you’ll find the code snippet for both HTML as well as the npm package which you need to embed in your app:
 
 <MdxImage
   src={I2}
-  alt="Choose between app and website surveys project channels"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-3. **Connect your App/Website**: Once you get through a couple of onboarding steps, you’ll be asked to connect your app or website. This is where you’ll find the code snippet for both HTML as well as the npm package which you need to embed in your app:
-
-<MdxImage
-  src={I3}
   alt="Code snippet for connecting app with Formbricks"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-Paste the code snippet in your app and reload the page. You should now see a message being displayed that your app or website is now connected with formbricks.
+Paste the code snippet in your app and reload the page. You should now see the Formbricks widget in the lower right corner of your app! The integration is now complete.
 
 <MdxImage
-  src={I3_1}
+  src={I3}
   alt="App connected with Formbricks"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
@@ -65,7 +67,7 @@ Onboarding is complete! Now let’s create our first survey as you should see te
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-4. **Create your first survey**: To be able to see a survey in your app, you need to create one. We’ll choose one of the templates and head over to the survey settings:
+3. **Create your first survey**: To be able to see a survey in your app, you need to create one. We’ll choose one of the templates and head over to the survey settings:
 
 Pick the Survey Type as **App Survey**.
 
@@ -76,7 +78,7 @@ Pick the Survey Type as **App Survey**.
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-5. **Set Trigger for the Survey**: Scroll down to Survey Trigger and click on **+ Add action**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
+4. **Set Trigger for the Survey**: Scroll down to Survey Trigger and click on **+ Add action**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
 
 <MdxImage
   src={I6}
@@ -85,7 +87,7 @@ Pick the Survey Type as **App Survey**.
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-6. **Set Recontact Options for debugging**: In Recontact Options we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once to each user to prevent survey fatigue:
+5. **Set Recontact Options for debugging**: In Recontact Options we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once to each user to prevent survey fatigue:
 
 <Note>
   Please change this setting later on after testing your survey to prevent survey fatigue for your users.
@@ -98,7 +100,7 @@ Pick the Survey Type as **App Survey**.
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-7. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey.
+6. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey.
 
 <MdxImage
   src={I8}
@@ -109,7 +111,7 @@ Pick the Survey Type as **App Survey**.
 
 ---
 
-- We offer framework guides for various frontend tech, head over to the the [App Survey Framework Guides](/app-surveys/framework-guides) to get started with your app survey.
-- Head over to our JS SDK documentation to get started with the [JS SDK](/developer-docs/js-sdk).
+- We offer framework guides for various frontend tech, head over to the the [App Survey Framework Guides](/app-survey/framework-guides) to get started with your app survey.
+- Head over to our App Survey SDK documentation to get started with the [App Survey JS SDK](/developer-docs/app-survey-sdk).
 
-Still struggling or something not working as expected? [Join us in Github Discussions](https://github.com/formbricks/formbricks/discussions) and we'd be glad to assist you!
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!