Merge branch 'main' of https://github.com/Dhruwang/formbricks into integration-test

Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

.devcontainer/Dockerfile

@@ -1,5 +1,5 @@
 # [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=18-bullseye
+ARG VARIANT=20
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
 
 # [Optional] Uncomment this section to install additional OS packages.
@@ -13,4 +13,4 @@ FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
 # [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"
+RUN su node -c "npm install -g pnpm"

.devcontainer/devcontainer.json

@@ -2,29 +2,27 @@
 // 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
 {
-	"name": "Node.js & PostgreSQL",
-	"dockerComposeFile": "docker-compose.yml",
-	"service": "app",
-	"workspaceFolder": "/workspace",
+  "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"
-			]
-		}
-	},
+  // 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 '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": "pnpm install",
+  // 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",
 
-	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "node"
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node"
 }

.devcontainer/docker-compose.yml

@@ -6,10 +6,10 @@ services:
       context: .
       dockerfile: Dockerfile
       args:
-        # Update 'VARIANT' to pick an LTS version of Node.js: 18, 16, 14.
+        # 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: "18"
+        VARIANT: "20"
 
     volumes:
       - ..:/workspace:cached
@@ -33,7 +33,7 @@ services:
     environment:
       POSTGRES_PASSWORD: postgres
       POSTGRES_USER: postgres
-      POSTGRES_DB: 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.)
 

.env.example

@@ -1,4 +1,3 @@
-/*
 ########################################################################
 # ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------#
 ########################################################################
@@ -10,18 +9,13 @@
 
 WEBAPP_URL=http://localhost:3000
 
-SURVEY_BASE_URL=http://localhost:3000/s
-
 # Set this if you want to have a shorter link for surveys
-SHORT_SURVEY_BASE_URL=
+SHORT_URL_BASE=
 
 # Encryption keys
 # Please set both for now, we will change this in the future
 
-# You can use: `openssl rand -base64 16` to generate one
-FORMBRICKS_ENCRYPTION_KEY=
-
-# You can use: `openssl rand -base64 24` to generate one
+# You can use: `openssl rand -hex 32` to generate one
 ENCRYPTION_KEY=
 
 ##############
@@ -35,7 +29,7 @@ DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=pu
 ###############
 
 # @see: https://next-auth.js.org/configuration/options#nextauth_secret
-# You can use: `openssl rand -base64 32` to generate one
+# You can use: `openssl rand -hex 32` to generate one
 NEXTAUTH_SECRET=RANDOM_STRING
 
 # Set this to your public-facing URL, e.g., https://example.com
@@ -69,10 +63,10 @@ SMTP_PASSWORD=smtpPassword
 #####################
 
 # Email Verification. If you enable Email Verification you have to setup SMTP-Settings, too.
-# EMAIL_VERIFICATION_DISABLED=1
+EMAIL_VERIFICATION_DISABLED=1
 
 # Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
-# PASSWORD_RESET_DISABLED=1
+PASSWORD_RESET_DISABLED=1
 
 # Signup. Disable the ability for new users to create an account.
 # SIGNUP_DISABLED=1
@@ -99,12 +93,22 @@ GOOGLE_AUTH_ENABLED=0
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
+# Configure Azure Active Directory Login
+AZUREAD_AUTH_ENABLED=0
+AZUREAD_CLIENT_ID=
+AZUREAD_CLIENT_SECRET=
+AZUREAD_TENANT_ID=
+
 # Cron Secret
 CRON_SECRET=
 
 # Configure this when you want to ship JS & CSS files from a complete URL instead of the current domain
 # ASSET_PREFIX_URL=
 
+# Oauth credentials for Notion Integration
+NOTION_OAUTH_CLIENT_ID=
+NOTION_OAUTH_CLIENT_SECRET=
+
 # Stripe Billing Variables
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
@@ -114,4 +118,22 @@ NEXT_PUBLIC_FORMBRICKS_API_HOST=
 NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
 NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
 
-*/
+# Oauth credentials for Google sheet integration 
+GOOGLE_SHEETS_CLIENT_ID=
+GOOGLE_SHEETS_CLIENT_SECRET=
+GOOGLE_SHEETS_REDIRECT_URL=
+
+# Oauth credentials for Airtable integration 
+AIRTABLE_CLIENT_ID=
+
+# Enterprise License Key
+ENTERPRISE_LICENSE_KEY=
+
+# Automatically assign new users to a specific team and role within that team
+# Insert an existing team 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_TEAM_ID=
+# DEFAULT_TEAM_ROLE=admin
+
+# set to 1 to skip onboarding for new users
+# ONBOARDING_DISABLED=1

.github/PULL_REQUEST_TEMPLATE.md

@@ -42,6 +42,7 @@ Fixes # (issue)
 - [ ] Removed all `console.logs`
 - [ ] Merged the latest changes from main onto my branch with `git pull origin main`
 - [ ] My changes don't cause any responsiveness issues
+- [ ] First PR at Formbricks? [Please sign the CLA!](https://formbricks.com/clmyhzfrymr4ko00hycsg1tvx) Without it we wont be able to merge it 🙏
 
 ### Appreciated
 

.github/workflows/build-formbricks-com.yml

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

.github/workflows/build-web.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Generate Random NEXTAUTH_SECRET
         run: |
-          SECRET=$(openssl rand -base64 24)
+          SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Build Formbricks-web

.github/workflows/cron-reportUsageToStripe.yml

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

.github/workflows/lint.yml

@@ -25,9 +25,9 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
-      - name: Generate Random NEXTAUTH_SECRET
+      - name: Generate Random ENCRYPTION_KEY
         run: |
-          SECRET=$(openssl rand -base64 24)
+          SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Lint

.github/workflows/playwright.yml

@@ -0,0 +1,40 @@
+name: E2E Tests
+on:
+  workflow_call:
+jobs:
+  build:
+    name: Run E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install Docker Compose
+        run: sudo apt-get update && sudo apt-get install -y docker-compose
+
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+
+      - name: Build Formricks JS package
+        run: pnpm build --filter=js
+
+      - name: Build Formbricks Image & Run
+        run: docker-compose up -d
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm test:e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/pr.yml

@@ -24,11 +24,16 @@ jobs:
 
   build:
     name: Build Formbricks-web
-    uses: ./.github/workflows/build.yml
+    uses: ./.github/workflows/build-web.yml
+    secrets: inherit
+
+  e2e-test:
+    name: Run E2E Tests
+    uses: ./.github/workflows/playwright.yml
     secrets: inherit
 
   required:
-    needs: [lint, test, build]
+    needs: [lint, test, build, e2e-test]
     if: always()
     runs-on: ubuntu-latest
     steps:

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

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

.github/workflows/release-docker.yml

@@ -16,12 +16,12 @@ jobs:
     steps:
       - name: Generate Random NEXTAUTH_SECRET
         run: |
-          SECRET=$(openssl rand -hex 16)
+          SECRET=$(openssl rand -hex 32)
           echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
 
-      - name: Generate Random NEXTAUTH_SECRET
+      - name: Generate Random ENCRYPTION_KEY
         run: |
-          SECRET=$(openssl rand -base64 24)
+          SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Checkout Repo
@@ -55,3 +55,4 @@ jobs:
           build-args: |
             NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
             DATABASE_URL=${{ env.DATABASE_URL }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}

.github/workflows/test.yml

@@ -29,6 +29,11 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
+      - name: Generate Random ENCRYPTION_KEY
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Build formbricks-js dependencies
         run: pnpm build --filter=js
 

.gitignore

@@ -44,4 +44,10 @@ packages/database/zod
 # nixos stuff
 .direnv
 
-Zone.Identifier
+Zone.Identifier
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.gitpod.yml

@@ -10,7 +10,7 @@ tasks:
       gp sync-await init && 
       turbo --filter "@formbricks/demo" go
 
-  - name : website
+  - name: website
     command: gp sync-await init && turbo --filter "@formbricks/formbricks-com" dev
 
   - name: Init Formbricks
@@ -34,12 +34,10 @@ tasks:
       cp .env.example .env &&
       sed -i -r "s#^(WEBAPP_URL=).*#\1 $(gp url 3000)#" .env &&
       sed -i -r "s#^(NEXTAUTH_URL=).*#\1 $(gp url 3000)#" .env &&
-      RANDOM_FORMBRICKS_ENCRYPTION_KEY=$(openssl rand -base64 16)
-      sed -i 's/^FORMBRICKS_ENCRYPTION_KEY=.*/FORMBRICKS_ENCRYPTION_KEY='"$RANDOM_FORMBRICKS_ENCRYPTION_KEY"'/' .env
-      RANDOM_ENCRYPTION_KEY=$(openssl rand -base64 24)
+      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
 
@@ -62,7 +60,7 @@ ports:
   - port: 8025
     visibility: public
     onOpen: open-browser
-    
+
 github:
   prebuilds:
     master: true
@@ -77,4 +75,4 @@ vscode:
     - "dbaeumer.vscode-eslint"
     - "esbenp.prettier-vscode"
     - "Prisma.prisma"
-    - "yzhang.markdown-all-in-one"
+    - "yzhang.markdown-all-in-one"

.husky/pre-commit

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

.npmrc

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

.prettierrc.js

@@ -1 +1,6 @@
-module.exports = require("./packages/prettier-config/prettier-preset");
+const baseConfig = require("./packages/prettier-config/prettier-preset");
+
+module.exports = {
+  ...baseConfig,
+  plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+};

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

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

README.md

@@ -1,83 +1,128 @@
-<p align="center">
-<a href="https://formbricks.com">
-    <img width="120" alt="Open Source Experience Management Solution Qualtrics Alternative Logo" src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
-  </a>
-  <h3 align="center">Formbricks</h3>
+<div  id="top"></div>
 
-  <p align="center">
-    The Open Source Survey & Experience Management solution for fast growing companies
-    <br />
-    <a href="https://formbricks.com/">Website</a>  |  <a href="https://formbricks.com/discord">Join Discord community</a>
-  </p>
+<p  align="center">
+
+<a  href="https://formbricks.com">
+
+<img  width="120"  alt="Open Source Privacy First Experience Management Solution Qualtrics Alternative Logo"  src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
+
+</a>
+
+<h3  align="center">Formbricks</h3>
+
+<p  align="center">
+Harvest user-insights, build irresistible experiences.
+<br  />
+<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://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/snoopforms"><img src="https://img.shields.io/badge/Product%20Hunt-%232%20Product%20of%20the%20Day-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>
-<a href="https://github.com/formbricks/formbricks/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
+<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://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>
+<a  href="https://github.com/formbricks/formbricks/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img  src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
 </p>
 
 <br/>
 
-<p align="center">
+<div style="background-color:#f8fafc; border-radius:5px;">
+<p  align="center">
 <i>Trusted by</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="https://github.com/calcom/cal.com/"><img src="https://github.com/formbricks/formbricks/assets/675065/1a8763cf-f47e-4960-90f6-334f6dc12a17#gh-light-mode-only" height="20px"></a><a href="https://github.com/calcom/cal.com/"><img src="https://github.com/formbricks/formbricks/assets/72809645/9a031e8d-538f-4fdc-9338-b77e9a57d6ac#gh-dark-mode-only" height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="https://github.com/CrowdDotDev/crowd.dev"><img src="https://github.com/formbricks/formbricks/assets/675065/59b1a4d4-25e4-4ef3-b0bf-4426446fbfd0#gh-light-mode-only" height="20px"></a><a href="https://github.com/CrowdDotDev/crowd.dev"><img src="https://github.com/formbricks/formbricks/assets/72809645/4bb4caf7-4b64-44c8-94bd-850606d181c1#gh-dark-mode-only" height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="https://clovyr.io/"><img src="https://github.com/formbricks/formbricks/assets/675065/9291c8df-9aac-423a-a430-a9a581240075" height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/675065/72e5e37b-8ef7-4340-b06e-f1d12a05330f#gh-light-mode-only" height="20px"></a><a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/72809645/9d9711dc-75e5-4084-b7fa-bbaf621064a8#gh-dark-mode-only" height="20px">
+<a  href="https://flixbus.com"><img  src="https://github.com/formbricks/formbricks/assets/72809645/d6c91d89-7633-4845-ae1e-03bbd2ce0946"  height="35px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<a  href="https://github.com/calcom/cal.com/"><img  src="https://github.com/formbricks/formbricks/assets/675065/1a8763cf-f47e-4960-90f6-334f6dc12a17#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<a  href="https://github.com/CrowdDotDev/crowd.dev"><img  src="https://github.com/formbricks/formbricks/assets/675065/59b1a4d4-25e4-4ef3-b0bf-4426446fbfd0#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<a  href="https://neverinstall.com/"><img  src="https://github.com/formbricks/formbricks/assets/675065/72e5e37b-8ef7-4340-b06e-f1d12a05330f#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<a  href="https://clovyr.io/"><img  src="https://github.com/formbricks/formbricks/assets/675065/9291c8df-9aac-423a-a430-a9a581240075"  height="20px"></a>
 </p>
+<div>
 
-<img width="1527" alt="formtribe hackathon" src="https://github.com/formbricks/formbricks/assets/72809645/addc3a5b-421c-4c8d-8be2-eedf087100ed">
-
-## 🔥 The FormTribe Hackathon is on!
-
-To celebrate Hacktoberfest, we've launched our FormTribe hackathon. Write code or perform non-code side quests to collect points and increase your chances of winning the MacBook Air M2!
-
-**Join lottery with a [single tweet!](https://formtribe.com). All info on [formtribe.com](https://formtribe.com)**
+<p  align="center">
+<a  href="https://trendshift.io/repositories/2570"  target="_blank"><img  src="https://trendshift.io/api/badge/repositories/2570"  alt="Trendshift Badge for formbricks/formbricks"  style="width: 250px; height: 55px;"  width="250"  height="55"/></a>
+</p>
 
 ## ✨ About Formbricks
 
-<img width="1527" alt="formbricks-sneak" src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">
+<img  width="1527"  alt="formbricks-sneak"  src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">
 
-Formbricks is your go-to solution for in-product micro-surveys that will supercharge your product experience. Use micro-surveys to target the right users at the right time without making surveys annoying.
+Formbricks provides a free and open source surveying platform. Gather feedback at every point in the user journey with beautiful in-app, website, link and email surveys. Build on top of Formbricks or leverage prebuilt data analysis capabilities.
 
-**Try it out in the cloud at [formbricks.com](https://formbricks.com)**
+**Try it out in the cloud at [formbricks.com](https://app.formbricks.com/auth/signup)**
 
-## 💪 Mission: Make customer-centric decisions based on data.
+## 💪 Mission: Empower your team, craft an irresistible experience.
 
-Formbricks helps you apply best practices from data-driven work and experience management to make better business decisions. Ask users as they experience your product - and leverage a significantly higher conversion rate. Gather all insights you can - including partial submissions and build conviction for the next product decision. Better data, better business.
+Formbricks is both a free and open source survey platform - and a privacy-first experience management platform. Use in-app, website, link and email surveys to gather user and customer insights at every point of their journey. Leverage Formbricks Insight Platform or build your own. Life's too short for mediocre UX.
+
+### Table of Contents
+
+- [Features](#features)
+
+- [Getting Started](#getting-started)
+
+- [Cloud Version](#cloud-version)
+
+- [Self-hosted Version](#self-hosted-version)
+
+- [Development](#development)
+
+- [Contribution](#contribution)
+
+- [Contact](#contact-us)
+
+- [License](#license)
+
+- [Security](#security)
+
+<a  id="features"></a>
 
 ### Features
 
-- 📲 Create **in-product surveys** with our no code editor with multiple question types.
+- 📲 Create **conversion-optimized surveys** with our no-code editor with several question types.
+
 - 📚 Choose from a variety of best-practice **templates**.
+
 - 👩🏻 Launch and **target your surveys to specific user groups** without changing your application code.
+
 - 🔗 Create shareable **link surveys**.
+
 - 👨‍👩‍👦 Invite your team members to **collaborate** on your surveys.
-- 🔌 Integrate Formbricks with **Slack, Posthog, Zapier, n8n and more**.
+
+- 🔌 Integrate Formbricks with **Slack, Notion, Zapier, n8n and more**.
+
 - 🔒 All **open source**, transparent and self-hostable.
 
 ### Built on Open Source
 
 - 💻 [Typescript](https://www.typescriptlang.org/)
+
 - 🚀 [Next.js](https://nextjs.org/)
+
 - ⚛️ [React](https://reactjs.org/)
+
 - 🎨 [TailwindCSS](https://tailwindcss.com/)
+
 - 📚 [Prisma](https://prisma.io/)
+
 - 🔒 [Auth.js](https://authjs.dev/)
+
 - 🧘‍♂️ [Zod](https://zod.dev/)
 
+<a  id="getting-started"></a>
+
 ## 🚀 Getting started
 
 We've got several options depending on your need to help you quickly get started with Formbricks.
 
+<a  id="cloud-version"></a>
+
 ### ☁️ Cloud Version
 
-Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://formbricks.com).
+Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://app.formbricks.com/auth/signup).
 
-### 🐳 Self-hosted version
+<a  id="self-hosted-version"></a>
+
+### 🐳 Self-hosting Formbricks
 
 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
 
@@ -89,7 +134,7 @@ If you opt for self-hosting Formbricks, here are a few options to consider:
 
 To get started with self-hosting with Docker, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).
 
-#### Community managed One Click Hosting
+#### Community-managed One Click Hosting
 
 ##### Railway
 
@@ -97,6 +142,8 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel
 
 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
 
+<a  id="development"></a>
+
 ### 👨‍💻 Development
 
 #### Prerequisites
@@ -104,7 +151,9 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel
 Here is what you need to be able to run Formbricks:
 
 - [Node.js](https://nodejs.org/en) (Version: >=18.x)
+
 - [Pnpm](https://pnpm.io/)
+
 - [Docker](https://www.docker.com/) - to run PostgreSQL and MailHog
 
 #### Local Setup
@@ -119,6 +168,8 @@ To get started locally, we've got a [guide to help you](https://formbricks.com/d
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/formbricks/formbricks)
 
+<a  id="contribution"></a>
+
 ## ✍️ Contribution
 
 We are very happy if you are interested in contributing to Formbricks 🤗
@@ -126,27 +177,39 @@ We are very happy if you are interested in contributing to Formbricks 🤗
 Here are a few options:
 
 - Star this repo.
+
 - Create issues every time you feel something is missing or goes wrong.
-- Upvote issues with 👍 reaction so we know what's the demand for a particular issue to prioritize it within the roadmap.
+
+- Upvote issues with 👍 reaction so we know what the demand for a particular issue is to prioritize it within the roadmap.
 
 Please check out [our contribution guide](https://formbricks.com/docs/contributing/introduction) and our [list of open issues](https://github.com/formbricks/formbricks/issues) for more information.
 
 ## All Thanks To Our Contributors
 
-<a href="https://github.com/formbricks/formbricks/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=formbricks/formbricks" />
+<a  href="https://github.com/formbricks/formbricks/graphs/contributors">
+
+<img  src="https://contrib.rocks/image?repo=formbricks/formbricks"  />
+
 </a>
 
+<a  id="contact-us"></a>
+
 ## 📆 Contact us
 
 Let's have a chat about your survey needs and get you started.
 
-<a href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
+<a  href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img  alt="Book us with Cal.com"  src="https://cal.com/book-with-cal-dark.svg"  /></a>
+
+<a  id="license"></a>
 
 ## ⚖️ License
 
-Distributed under the AGPLv3 License. See `LICENSE` for more information.
+Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.
+
+<a  id="security"></a>
 
 ## 🔒 Security
 
-We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See `SECURITY.md` for more information.
+We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See [`SECURITY.md`](./SECURITY.md) for more information.
+
+<p  align="right"><a  href="#top">🔼 Back to top</a></p>

apps/demo/.env.example

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

apps/demo/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@formbricks/js": "workspace:*",
-    "@heroicons/react": "^2.0.18",
-    "next": "13.5.4",
+    "@heroicons/react": "^2.1.1",
+    "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/demo/pages/_app.tsx

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

apps/demo/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (

apps/demo/pages/app/index.tsx

@@ -1,10 +1,16 @@
-import formbricks from "@formbricks/js";
 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";
 
+declare const window: any;
+
 export default function AppPage({}) {
   const [darkMode, setDarkMode] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     if (darkMode) {
@@ -14,8 +20,34 @@ export default function AppPage({}) {
     }
   }, [darkMode]);
 
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+      const isUserId = window.location.href.includes("userId=true");
+      const userId = isUserId ? "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING" : undefined;
+      const attributes = isUserId ? { "Init Attribute 1": "eight", "Init Attribute 2": "two" } : undefined;
+      formbricks.init({
+        environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
+        apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
+        userId,
+        debug: true,
+        attributes,
+      });
+      window.formbricks = formbricks;
+    }
+
+    // Connect next.js router to Formbricks
+    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+      const handleRouteChange = formbricks?.registerRouteChange;
+      router.events.on("routeChangeComplete", handleRouteChange);
+
+      return () => {
+        router.events.off("routeChangeComplete", handleRouteChange);
+      };
+    }
+  });
+
   return (
-    <div className="h-full bg-white px-12 py-6 dark:bg-slate-800">
+    <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
       <div className="flex flex-col justify-between md:flex-row">
         <div>
           <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
@@ -29,7 +61,7 @@ export default function AppPage({}) {
         <button
           className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
           onClick={() => setDarkMode(!darkMode)}>
-          Toggle Dark Mode
+          {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
         </button>
       </div>
 
@@ -42,7 +74,7 @@ export default function AppPage({}) {
             </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 dark:text-slate-300 sm:flex sm:items-center sm:text-base">
+            <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">
@@ -204,25 +236,37 @@ export default function AppPage({}) {
             </div>
           </div>
           <div className="p-6">
-            <div>
-              <button
-                onClick={() => {
-                  formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
-                }}
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
-                Set User ID
-              </button>
-            </div>
+            {router.query.userId === "true" ? (
+              <div>
+                <button
+                  onClick={() => {
+                    window.location.href = "/app";
+                  }}
+                  className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                  Deactivate User Identification
+                </button>
+              </div>
+            ) : (
+              <div>
+                <button
+                  onClick={() => {
+                    window.location.href = "/app?userId=true";
+                  }}
+                  className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                  Activate User Identification
+                </button>
+              </div>
+            )}
             <div>
               <p className="text-xs text-slate-700 dark:text-gray-300">
-                This button sets an external{" "}
+                This button activates/deactivates{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/identify-users"
                   target="_blank"
                   className="underline dark:text-blue-500">
-                  user ID
+                  user identification
                 </a>{" "}
-                to &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
+                with the userId &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
               </p>
             </div>
           </div>

apps/demo/pages/signin/index.tsx

@@ -1,152 +0,0 @@
-import formbricks from "@formbricks/js";
-import { useRouter } from "next/router";
-import { FormEvent } from "react";
-
-export default function SiginPage() {
-  const router = useRouter();
-
-  const submitAction = (e: FormEvent) => {
-    e.preventDefault();
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      formbricks.setEmail("matti@example.com");
-      formbricks.setUserId("123456");
-      formbricks.setAttribute("Plan", "Premium");
-    }
-    router.push("/app");
-  };
-  return (
-    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
-          Sign in to your account
-        </h2>
-        <p className="mt-2 text-center text-sm text-gray-600">
-          Or{" "}
-          <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
-            start your 14-day free trial
-          </a>
-        </p>
-      </div>
-
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
-          <form className="space-y-6" onSubmit={submitAction}>
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
-                Email address
-              </label>
-              <div className="mt-2">
-                <input
-                  id="email"
-                  name="email"
-                  type="email"
-                  autoComplete="email"
-                  required
-                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                />
-              </div>
-            </div>
-
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
-                Password
-              </label>
-              <div className="mt-2">
-                <input
-                  id="password"
-                  name="password"
-                  type="password"
-                  autoComplete="current-password"
-                  required
-                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                />
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between">
-              <div className="flex items-center">
-                <input
-                  id="remember-me"
-                  name="remember-me"
-                  type="checkbox"
-                  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-                />
-                <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
-                  Remember me
-                </label>
-              </div>
-
-              <div className="text-sm">
-                <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
-                  Forgot your password?
-                </a>
-              </div>
-            </div>
-
-            <div>
-              <button
-                type="submit"
-                className="flex w-full justify-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
-                Sign in
-              </button>
-            </div>
-          </form>
-
-          <div className="mt-6">
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-gray-300" />
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="bg-white px-2 text-gray-500">Or continue with</span>
-              </div>
-            </div>
-
-            <div className="mt-6 grid grid-cols-3 gap-3">
-              <div>
-                <a
-                  href="#"
-                  className="inline-flex w-full justify-center rounded-md bg-white px-4 py-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0">
-                  <span className="sr-only">Sign in with Facebook</span>
-                  <svg className="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
-                    <path
-                      fillRule="evenodd"
-                      d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </a>
-              </div>
-
-              <div>
-                <a
-                  href="#"
-                  className="inline-flex w-full justify-center rounded-md bg-white px-4 py-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0">
-                  <span className="sr-only">Sign in with Twitter</span>
-                  <svg className="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
-                  </svg>
-                </a>
-              </div>
-
-              <div>
-                <a
-                  href="#"
-                  className="inline-flex w-full justify-center rounded-md bg-white px-4 py-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0">
-                  <span className="sr-only">Sign in with GitHub</span>
-                  <svg className="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
-                    <path
-                      fillRule="evenodd"
-                      d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,202 +0,0 @@
-import formbricks from "@formbricks/js";
-import Image from "next/image";
-import { useEffect, useState } from "react";
-import fbsetup from "../../public/fb-setup.png";
-
-export default function AppPage({}) {
-  const [darkMode, setDarkMode] = useState(false);
-
-  useEffect(() => {
-    if (darkMode) {
-      document.body.classList.add("dark");
-    } else {
-      document.body.classList.remove("dark");
-    }
-  }, [darkMode]);
-
-  return (
-    <div className="h-full bg-white px-12 py-6 dark:bg-slate-800">
-      <div className="flex flex-col justify-between md:flex-row">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
-            Formbricks In-product Survey Demo App
-          </h1>
-          <p className="text-slate-700 dark:text-slate-300">
-            This app helps you test your in-app surveys. You can create and test user actions, create and
-            update user attributes, etc.
-          </p>
-        </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)}>
-          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 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 dark:text-slate-300 sm:flex sm:items-center sm:text-base">
-              <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-400 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 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-gray-600 dark:bg-gray-800">
-            <h3 className="text-lg font-semibold dark:text-white">
-              Reset person / pull data from Formbricks app
-            </h3>
-            <p className="text-slate-700 dark:text-gray-300">
-              On formbricks.reset() a few things happen: <strong>New person is created</strong> and{" "}
-              <strong>surveys & no-code actions are pulled from Formbricks:</strong>.
-            </p>
-            <button
-              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-              onClick={() => {
-                formbricks.reset();
-              }}>
-              Reset
-            </button>
-            <p className="text-xs text-slate-700 dark:text-gray-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 className="p-6">
-            <div>
-              <button
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("Inner Text");
-                }}>
-                Inner Text
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">Inner Text only</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                id="css-id"
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("Inner Text + CSS ID");
-                }}>
-                Inner Text
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">Inner Text + Css ID</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                className="css-class mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("Inner Text + CSS Class");
-                }}>
-                Inner Text
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">Inner Text + CSS Class</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                id="css-id"
-                className="css-class mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("ID + Class");
-                }}>
-                ID and Class
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">ID + Class</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                id="css-id"
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("ID + Class");
-                }}>
-                ID only
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">ID only</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                className="css-class mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("Class only");
-                }}>
-                Class only
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">Class only</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                className="css-1 css-2 mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("Class + Class");
-                }}>
-                Class + Class
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">Class + Class</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/demo/styles/globals.css

@@ -1,3 +1,26 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Example on overriding packages/js colors */
+.dark {
+  --fb-brand-color: red;
+  --fb-brand-text-color: white;
+  --fb-border-color: green;
+  --fb-border-color-highlight: var(--slate-500);
+  --fb-focus-color: red;
+  --fb-heading-color: yellow;
+  --fb-subheading-color: green;
+  --fb-info-text-color: orange;
+  --fb-signature-text-color: blue;
+  --fb-survey-background-color: black;
+  --fb-accent-background-color: rgb(13, 13, 12);
+  --fb-accent-background-color-selected: red;
+  --fb-placeholder-color: white;
+  --fb-shadow-color: yellow;
+  --fb-rating-fill: var(--yellow-300);
+  --fb-rating-hover: var(--yellow-500);
+  --fb-back-btn-border: currentColor;
+  --fb-submit-btn-border: transparent;
+  --fb-rating-selected: black;
+}

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

@@ -1,14 +1,17 @@
-export const meta = {
+export const metadata = {
   title: "Implementing Code Actions in Formbricks | Real-time User Action Tracking",
   description:
-    "Dive into the world of Formbricks' code actions. Learn how to seamlessly integrate formbricks.track() method into your codebase, enabling real-time tracking of user actions like button clicks, visiting a specfic URL. Up your survey game with precise and exact triggers.",
+    "Dive into the world of Formbricks' code actions. Learn how to seamlessly integrate formbricks.track() method into your codebase, enabling real-time tracking of user actions like button clicks, visiting a specific URL. Up your survey game with precise and exact triggers.",
 };
 
 #### Actions
 
 # Code Actions
 
-Actions can also be set in the code base. You can fire an action using `formbricks.track()`
+Actions can also be set in the codebase to trigger surveys. Please add the code action first in the Formbricks web interface to be able to configure your surveys to use this action.
+
+After that you can fire an action using `formbricks.track()`
+
 <Col>
 <CodeGroup title="Track an action">
 
@@ -31,4 +34,4 @@ return <button onClick={handleClick}>Click Me</button>;
 ```
 
 </CodeGroup>
-</Col>
+</Col>

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

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

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

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Using Actions in Formbricks | Fine-tuning User Moments",
   description:
     "Dive deep into how actions in Formbricks help products and teams to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",

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

@@ -0,0 +1,88 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const metadata = {
+  title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly",
+  description:
+    "Unlock the full potential of Formbricks' Client Actions API. Create Actions right from the API.",
+};
+
+#### Client API
+
+# Actions API
+
+The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
+
+This API can be used to:
+- [Add Action for User](#add-action-for-user)
+
+
+---
+
+## Add Action for User {{ tag: 'POST', label: '/api/v1/client/<environment-id>/actions' }}
+
+Adds an Actions for a given User by their User ID
+
+<Row>
+  <Col>
+
+    ### Mandatory Body Fields
+
+    <Properties>
+      <Property name="userId" type="string">
+        The id of the user for whom the action is being created.
+      </Property>
+      <Property name="name" type="string">
+        The name of the Action being created.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/api/v1/client/<environment-id>/actions">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location --request POST 'https://app.formbricks.com/api/v1/client/<environment-id>/actions' \
+    --data-raw '{
+        "userId": "1",
+        "name": "new_action_v2",
+        "properties":{}
+
+    }'
+    ```
+
+    ```json {{ title: 'Example Request Body' }}
+    {
+        "userId": "1",
+        "name": "new_action_v3",
+        "properties":{}
+    }
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{ title: '200 Success' }}
+    {
+    "data": {}
+    }
+    ```
+
+    ```json {{ title: '400 Bad Request' }}
+    {
+        "code": "bad_request",
+        "message": "Fields are missing or incorrectly formatted",
+        "details": {
+            "name": "Required"
+        }
+    }
+    ```
+
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+

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

@@ -1,9 +1,9 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Public Client API Guide: Manage Survey Displays & Responses",
   description:
-    "Dive deep into Formbricks' Public Client API designed for customisation. This comprehensive guide provides detailed instructions on how to mark surveys as displayed as well as responded for individual persons, ensuring seamless client-side interactions without compromising data security.",
+    "Dive deep into Formbricks' Public Client API designed for customisation. This comprehensive guide provides detailed instructions on how to mark create and update survey displays for users.",
 };
 
 #### Client API
@@ -13,17 +13,17 @@ export const meta = {
 The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
 
 This set of API can be used to
-- [Mark Survey as Displayed](#mark-survey-as-displayed-for-person)
-- [Mark Survey as Responded](#mark-survey-as-responded-for-person)
+- [Create Display](#create-display)
+- [Update Display](#update-display)
 
 ---
 
-## Mark Survey as Displayed for Person {{ tag: 'POST', label: '/api/v1/client/diplays' }}
+## Create Display {{ tag: 'POST', label: '/api/v1/client/<environment-id>/diplays' }}
 
 <Row>
   <Col>
 
-    Mark a Survey as seen for a Person provided valid SurveyId and PersonId.
+    Create Display of survey for a user
 
     ### Mandatory Request Body JSON Keys
     <Properties>
@@ -32,25 +32,30 @@ This set of API can be used to
       </Property>
     </Properties>
 
+    ### Optional Request Body JSON Keys
     <Properties>
-      <Property name="personId" type="string">
-        Person ID for whom mark a survey as viewed
+      <Property name="userId" type="string">
+        Already existing user's ID to mark as viewed for a survey
+      </Property>
+      <Property name="responseId" type="string">
+        Already existing response's ID to link with this new Display
       </Property>
     </Properties>
 
+
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/api/v1/displays">
+    <CodeGroup title="Request" tag="POST" label="/api/v1/client/<environment-id>/displays">
 
     ```bash {{ title: 'cURL' }}
     curl -X POST \
     'https://app.formbricks.com/api/v1/client/displays' \
     -H 'Content-Type: application/json' \
     -d '{
-        "surveyId": "<survey-id>",
-        "personId": "<person-id>"
-    }'
+        "surveyId":"<survey-id>",
+        "userId":"<user-id>"
+      }'
     ```
 
     </CodeGroup>
@@ -60,31 +65,68 @@ This set of API can be used to
     ```json {{title:'200 Success'}}
     {
       "data": {
-        "id": "clm4qiygr00uqs60h5f5ola5h",
-        "createdAt": "2023-09-04T10:24:36.603Z",
-        "updatedAt": "2023-09-04T10:24:36.603Z",
-        "surveyId": "<survey-id>",
-        "person": {
-            "id": "<person-id>",
-            "attributes": {
-                "userId": "CYO600",
-                "email": "wei@google.com",
-                "Name": "Wei Zhu",
-                "Role": "Manager",
-                "Company": "Google",
-                "Experience": "2 years",
-                "Usage Frequency": "Daily",
-                "Company Size": "2401 employees",
-                "Product Satisfaction Score": "4",
-                "Recommendation Likelihood": "3"
-                },
-            "createdAt": "2023-08-08T18:05:01.483Z",
-            "updatedAt": "2023-08-08T18:05:01.483Z"
-            },
-        "status": "seen"
+        "id": "clphzz6oo00083zdmc7e0nwzi"
+      }
+    }
+    ```
+
+    ```json {{ title: '400 Bad Request' }}
+    {
+      "code": "bad_request",
+      "message": "Fields are missing or incorrectly formatted",
+      "details": {
+        "surveyId": "Required"
         }
     }
     ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Update Display {{ tag: 'PUT', label: '/api/v1/client/<environment-id>/diplays/<display-id>' }}
+
+<Row>
+  <Col>
+
+    Update a display by it's ID
+
+    ### Optional Request Body JSON Keys
+    <Properties>
+      <Property name="userId" type="string">
+        Already existing user's ID to mark as viewed for a survey
+      </Property>
+      <Property name="responseId" type="string">
+        Already existing response's ID to link with this new Display
+      </Property>
+    </Properties>
+
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="PUT" label="/api/v1/client/<environment-id>/displays/<display-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST \
+    'https://app.formbricks.com/api/v1/client/<environment-id>/displays/<display-id>' \
+    -H 'Content-Type: application/json' \
+    -d '{
+        "userId":"<user-id>"
+      }'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data": {}
+    }
+    ```
 
     ```json {{ title: '400 Bad Request' }}
     {
@@ -101,68 +143,3 @@ This set of API can be used to
 </Row>
 
 ---
-
-## Mark Survey as Responded for Person {{ tag: 'POST', label: '/api/v1/client/diplays/[displayId]/responded' }}
-
-<Row>
-  <Col>
-
-    Mark a Displayed Survey as responded for a Person.
-
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="POST" label="/api/v1/client/diplays/[displayId]/responded">
-
-    ```bash {{ title: 'cURL' }}
-    curl -X POST \
-    --location \
-    'https://app.formbricks.com/api/v1/client/displays/<displayId>/responded'
-    ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-
-    ```json {{title:'200 Success'}}
-    {
-      "data": {
-        "id": "<displayId>",
-        "createdAt": "2023-09-04T10:24:36.603Z",
-        "updatedAt": "2023-09-04T10:33:56.978Z",
-        "surveyId": "<surveyId>",
-        "person": {
-            "id": "<personId>",
-            "attributes": {
-                "userId": "CYO600",
-                "email": "wei@google.com",
-                "Name": "Wei Zhu",
-                "Role": "Manager",
-                "Company": "Google",
-                "Experience": "2 years",
-                "Usage Frequency": "Daily",
-                "Company Size": "2401 employees",
-                "Product Satisfaction Score": "4",
-                "Recommendation Likelihood": "3"
-            },
-            "createdAt": "2023-08-08T18:05:01.483Z",
-            "updatedAt": "2023-08-08T18:05:01.483Z"
-        },
-        "status": "responded"
-      }
-    }
-    ```
-
-    ```json {{ title: '500 Internal Server Error' }}
-    {
-      "code": "internal_server_error",
-      "message": "Database operation failed",
-      "details": {}
-    }
-    ```
-    </CodeGroup>
-
-  </Col>
-</Row>
-
----

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

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Formbricks API Overview: Public Client & Management API Breakdown",
   description:
     "Get a detailed understanding of Formbricks' dual API offerings: the unauthenticated Public Client API optimized for client-side tasks and the secured Management API for advanced account operations. Choose the perfect fit for your integration needs and ensure robust data handling",
@@ -10,13 +10,15 @@ export const meta = {
 
 Formbricks offers two types of APIs: the **Public Client API** and the **Management API**. Each API serves a different purpose, has different authentication requirements, and provides access to different data and settings.
 
-Checkout the [API Key Setup](/docs/api/api-key-setup) - to generate, store, or delete API Keys.
+Checkout the [API Key Setup](/docs/api/management/api-key-setup) - to generate, store, or delete API Keys.
 
 ## Public Client API
 
 The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
 
+- [Actions API](/docs/api/client/actions) - Create actions for a person
 - [Displays API](/docs/api/client/displays) - Mark Survey as Displayed or Responded for a Person
+- [People API](/docs/api/client/people) - Create & update people (e.g. attributes)
 - [Responses API](/docs/api/client/responses) - Create & update responses for a survey
 
 ## Management API
@@ -27,7 +29,7 @@ The Management API provides access to all data and settings that are visible in
 
 API requests made to the Management API are authorized using a personal API key. This key grants the same rights and access as if you were logged in at formbricks.com. It's essential to keep your API key secure and not share it with others.
 
-To generate, store, or delete an API key, follow the instructions provided on the following page [API Key](/docs/api/api-key-setup).
+To generate, store, or delete an API key, follow the instructions provided on the following page [API Key](/docs/api/management/api-key-setup).
 
 - [Action Class API](/docs/api/management/action-classes) - Create, Update, and Delete Action Classes
 - [Attribute Class API](/docs/api/management/attribute-classes) - Create, Update, and Delete Attribute Classes

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

@@ -0,0 +1,130 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const metadata = {
+  title: "Formbricks Public Client API Guide: Manage Users",
+  description:
+    "Dive deep into Formbricks' Public Client API designed for customisation. This comprehensive guide provides detailed instructions on creating and updating users to help in user identification.",
+};
+
+#### Client API
+
+# People API
+
+The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
+
+This set of API can be used to
+- [Create Person](#create-person)
+- [Update Person](#update-person)
+
+---
+
+## Create Person {{ tag: 'POST', label: '/api/v1/client/<environment-id>/people' }}
+
+<Row>
+  <Col>
+
+    Create User with your own User ID
+
+    ### Mandatory Request Body JSON Keys
+    <Properties>
+      <Property name="userId" type="string">
+        User ID which you would like to identify the person with
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/api/v1/client/<environment-id>/people">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST \
+    'https://app.formbricks.com/api/v1/client/<environment-id>/people' \
+    -H 'Content-Type: application/json' \
+    -d '{
+        "userId":"docs_user"
+    }'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data": {
+          "userId": "docs_user"
+        }
+    }
+    ```
+
+    ```json {{ title: '400 Bad Request' }}
+    {
+      "code": "bad_request",
+      "message": "Fields are missing or incorrectly formatted",
+      "details": {
+        "surveyId": "Required"
+      }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Update Person {{ tag: 'POST', label: '/api/v1/client/<environment-id>/people/<user-id>' }}
+
+<Row>
+  <Col>
+
+    Update Person by their User ID
+
+    ### Mandatory Request Body JSON Keys
+    <Properties>
+      <Property name="attributes" type="JSON">
+        Key Value pairs of attributes to add to the user
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/api/v1/client/<environment-id>/people/<user-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST \
+    --location \
+    'https://app.formbricks.com/api/v1/client/<environment-id>/people/<user-id>'
+    -H 'Content-Type: application/json' \
+    -d '{
+        "attributes":{
+            "welcome_to":"formbricks"
+        }
+    }'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data": {}
+    }
+    ```
+
+    ```json {{ title: '500 Internal Server Error' }}
+    {
+      "code": "internal_server_error",
+      "message": "Database operation failed",
+      "details": {}
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---

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

@@ -1,20 +1,24 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly",
   description:
     "Unlock the full potential of Formbricks' Responses API. From fetching to updating survey responses, our comprehensive guide helps you integrate and manage survey data efficiently without compromising security. Ideal for client-side interactions.",
 };
 
-#### Management API
+#### Client API
 
 # Responses API
 
 The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
 
+This set of API can be used to
+- [Create Response](#create-response)
+- [Update Response](#update-response)
+
 ---
 
-## Create a response {{ tag: 'POST', label: '/api/v1/client/responses' }}
+## Create Response {{ tag: 'POST', label: '/api/v1/client/<environment-id>/responses' }}
 
 Add a new response to a survey.
 
@@ -39,8 +43,8 @@ Add a new response to a survey.
     ### Optional Body Fields
 
     <Properties>
-      <Property name="personId" type="string" required>
-        Internal Formbricks id to identify the user sending the response
+      <Property name="userId" type="string" required>
+        Pre-existing User ID to identify the user sending the response
       </Property>
     </Properties>
 
@@ -49,20 +53,20 @@ Add a new response to a survey.
 | field name | required | default | description                                                                                                                                    |
 | ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
 | data       | yes      | -       | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
-| personId   | no       | -       | The person this response is connected to.                                                                                                      |
+| userId     | no       | -       | The person this response is connected to.                                                                                                      |
 | surveyId   | yes      | -       | The survey this response is connected to.                                                                                                      |
 | finished   | yes      | false   | Mark a response as complete to be able to filter accordingly.                                                                                  |
 
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/api/v1/client/responses">
+    <CodeGroup title="Request" tag="POST" label="/api/v1/client/<environment-id>/responses">
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses' \
+    curl --location --request POST 'https://app.formbricks.com/api/v1/client/<environment-id>/responses' \
     --data-raw '{
-      "surveyId":"clfqz1esd0000yzah51trddn8",
-      "personId": "clfqjny0v000ayzgsycx54a2c",
+      "surveyId":"cloqzeuu70000z8khcirufo60",
+      "userId": "1",
       "finished": true,
       "data": {
           "clfqjny0v0003yzgscnog1j9i": 10,
@@ -73,8 +77,8 @@ Add a new response to a survey.
 
     ```json {{ title: 'Example Request Body' }}
     {
-      "personId": "clfqjny0v000ayzgsycx54a2c",
-      "surveyId": "clfqz1esd0000yzah51trddn8",
+      "userId": "1",
+      "surveyId": "cloqzeuu70000z8khcirufo60",
       "finished": true,
       "data": {
           "clfqjny0v0003yzgscnog1j9i": 10,
@@ -90,19 +94,7 @@ Add a new response to a survey.
     ```json {{ title: '200 Success' }}
     {
     "data": {
-      "id": "clisyqeoi000219t52m5gopke",
-      "surveyId": "clfqz1esd0000yzah51trddn8",
-      "finished": true,
-      "person": {
-        "id": "clfqjny0v000ayzgsycx54a2c",
-        "attributes": {
-          "email": "me@johndoe.com"
-        }
-      },
-      "data": {
-          "clfqjny0v0003yzgscnog1j9i": 10,
-          "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
-        }
+        "id": "clp84xdld0002px36fkgue5ka",
       }
     }
     ```
@@ -124,7 +116,7 @@ Add a new response to a survey.
 
 ---
 
-## Update a response {{ tag: 'POST', label: '/api/v1/client/responses/<response-id>' }}
+## Update Response {{ tag: 'PUT', label: '/api/v1/client/<environment-id>/responses/<response-id>' }}
 
 Update an existing response in a survey.
 
@@ -134,6 +126,9 @@ Update an existing response in a survey.
     ### Mandatory Body Fields
 
     <Properties>
+      <Property name="finished" type="boolean">
+        Marks whether the response is complete or not.
+      </Property>
       <Property name="data" type="string">
         The data of the response as JSON object (key: questionId, value: answer).
       </Property>
@@ -149,27 +144,25 @@ Update an existing response in a survey.
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/api/v1/client/responses/<response-id>">
+    <CodeGroup title="Request" tag="PUT" label="/api/v1/client/<environment-id>/responses/<response-id>">
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses/<response-id>' \
+    curl --location --request PUT 'https://app.formbricks.com/api/v1/client/<environment-id>/responses/<response-id>' \
     --data-raw '{
-      "personId": "clfqjny0v000ayzgsycx54a2c",
-      "surveyId": "clfqz1esd0000yzah51trddn8",
-      "finished": true,
-      "data": {
-          "clggpvpvu0009n40g8ikawby8": 5,
+      "finished":false,
+        "data": {
+        "clfqjny0v0003yzgscnog1j9i": 10,
+        "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
       }
     }'
     ```
 
     ```json {{ title: 'Example Request Body' }}
     {
-      "personId": "clfqjny0v000ayzgsycx54a2c",
-      "surveyId": "clfqz1esd0000yzah51trddn8",
-      "finished": true,
-      "data": {
-          "clggpvpvu0009n40g8ikawby8": 5,
+      "finished":false,
+        "data": {
+        "clfqjny0v0003yzgscnog1j9i": 10,
+        "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
       }
     }
     ```
@@ -180,22 +173,7 @@ Update an existing response in a survey.
 
     ```json {{ title: '200 Success' }}
     {
-      "data": {
-        "id": "clisyqeoi000219t52m5gopke",
-        "surveyId": "clfqz1esd0000yzah51trddn8",
-        "finished": true,
-        "person": {
-          "id": "clfqjny0v000ayzgsycx54a2c",
-          "attributes": {
-            "email": "me@johndoe.com"
-          }
-        },
-        "data": {
-          "clfqjny0v0003yzgscnog1j9i": 10,
-          "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks",
-          "clggpvpvu0009n40g8ikawby8": 5
-        }
-      }
+      "data": {}
     }
     ```
 

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

@@ -1,10 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
-
-export const meta = {
-  title: "Formbricks People API: Fetch or Create Person Overview",
-  description:
-    "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interactions while maintaining data privacy.",
-};
+import {generateManagementApiMetadata} from "@/lib/utils"
+export const metadata = generateManagementApiMetadata("Action Class",["Fetch","Create","Delete"])
 
 #### Management API
 

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

@@ -3,7 +3,7 @@ import Image from "next/image";
 import AddApiKey from "./add-api-key.webp";
 import ApiKeySecret from "./api-key-secret.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks API Key: Setup and Testing",
   description:
     "This guide provides step-by-step instructions to generate, store, and delete API keys, ensuring safe and authenticated access to your Formbricks account.",

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

@@ -1,10 +1,7 @@
 import { Fence } from "@/components/shared/Fence";
+import {generateManagementApiMetadata} from "@/lib/utils"
 
-export const meta = {
-  title: "Formbricks People API: Fetch or Create Person Overview",
-  description:
-    "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interAttributes while maintaining data privacy.",
-};
+export const metadata = generateManagementApiMetadata("Attribute Class",["Fetch","Create","Delete"])
 
 #### Management API
 

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

@@ -1,9 +1,9 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
-  title: "Formbricks People API: Fetch or Create Person Overview",
+export const metadata = {
+  title: "Formbricks Me API: Fetch your environment details",
   description:
-    "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interactions while maintaining data privacy.",
+    "Dive into Formbricks' Me API within the Public Client API suite. Seamlessly fetch your own current environment details.",
 };
 
 #### Management API

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

@@ -1,10 +1,8 @@
 import { Fence } from "@/components/shared/Fence";
+import {generateManagementApiMetadata} from "@/lib/utils"
+
+export const metadata = generateManagementApiMetadata("People",["Fetch","Delete"])
 
-export const meta = {
-  title: "Formbricks People API: Fetch or Create Person Overview",
-  description:
-    "Dive into Formbricks' People API within the Public Client API suite, designed to work without authentication requirements. Seamlessly fetch or create a person by their userId and environmentId, optimizing client-side interactions while maintaining data privacy.",
-};
 
 #### Management API
 

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

@@ -1,10 +1,7 @@
 import { Fence } from "@/components/shared/Fence";
+import {generateManagementApiMetadata} from "@/lib/utils"
 
-export const meta = {
-  title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly",
-  description:
-    "Unlock the full potential of Formbricks' Responses API. From fetching to updating survey responses, our comprehensive guide helps you integrate and manage survey data efficiently without compromising security. Ideal for client-side interactions.",
-};
+export const metadata = generateManagementApiMetadata("Responses",["Fetch","Delete"])
 
 #### Management API
 
@@ -221,7 +218,7 @@ This set of API can be used to
     <CodeGroup title="Request" tag="DELETE" label="/api/v1/client/responses/<response-id>">
 
     ```bash {{ title: 'cURL' }}
-    curl -X DELETE https://app.formbricks.com/api/v1/management/resposnes/<response-id> \
+    curl -X DELETE https://app.formbricks.com/api/v1/management/responses/<response-id> \
      --header 'x-api-key: <your-api-key>'
     ```
 

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

@@ -1,10 +1,7 @@
 import { Fence } from "@/components/shared/Fence";
+import {generateManagementApiMetadata} from "@/lib/utils"
 
-export const meta = {
-  title: "Formbricks Surveys API Documentation - How to Retrieve All Surveys",
-  description:
-    "Explore the comprehensive guide to the Formbricks Surveys API. Learn how to effectively retrieve all the surveys in your environment with the necessary headers and API key setup. Includes sample request and response formats.",
-};
+export const metadata = generateManagementApiMetadata("Surveys",["Fetch","Create","Update","Delete"])
 
 #### Management API
 
@@ -14,6 +11,7 @@ This set of API can be used to
 - [List All Surveys](#list-all-surveys)
 - [Get Survey](#get-survey-by-id)
 - [Create Survey](#create-survey)
+- [Update Survey](#update-survey-by-id)
 - [Delete Survey](#delete-survey-by-id)
 
 <Note>You will need an API Key to interact with these APIs.</Note>
@@ -146,7 +144,7 @@ This set of API can be used to
                     {
                         "id": "lkjaxb73ulydzeumhd51sx9g",
                         "type": "openText",
-                        "headline": "What is the main benefit your receive from My Product?",
+                        "headline": "What is the main benefit you receive from My Product?",
                         "required": true
                     },
                     {
@@ -412,7 +410,7 @@ This set of API can be used to
     <CodeGroup title="Request" tag="POST" label="/api/v1/management/surveys">
 
     ```bash {{ title: 'cURL' }}
-    curl -X DELETE \
+    curl -X POST \
     'https://app.formbricks.com/api/v1/management/surveys' \
     --header \
     'x-api-key: <your-api-key>'
@@ -472,6 +470,121 @@ This set of API can be used to
 
 ---
 
+## Update Survey by ID {{ tag: 'PUT', label: '/api/v1/management/surveys/<survey-id>' }}
+
+<Row>
+  <Col>
+
+    Update a survey by its ID
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+    ### Body
+
+    <CodeGroup title="Request Body">
+    ```json {{ title: 'cURL' }}
+    {
+        "name": "My renamed Survey",
+        "redirectUrl":"https://formbricks.com",
+        "type":"web"
+    }
+    ```
+    </CodeGroup>
+
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="PUT" label="/api/v1/management/surveys/<survey-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST https://app.formbricks.com/api/v1/management/surveys/<survey-id> \
+     --header 'Content-Type: application/json' \
+     --header 'x-api-key: <your-api-key>' \
+     -d '{"name": "My renamed Survey"}'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+        "data": {
+            "id": "cloqzeuu70000z8khcirufo60",
+            "createdAt": "2023-11-09T09:23:42.367Z",
+            "updatedAt": "2023-11-09T09:23:42.367Z",
+            "name": "My renamed Survey",
+            "redirectUrl": null,
+            "type": "link",
+            "environmentId": "clonzr6vc0009z8md7y06hipl",
+            "status": "inProgress",
+            "welcomeCard": {
+                "html": "Thanks for providing your feedback - let's go!",
+                "enabled": false,
+                "headline": "Welcome!",
+                "timeToFinish": false
+            },
+            "questions": [
+                {
+                    "id": "l9rwn5nbk48y44tvnyyjcvca",
+                    "type": "openText",
+                    "headline": "Why did you leave the platform?",
+                    "required": true,
+                    "inputType": "text"
+                }
+            ],
+            "thankYouCard": {
+                "enabled": true,
+                "headline": "Thank you!",
+                "subheader": "We appreciate your feedback."
+            },
+            "hiddenFields": {
+                "enabled": true,
+                "fieldIds": []
+            },
+            "displayOption": "displayOnce",
+            "recontactDays": null,
+            "autoClose": null,
+            "delay": 0,
+            "autoComplete": 50,
+            "closeOnDate": null,
+            "surveyClosedMessage": null,
+            "productOverwrites": null,
+            "singleUse": {
+                "enabled": false,
+                "isEncrypted": true
+            },
+            "verifyEmail": null,
+            "pin": null,
+            "triggers": [],
+            "attributeFilters": []
+        }
+    }
+    ```
+    
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
 
 ## Delete Survey by ID {{ tag: 'DELETE', label: '/api/v1/management/surveys/<survey-id>' }}
 

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

@@ -1,8 +1,6 @@
-export const meta = {
-  title: "Formbricks Webhook API Documentation - List, Retrieve, Create, and Delete Webhooks",
-  description:
-    "Explore the comprehensive guide to the Formbricks Webhooks API. This is all you need to interact and play with the Formbricks Webhooks and integrate them into any third party app of your choice",
-};
+import {generateManagementApiMetadata} from "@/lib/utils"
+
+export const metadata = generateManagementApiMetadata("Webhook",["Fetch","Create","Delete"])
 
 #### Management API
 
@@ -20,7 +18,7 @@ This set of API can be used to
 - [Create Webhook](#create-webhook)
 - [Delete Webhook](#delete-webhook-by-id)
 
-And the detailed Webhook Paylod is elaborated [here](#webhook-payload).
+And the detailed Webhook Payload is elaborated [here](#webhook-payload).
 
 These APIs are designed to facilitate seamless integration of Formbricks with third-party systems. By making use of our webhook API, you can automate the process of sending data to these systems whenever significant events occur within your Formbricks environment.
 

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

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Guide for Setting Custom Attributes | Formbricks Documentation",
   description:
     "Learn how to set attributes in code using setAttribute function. Enhance user segmentation, target surveys effectively, and gather valuable insights for better decisions. Easily send user-specific details for better survey segmentation and gain deeper insights.",
@@ -10,9 +10,31 @@ export const meta = {
 
 One way to send attributes to Formbricks is in your code. In Formbricks, there are two special attributes for [user identification](/docs/attributes/identify-users)(user ID & email) and custom attributes. An example:
 
-## Setting Custom User Attributes
+## Setting during Initialization
+
+It's recommended to set custom user attributes directly during the initialization of Formbricks for better user identification.
+
+<Col>
+<CodeGroup title="Set custom attributes during initialization">
+
+```javascript
+formbricks.init({
+  environmentId: "<environment-id>",
+  apiHost: "<api-host>",
+  userId: "<user_id>",
+  attributes: {
+    plan: "free",
+  },
+});
+```
+
+</CodeGroup>
+</Col>
+
+## Setting independently
+
+You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.) anywhere in the user journey. Formbricks maintains a state of the current user inside the browser and makes sure attributes aren't sent to the backend twice.
 
-You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
 <Col>
 <CodeGroup title="Setting Plan to Pro">
 

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

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "User Identification in Formbricks | Enhancing Survey Feedback",
   description:
     "A comprehensive guide on identifying users in Formbricks without compromising privacy. Learn how to set User ID, email, and custom attributes to optimize survey targeting, recontact users, and control survey intervals, all while respecting user anonymity.",
@@ -10,23 +10,52 @@ export const meta = {
 
 At Formbricks, we value user privacy. By default, Formbricks doesn't collect or store any personal information from your users. However, we understand that it can be helpful for you to know which user submitted the feedback and also functionality like recontacting users and controlling the waiting period between surveys requires identifying the users. That's why we provide a way for you to share existing user data from your app, so you can view it in our dashboard.
 
-Once the Formbricks widget is loaded on your web app, our SDK exposes methods for identifying user attributes. Let's set it up!
+If you would like to use the User Identification feature of Formbricks, target surveys to specific user segments and see more information about the user who responded to a survey, you can identify users by setting a User ID, email, and custom attributes. This guide will walk you through how to do that.
 
 ## Setting User ID
 
-You can use the `setUserId` function to identify a user with any string. It's best to use the default identifier you use in your app (e.g. unique id from database) but you can also anonymize these as long as they are unique for every user. This function can be called multiple times with the same value safely and stores the identifier in local storage. We recommend you set the User ID whenever the user logs in to your website, as well as after the installation snippet (if the user is already logged in).
+To enable the User identification feature you need to set the `userId` in the init() call of Formbricks. Only when the `userId` is set the person will be visible in the Formbricks dashboard. The `userId` can be any string and it's best to use the default identifier you use in your app (e.g. unique id from database or the email address if it's unique) but you can also anonymize these as long as they are unique for every user.
+
 <Col>
 <CodeGroup title="Setting User ID">
 
 ```javascript
-formbricks.setUserId("USER_ID");
+formbricks.init({
+  environmentId: "<environment-id>",
+  apiHost: "<api-host>",
+  userId: "<user_id>",
+});
 ```
 
 </CodeGroup>
 </Col>
+
+## Enhanced Initialization with User Attributes
+
+In addition to setting the `userId`, Formbricks allows you to set user attributes right at the initialization. This ensures that your user data is seamlessly integrated from the start. Here's how you can include user attributes in the `init()` function:
+
+<Col>
+<CodeGroup title="Enhanced Initialization with User Attributes">
+
+```javascript
+formbricks.init({
+  environmentId: "<environment-id>",
+  apiHost: "<api-host>",
+  userId: "<user_id>",
+  attributes: {
+    // your custom attributes
+    Plan: "premium",
+  },
+});
+```
+
+</CodeGroup>
+</Col>
+
 ## Setting User Email
 
-You can use the setEmail function to set the user's email:
+The `userId` is the main identifier used in Formbricks and user identification is only enabled when it is set. In addition to the userId you can also set attributes that describes the user better. The email address can be set using the setEmail function:
+
 <Col>
 <CodeGroup title="Setting Email">
 
@@ -39,11 +68,12 @@ formbricks.setEmail("user@example.com");
 ### Setting Custom User Attributes
 
 You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
+
 <Col>
 <CodeGroup title="Setting Custom Attributes">
 
 ```javascript
-formbricks.setAttribute("attribute_key", "attribute_value");
+formbricks.setAttribute("Plan", "free");
 ```
 
 </CodeGroup>
@@ -51,6 +81,7 @@ formbricks.setAttribute("attribute_key", "attribute_value");
 ### Logging Out Users
 
 When a user logs out of your webpage, make sure to log them out of Formbricks as well. This will prevent new activity from being associated with an incorrect user. Use the logout function:
+
 <Col>
 <CodeGroup title="Logging out User">
 
@@ -59,4 +90,4 @@ formbricks.logout();
 ```
 
 </CodeGroup>
-</Col>
+</Col>

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

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Understanding User Attributes in Formbricks Surveys",
   description:
     "Dive into the importance of attributes in surveys. Learn how key-value pairs can significantly improve survey targeting, enhance feedback quality, and guide data-driven decisions with Formbricks.",

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

@@ -10,7 +10,7 @@ import RecontactOptions from "./recontact-options.webp";
 import PublishSurvey from "./publish-survey.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "Mastering Churn Surveys with Formbricks | Essential Tips & Steps",
   description: "Learn how to effectively utilize Formbricks' Churn Surveys to gain deeper insights into user departures. Dive into a step-by-step guide to craft, trigger, and optimize your churn surveys, ensuring you capture invaluable feedback at critical junctures",
 };
@@ -23,7 +23,7 @@ Churn is hard, but can teach you a lot. Whenever a user decides that your produc
 
 ## Purpose
 
-The Churn Survey is among the most effective ways to identify weaknesses in you offering. People were willing to pay but now are not anymore: What changed? Let’s find out!
+The Churn Survey is among the most effective ways to identify weaknesses in your offering. People were willing to pay but now are not anymore: What changed? Let’s find out!
 
 ## Preview
 

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

@@ -10,7 +10,7 @@ import SwitchToDev from "./switch-to-dev.webp";
 import WhenToAsk from "./when-to-ask.webp";
 import CopyIds from "./copy-ids.webp";
 
-export const meta = {
+export const metadata = {
   title:
     "Integrate Docs Feedback in Your Website: A Step-by-Step Guide on getting feedback on your Documentation with Formbricks",
   description:
@@ -40,7 +40,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 3. Connect to API
 4. Test
 
-### 1. Setting up Formbricks Cloud
+## 1. Setting up Formbricks Cloud
 
 1. To get started, create an account for the [Formbricks Cloud](https://app.formbricks.com/auth/signup).
 
@@ -74,7 +74,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 5. In the same way, you can change the Internal Question ID of the _Please elaborate_ question to **“additionalFeedback”** and the one of the _Page URL_ question to **“pageUrl”**.
 
 <Note>
-  ## Answers need to be identical If you want different answers than “Yes 👍” and “No 👎” you need update the
+  Answers need to be identical If you want different answers than “Yes 👍” and “No 👎” you need to update the
   choices accordingly. They have to be identical to the frontend we're building in the next step.
 </Note>
 
@@ -108,10 +108,10 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 
 **You’re all setup in Formbricks Cloud for now 👍**
 
-### 2. Build the frontend
+## 2. Build the frontend
 
 <Note>
-  ## Your frontend might work differently Your frontend likely looks and works differently. This is an example
+  Your frontend might work differently Your frontend likely looks and works differently. This is an example
   specific to our tech stack. We want to illustrate what you should consider building yours 😊
 </Note>
 
@@ -311,7 +311,7 @@ return (
 </Col>
 ## 3. Connecting to the Formbricks API
 
-The last step is to hook up your sparkling new frontend to the Formbricks API. To do so, we followed the “[Create Response](/docs/client-api/create-response)” and “[Update Response](/docs/client-api/update-response)” pages in our docs.
+The last step is to hook up your sparkling new frontend to the Formbricks API. To do so, we followed the “[Create Response](/docs/api/client/responses#create-a-response)” and “[Update Response](/docs/api/client/responses#update-a-response)” pages in our docs.
 
 Here is the code for the `handleFeedbackSubmit` function with comments:
 <Col>

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

@@ -9,7 +9,7 @@ import Publish from "./publish.webp";
 import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "Setting Up Feature Chaser Surveys with Formbricks: A Comprehensive Guide",
   description: "Learn how to harness the power of Formbricks to gather targeted user feedback on specific features. Dive deep into creating, triggering, and publishing the Feature Chaser survey to enhance your product with actionable insights for specific users.",
 };
@@ -22,7 +22,7 @@ Following up on specific features only makes sense with very targeted surveys. F
 
 ## Purpose
 
-Product analytics never tell you why a feature is used - and why not. Following up on specfic features with highly relevant questions is a great way to gather feedback and improve your product.
+Product analytics never tell you why a feature is used - and why not. Following up on specific features with highly relevant questions is a great way to gather feedback and improve your product.
 
 ## Preview
 

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

@@ -11,7 +11,7 @@ import PublishSurvey from "./publish-survey.webp";
 import SelectAction from "./select-feedback-button-action.webp";
 import RecontactOptions from "./set-recontact-options.webp";
 
-export const meta = {
+export const metadata = {
   title: "Implementing the Feedback Box with Formbricks: A Step-by-Step Tutorial",
   description: "Unlock user insights effortlessly! Discover how to set up the Feedback Box in your app using Formbricks, allowing your users to provide real-time feedback. Follow our comprehensive guide to enhance user experience and respond rapidly to feedback",
 };

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

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

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

@@ -12,7 +12,7 @@ import Publish from "./publish-survey.webp";
 import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "Maximize User Interview Participation with In-app Interview Prompts",
   description: "Engage with your power users seamlessly using Formbricks' In-app Interview Prompt. Ditch traditional email invites and experience way more more respondents. Dive into our comprehensive guide on setting up auto-scheduled interviews today and enhance your user understanding",
 };
@@ -112,7 +112,7 @@ To create the trigger to show your Interview Prompt, go to the “Audience” ta
   appear in your Actions overview as long as the SDK is embedded.
 </Note>
 
-Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display on a page visit since you already filter who sees the prompt by attributes.
+Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display it on a page visit since you already filter who sees the prompt by attributes.
 
 1. **pageURL:** Whenever a user visits a page the survey will be displayed, as long as the other conditions match. Other conditions are pre-segmentation, if this user has seen a survey in the past 2 weeks, etc.
 

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

@@ -9,7 +9,7 @@ import Publish from "./publish.webp";
 import RecontactOptions from "./recontact-options.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "How to Set Up a Product-Market Fit Survey Using Formbricks - Step-by-Step Guide",
   description: "Learn to leverage Formbricks to create and implement a Product-Market Fit survey in your web app. Follow our detailed step-by-step guide to measure and understand your PMF effectively. Ensure high data quality, efficient triggers, and actionable insights.",
 };

apps/formbricks-com/app/docs/contributing/creating-a-service/page.mdx

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

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

@@ -2,9 +2,10 @@ import Image from "next/image";
 
 import DemoApp from "./demoapp.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Demo App Guide: Play around with Formbricks",
-  description: "To test in-app surveys, trigger actions and set attributes, you can use the Demo App. This guide provides hands-on examples of sending both code and no-code actions",
+  description:
+    "To test in-app surveys, trigger actions and set attributes, you can use the Demo App. This guide provides hands-on examples of sending both code and no-code actions",
 };
 
 #### Contributing
@@ -13,13 +14,14 @@ export const meta = {
 
 To play around with the in-app [User Actions](/docs/actions/why), you can use the Demo App. It's a simple React app that you can run locally and use to trigger actions and set [Attributes](/docs/attributes/why).
 
-<Image src={DemoApp} alt="Demo App Preview" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+<Image src={DemoApp} alt="Demo App Preview" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 ## Functionality
 
 ### Code Action
 
 This button sends a <a href="/docs/actions/code">Code Action</a> to the Formbricks API called 'Code Action'. You will find it in the Actions Tab.
+
 <Col>
 <CodeGroup title="Track Code action">
 
@@ -32,6 +34,7 @@ formbricks.track("Code Action");
 ### No Code Action
 
 This button sends a <a href="/docs/actions/no-code">No Code Action</a> as long as you created it beforehand in the Formbricks App. For it to work, you need to add the No Code Action within Formbricks.
+
 <Col>
 <CodeGroup title="Track No-Code action">
 
@@ -44,6 +47,7 @@ This button sends a <a href="/docs/actions/no-code">No Code Action</a> as long a
 ### Set Plan to "Free"
 
 This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Free'. If the attribute does not exist, it creates it.
+
 <Col>
 <CodeGroup title="Set Plan to Free">
 
@@ -56,6 +60,7 @@ formbricks.setAttribute("Plan", "Free");
 ### Set Plan to "Paid"
 
 This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Paid'. If the attribute does not exist, it creates it.
+
 <Col>
 <CodeGroup title="Set Plan to Paid">
 
@@ -68,6 +73,7 @@ formbricks.setAttribute("Plan", "Paid");
 ### Set Email
 
 This button sets the <a href="/docs/attributes/identify-users">user email</a> 'test@web.com'
+
 <Col>
 <CodeGroup title="Set Email">
 
@@ -79,13 +85,14 @@ formbricks.setEmail("test@web.com");
 </Col>
 ### Set UserId
 
-This button sets an external <a href="/docs/attributes/identify-users">user ID</a> to 'THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING'
+This button sets an external <a href="/docs/attributes/identify-users">user ID</a> in the Formbricks init call to 'THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING'
+
 <Col>
 <CodeGroup title="Set User ID">
 
 ```tsx
-formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
+userId: "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
 ```
 
 </CodeGroup>
-</Col>
+</Col>

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

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

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

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import CorsHandling from "./cors-handling-in-api.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Code Contribution Guide: Best Practices and Standards",
   description:
     "Effortlessly Navigate Your Contribution Journey with Formbricks' Coding Guidelines and PR Review Process",
@@ -81,7 +81,7 @@ You should store constants in `packages/lib/constants`
 
 ## Types should be in the packages folder
 
-You should store type in `packages/types/v1`
+You should store type in `packages/types`
 
 ## Read environment variables from `.env.mjs`
 
@@ -113,9 +113,21 @@ Add a short video or screenshots of what your PR achieves. Loom is a great way o
 
 ### Code Quality & Styling
 
-All submitted code must match our **[code styling](https://www.notion.so/Code-Styling-65ddc5dd2deb4b28a9876f1f7cc89ca9?pvs=21)** standards. We will reject pull requests that differ significantly from our standardised code styles.
+It's really important to keep our code styles consistent so that the repository is easy to read and work with.
 
-All code is automatically checked by Github actions, and will notify you if there are any issues with the code that you submit. We require that code passes these quality checks before merging.
+We rely on various style guides from other amazing companies because they are widely used and we genuinely enjoy working with them.
+
+While we don't expect you to memorize every rule in these style guides, they serve as valuable references for how your code should be styled. However, if your code style significantly deviates from these guides, we may have to reject your pull request.
+
+#### ESLint & Prettier
+
+Formbricks uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
+
+#### HTML & CSS
+
+We use the **[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)** for any HTML and CSS markup. However, exceptions to the HTML guide apply where JSX differentiates from standard HTML.
+
+**Note:** We will reject pull requests that differ significantly from our standardised code styles. All code is automatically checked by Github actions, and will notify you if there are any issues with the code that you submit. We require that code passes these quality checks before merging.
 
 ### PR review process
 

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

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Formbricks Open Source Contribution Guide: How to Enhance yourself and Contribute to Formbricks",
   description:
     "Join the Formbricks community and learn how to effectively contribute. From raising issues and feature requests to creating PRs, discover the best practices and communicate with our responsive team on Discord",

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

@@ -1,91 +1,394 @@
-export const meta = {
+import Image from "next/image";
+
+import GitpodAuth from "./gitpod/auth.webp";
+import GitpodNewWorkspace from "./gitpod/new-workspace.webp";
+import GitpodPorts from "./gitpod/ports.webp";
+import GitpodPreparing from "./gitpod/preparing.webp";
+import GitpodRunning from "./gitpod/running.webp";
+
+import GithubCodespaceEnvFile from "./github-codespaces/env.webp";
+import GithubCodespaceLoading from "./github-codespaces/loading.webp";
+import GithubCodespaceNew from "./github-codespaces/new.webp";
+import GithubCodespacePorts from "./github-codespaces/ports.webp";
+import GithubCodespaceRun from "./github-codespaces/run.webp";
+import GithubCodespaceTerminal from "./github-codespaces/terminal.webp";
+
+export const metadata = {
   title: "Formbricks Development Setup: Complete Guide to Local Environment Configuration for Dev",
-  description: "Step-by-step guide to setting up your local development environment for Formbricks. Includes installing essential tools like Node.JS, pnpm, and Docker, and accessing the entire Formbricks stack including the Demo app and the main website",
+  description:
+    "Step-by-step guide to setting up a development environment for Formbricks. We officially support Gitpod and Github Codespaces for quick setup. Our advanced users can also setup Formbricks locally on their machine.",
 };
 
 #### Contributing
 
 # Setup Dev Environment
 
+We currently officially support the below methods to set up your development environment for Formbricks.
+
+<Note>
+  Both the below cloud IDEs have a **generous free tier** to explore and develop! But make sure to not overuse
+  the machines as Formbricks will not be responsible for any charges incurred.
+</Note>
+
+### [GitPod](#gitpod)
+
+This will open a fully configured workspace in your browser with all the necessary dependencies already installed. Click the button below to open this project in Gitpod. For a detailed guide, visit the [Gitpod Setup Guide](#gitpod-guide) section below.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://Github.com/formbricks/formbricks)
+
+### [Github Codespaces](#Github-codespaces)
+
+This will open a Github VSCode Interface on the cloud for you. This setup will have the Formbricks codebase and all the dependencies installed. Click the button below to configure your instance and open the project in Github Codespaces. For a detailed guide, visit the [Github Codespaces Setup Guide](#github-codespaces-guide) section below.
+
+[![Open in Github Codespaces](https://img.shields.io/badge/Open%20in-Github%20Codespaces-blue?logo=Github)](https://Github.com/codespaces/new?machine=standardLinux32gb&repo=500289888&ref=main&devcontainer_path=.devcontainer%2Fdevcontainer.json&location=EastUs2)
+
+### [Local Machine](#local-machine-setup)
+
+This will install the Formbricks codebase and all the dependencies on your local machine. Note that this method is recommended **only for advanced users**. If you're an advanced user, access the steps for [Local Machine Setup here](#local-machine-setup).
+
+<Note>
+  For a smooth experience, we suggest the above cloud IDE methods. Assistance with setup issues on your local
+  machine may be limited due to varying factors like OS and permissions.
+</Note>
+
+## Gitpod Guide
+
+    **Building custom image for the workspace:**
+    - This includes : Installing `yq` and `turbo` globally before the workspace starts. This is accomplished within the `.gitpod.Dockerfile` along with starting upon a base custom image building on [workspace-full](https://hub.docker.com/r/gitpod/workspace-full/dockerfile).
+
+    **Initialization of Formbricks:**
+     - During the prebuilds phase, we initialize Formbricks by performing the following tasks:
+        1. Setting up environment variables.
+        2. Installing monorepo dependencies.
+        3. Installing Docker images by extracting them from the `packages/database/docker-compose.yml` file.
+        4. Building the @formbricks/js component.
+     - When the workspace starts:
+        1. Wait for the web and demo apps to launch on Gitpod. This automatically opens the `apps/demo/.env` file. Utilize dynamic localhost URLs (e.g., `localhost:3000` for signup and `localhost:8025` for email confirmation) to configure `NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID`. After creating your account and finding the `ID` in the URL at `localhost:3000`, replace `YOUR_ENVIRONMENT_ID` in the `.env` file located in `app/demo`.
+
+    **Web Component Initialization:**
+     - we initialize the @formbricks/web component during prebuilds. This involves:
+        1. Installing build dependencies for the `@formbricks/web#go` task from turbo.json in prebuilds to save time.
+        2. Starting PostgreSQL and Mailhog containers for running migrations in prebuilds.
+        3. To prevent the "Init" task from running indefinitely due to prebuild rules, a cleanup `docker compose down` step i.e. `db:down` is added to `turbo.json`. This step is designed to halt the execution of containers that are currently running.
+     - When the workspace starts:
+        1. Initializing environment variables.
+        2. Replacing `NEXT_PUBLIC_WEBAPP_URL` and `NEXTAUTH_URL` to take in Gitpod URL's ports when running on VSCode browser.
+        3. Starting the `@formbricks/web` dev environment.
+
+    **Demo Component Initialization:**
+     - Similar to the web component, the demo component is also initialized during prebuilds. This includes:
+        1. Installing build dependencies for the `formbricks/demo#go` task from turbo.json in prebuilds to save time.
+        2. Caching hits and replaying builds from the `@formbricks/js` component.
+     - When the workspace starts:
+        1. Initializing environment variables.
+        2. Replaces `NEXT_PUBLIC_FORMBRICKS_API_HOST` to take in Gitpod URL's ports when running on VSCode browser.
+        3. Starting the `@formbricks/demo` dev environment.
+
+    **Github Prebuilds Configuration:**
+     - This configures Github Prebuilds for the master branch, pull requests, and adding comments. This helps automate the prebuild process for the specified branches and actions.
+
+    **VSCode Extensions:**
+     - This includes a list of VSCode extensions that are added to the configuration when using Gitpod. These extensions can enhance the development experience within Gitpod.
+
+### 1. Browser Redirection
+
+After clicking the one-click setup button, Gitpod will open a new tab or window. Please ensure that your browser allows redirection to successfully access the services:
+
+### 2. Authorizing in Gitpod
+
+<Image src={GitpodAuth} alt="Gitpod Auth Page" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />-
+This is the Gitpod Authentication Page. It appears when you click the "Open in GitPod" button and Gitpod needs
+to authenticate your access to the workspace. Click on 'Continue With Github' to authorize your GitPod session.
+
+### 3. Creating a New Workspace
+
+<Image
+  src={GitpodNewWorkspace}
+  alt="Gitpod New workspace Page"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+- After authentication, Gitpod asks to create a new workspace for you. This page displays the configurations of
+your workspace. - You can use either choose either VS Code Browser or VS Code Desktop editor with the 'Standard
+Class' for your workspace class. - If you opt for the VS Code Desktop, follow the following steps 1. Gitpod will
+prompt you to grant access to the VSCode app. Once approved, install the GitPod extension from the VSCode Marketplace
+and follow the prompts to authorize the integration. 2. Change the `WEBAPP_URL` and the `NEXTAUTH_URL` to `https://localhost:3000`
+
+### 4. Gitpod preparing the created Workspace
+
+<Image
+  src={GitpodPreparing}
+  alt="Gitpod Preparing workspace Page"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+- Gitpod is preparing your workspace with all the necessary dependencies and configurations. You will see this
+page while Gitpod sets up your development environment.
+
+### 5. Gitpod running the Workspace
+
+<Image
+  src={GitpodRunning}
+  alt="Gitpod Running Workspace Page"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+- Once the workspace is fully prepared, voila, it enters the running state. You can start working on your project
+in this environment.
+
+### Ports and Services
+
+Here are the ports and corresponding URLs for the services within your Gitpod environment:
+
+- **Port 3000**:
+
+  - **Service**: Demo App
+  - **Description**: This port hosts the demo application of your project. You can access and interact with your application's demo by navigating to this port.
+
+- **Port 3001**:
+
+  - **Service**: Formbricks website
+  - **Description**: This port hosts the [Formbricks](https://formbricks.com) website, which contains documents, pricing, blogs, best practices, and concierge service.
+
+- **Port 3002**:
+
+  - **Service**: Formbricks In-product Survey Demo App
+  - **Description**: This app helps you test your in-app surveys. You can create and test user actions, create and update user attributes, etc.
+
+- **Port 5432**:
+
+  - **Service**: PostgreSQL Database Server
+  - **Description**: The PostgreSQL DB is hosted on this port.
+
+- **Port 1025**:
+
+  - **Service**: SMPT server
+  - **Description**: SMTP Server for sending and receiving email messages. This server is responsible for handling email communication.
+
+- **Port 8025**:
+  - **Service**: Mailhog
+
+### Accessing port URLs
+
+1. **Direct URL Composition**:
+
+- You can access the dedicated port URL by pre-pending the port number to the workspace URL.
+- For example, if you want to access port 3000, you can use the URL format: `3000-yourworkspace.ws-eu45.gitpod.io`.
+
+2. **Using [gp CLI](https://www.gitpod.io/docs/references/gitpod-cli)**:
+
+- Gitpod provides a convenient command, `gp url`, to quickly retrieve the URL for a specific port.
+- Simply use the command followed by the desired port number. For example, to get the URL for port 3000, run: `gp url 3000`.
+
+3. **Listing All Open Port URLs**:
+
+- If you prefer to see a list of all open port URLs at once, you can use the `gp ports list` command.
+- Running this command will display a list of ports along with their corresponding URLs.
+
+4. **Viewing All Ports in Panel**:
+
+- Gitpod also offers a user-friendly 'Ports' tab in the Gitpod panel.
+- Click on the 'Ports' tab to view a list of all open ports and their respective URLs.
+
+{" "}
+
+<Image
+  src={GitpodPorts}
+  alt="Gitpod Ports tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+These URLs and port numbers represent various services and endpoints within your Gitpod environment. You can access and interact with these services by the Port URL for the respective service.
+
+---
+
+## Github Codespaces Guide
+
+1. After clicking the one-click setup button, you will be redirected to the Github Codespaces page. Review the configuration and click on the 'Create Codespace' button to create a new Codespace.
+
+<Image
+  src={GithubCodespaceNew}
+  alt="New Github Codespace"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. This will start loading the Codespace. Keep in mind this might take a few minutes to complete depending on your internet connection and the instance availability.
+
+<Image
+  src={GithubCodespaceLoading}
+  alt="Loading Github Codespace"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. Once the Codespace is loaded, you will be redirected to the VSCode editor. You can start working on your project in this environment.
+
+4. Make the changes you want to, and now, to run the app, we first need to configure the .env file. Copy the .env.example and edit the variables as mentioned in the file itself.
+
+<Image
+  src={GithubCodespaceEnvFile}
+  alt="Github Codespace Env File"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+5. Once you have configured the .env, it's now time to run the app and see the changes. Lets open the terminal first
+
+<Image
+  src={GithubCodespaceTerminal}
+  alt="Github Codespace Open Terminal"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+6. Now, run the following command to run the app
+
+<Col>
+<CodeGroup title="Run the entire Formbricks Stack">
+
+```bash
+pnpm dev
+```
+
+</CodeGroup>
+</Col>
+
+<Image
+  src={GithubCodespaceRun}
+  alt="Run on Github Codespace"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+7. Monitor the logs in the terminal and once you see the following, you are good to go!
+
+<Col>
+<CodeGroup title="The WebApp is running">
+
+```bash
+@formbricks/web:dev:   ▲ Next.js 13.5.6
+@formbricks/web:dev:   - Local:        http://localhost:3000
+@formbricks/web:dev:   - Environments: .env
+@formbricks/web:dev:   - Experiments (use at your own risk):
+@formbricks/web:dev:      · serverActions
+@formbricks/web:dev:
+@formbricks/web:dev:  ✓ Ready in 9.4s
+```
+
+</CodeGroup>
+</Col>
+
+8. Right next to the Terminal, you will see a **Ports** tab, click on it to see the ports and their respective URLs. Now access the Forwarded Address for port 3000 and you should be able to visit your Formbricks App!
+
+<Image
+  src={GithubCodespacePorts}
+  alt="Github Codespace Ports"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Now make the changes you want to and see them live in action!
+
+---
+
+## Local Machine Setup
+
+<Note>
+The below only works for **Mac**, **Linux** & **WSL2** on Windows (not on pure Windows)!
+
+This method is recommended **only for advanced users** & we won't be able to provide official support for this.
+
+</Note>
+
 To get the project running locally on your machine you need to have the following development tools installed:
 
-- Node.JS (we recommend v18)
+- Node.JS (we recommend v20)
 - [pnpm](https://pnpm.io/)
 - [Docker](https://www.docker.com/) (to run PostgreSQL / MailHog)
 
-1. Clone the project:
+1. Clone the project & move into the directory:
+
 <Col>
    <CodeGroup title="Git clone Formbricks monorepo">
 
-   ```bash
-   git clone https://github.com/formbricks/formbricks
-   ```
+```bash
+git clone https://github.com/formbricks/formbricks && cd formbricks
+```
 
    </CodeGroup>
 </Col>
-   and move into the directory
-<Col>
-   <CodeGroup title="Move into the Formbricks monorepo">
 
-   ```bash
-   cd formbricks
-   ```
+2. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
 
-   </CodeGroup>
-</Col>
-1. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
 <Col>
    <CodeGroup title="Install dependencies via pnpm">
 
-   ```bash
-   pnpm install
-   ```
+```bash
+pnpm install
+```
 
    </CodeGroup>
 </Col>
-1. Create a `.env` file based on `.env.example`. It's already preset to work with the docker-compose setup but you can also change values if needed.
+
+3. Create a `.env` file based on `.env.example`. It's already preset to work with the local development setup but you can also change values if needed.
+
 <Col>
    <CodeGroup title="Define environment variables">
 
-   ```bash
-   cp .env.example .env
-   ```
+```bash
+cp .env.example .env
+```
 
    </CodeGroup>
 </Col>
-1. Generate a secret value mandatory to be set for the key ENCRYPTION_KEY in the .env file. You can use the following command to generate the random string of required length:
+
+4. Generate & set some secret values mandatory for the ENCRYPTION_KEY & NEXTAUTH_SECRET in the .env file. You can use the following command to generate the random string of required length:
+
 <Col>
    <CodeGroup title="Set value of ENCRYPTION_KEY">
 
-   ```bash
-   openssl rand -base64 24
-   ```
+```bash
+sed -i '/^ENCRYPTION_KEY=/c\ENCRYPTION_KEY='$(openssl rand -hex 32) .env
+sed -i '/^NEXTAUTH_SECRET=/c\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env
+```
 
    </CodeGroup>
 </Col>
 
-1. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the formbricks dev setup:
+5. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the Formbricks dev setup:
+
 <Col>
    <CodeGroup title="Start Formbricks Dev Setup">
 
-   ```bash
-   pnpm go
-   ```
+```bash
+pnpm go
+```
 
    </CodeGroup>
 </Col>
    This starts the Formbricks main app (plus all its dependencies) as well as the following services using Docker:
 
-   - a `postgres` container for hosting your database,
-   - a `mailhog` container that acts as a mock SMTP server and shows received mails in a web UI (forwarded to your host's `localhost:8025`)
+- a `postgres` container for hosting your database,
+- a `mailhog` container that acts as a mock SMTP server and shows received mails in a web UI (forwarded to your host's `localhost:8025`)
+- Demo App at [http://localhost:3002](http://localhost:3002)
+- Landing Page at [http://localhost:3001](http://localhost:3001)
 
-   **You can now access the Formbricks app on [http://localhost:3000](http://localhost:3000)**. You will be automatically redirected to the login. To use your local installation of formbricks, create a new account.
+**You can now access the Formbricks app on [http://localhost:3000](http://localhost:3000)**. You will be automatically redirected to the login. To use your local installation of formbricks, create a new account.
 
-   For viewing the confirmation email and other emails the system sends you, you can access mailhog at [http://localhost:8025](http://localhost:8025)
+{" "}
+
+<Note>
+  A fresh setup does not have a default account. Please create a new account and proceed accordingly.
+</Note>
+
+For viewing the emails sent by the system, you can access mailhog at [http://localhost:8025](http://localhost:8025)
 
 ### Build
 
 To build all apps and packages and check for build errors, run the following command:
+
 <Col>
 <CodeGroup title="Build Formbricks stack">
 
@@ -95,30 +398,7 @@ pnpm build
 
 </CodeGroup>
 </Col>
-### Access Demo app
 
-To run the [Demo app](/docs/contributing/demo), run the following command in a separate terminal window:
-<Col>
-<CodeGroup title="Start Formbricks Demo App">
+---
 
-```bash
-pnpm dev --filter=demo
-```
-
-</CodeGroup>
-</Col>
-You can now access the Demo app on [http://localhost:3002](http://localhost:3002).
-
-### Access Formbricks website
-
-If you want to make changes to the Formbricks website, e.g. to update the documentation, run the following command in a separate terminal window:
-<Col>
-<CodeGroup title="Start Formbricks Website">
-
-```bash
-pnpm dev --filter=formbricks-com
-```
-
-</CodeGroup>
-</Col>
-You can now access the Formbricks website on [http://localhost:3001](http://localhost:3001).
+Still can’t figure it out? Join our [Discord](https://discord.com/invite/3YFcABF2Ts)!

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

@@ -4,7 +4,7 @@ import ClearAppData from "./clear-app-data.webp";
 import UncaughtPromise from "./uncaught-promise.webp";
 import Logout from "./logout.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Troubleshooting Guide: How to Solve & Debug Common Issues",
   description:
     "Facing issues with Formbricks? This troubleshooting guide covers frequently encountered problems, from Prisma migrations to package errors and more. Detailed solutions, accompanied by visual aids, ensure a smoother user experience with Formbricks",

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

@@ -1,6 +1,6 @@
 import FAQ from "@/components/docs/docsFaq";
 
-export const meta = {
+export const metadata = {
   title: "FAQ",
   description: "Frequently Asked Questions about Formbricks and how to use it.",
 };

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

@@ -13,7 +13,7 @@ export const metadata = {
 
 # Framework Guides
 
-One can integrate Formbricks into their app using multipe options! Checkout the options below that we provide! If you are looking
+One can integrate Formbricks into their app using multiple options! Checkout the options below that we provide! If you are looking
 for something else, please [join our Discord!](https://formbricks.com/discord) and we would be glad to help. {{ className: 'lead' }}
 
 <Libraries />
@@ -24,7 +24,7 @@ for something else, please [join our Discord!](https://formbricks.com/discord) a
 
 Before getting started, make sure you have:
 
-1. A web application in your desired framework set up and running.
+1. A web application in your desired framework is set up and running.
 2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings:
 
 <Image
@@ -45,7 +45,7 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
 ```html {{ title: 'index.html' }}
 <!-- START Formbricks Surveys -->
 <script type="text/javascript">
-    !function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.1.0/dist/index.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
+    !function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.4.0/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
     </script>
 <!-- END Formbricks Surveys -->
 ```
@@ -64,7 +64,7 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
   </Property>
 </Properties>
 
-Refer our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer to our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ---
 
@@ -135,7 +135,7 @@ The app initializes 'formbricks' when it's loaded in a browser environment (due
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-Refer our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer to our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ---
 
@@ -213,7 +213,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 </CodeGroup>
 </Col>
 
-Refer our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
+Refer to our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
 
 ### Pages Directory
 
@@ -252,7 +252,7 @@ export default function App({ Component, pageProps }: AppProps) {
 
 </CodeGroup>
 </Col>
-Refer our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
+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
 
@@ -364,7 +364,7 @@ router.afterEach((to, from) => {
   </Property>
 </Properties>
 
-Refer our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer to our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ## Validate your setup
 

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

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

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

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

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

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

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

@@ -9,9 +9,10 @@ import ListLinkedSurveys from "./list-linked-surveys.webp";
 import DeleteConnection from "./delete-connection.webp";
 import Image from "next/image";
 
-export const meta = {
-  title: "n8n Setup",
-  description: "Wire up Formbricks with n8n and 350+ other apps",
+export const metadata = {
+  title: "Google Sheets",
+  description:
+    "The Google Sheets integration allows you to automatically send responses to a Google Sheet of your choice.",
 };
 
 #### Integrations
@@ -62,7 +63,7 @@ Before the next step, make sure that you have a Formbricks Survey with at least
 
 </Note>
 
-6. Now click on the "Link New Sheet" button to link a new Google Sheet with Formbricks and a modal will open up.
+5. Now click on the "Link New Sheet" button to link a new Google Sheet with Formbricks and a modal will open up.
 
 <Image
   src={LinkSurveyWithSheet}
@@ -71,17 +72,16 @@ Before the next step, make sure that you have a Formbricks Survey with at least
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-7. Select the Google Sheet you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in the Google Sheet. Select the questions and click on the "Link Sheet" button.
+6. Select the Google Sheet you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in the Google Sheet. Select the questions and click on the "Link Sheet" button.
 
 <Image
   src={LinkWithQuestions}
   alt="Select question to link with Google Sheet"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
-
 />
 
-8. On submitting, the modal will close and you will see the linked Google Sheet in the list of linked Google Sheets.
+7. On submitting, the modal will close and you will see the linked Google Sheet in the list of linked Google Sheets.
 
 <Image
   src={ListLinkedSurveys}

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

@@ -14,7 +14,7 @@ import SelectFields from "./select-fields.webp";
 import Result from "./result.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Integration with Make.com: A Step-by-Step Guide",
   description: "Discover how to seamlessly integrate Formbricks with Make.com. Dive into our comprehensive guide to set up scenarios, connect with a plethora of apps, and send your survey data to more than 1000 platforms.",
 };
@@ -96,7 +96,7 @@ Click "Create a webhook":
   className="rounded-lg max-w-full sm:max-w-3xl"
 />
 
-Enter the Formbricks API key. Learn how to get one from the [API Key tutorial](/docs/api/api-key-setup).
+Enter the Formbricks API key. Learn how to get one from the [API Key tutorial](/docs/api/management/api-key-setup).
 
 <Image src={EnterApiKey} alt="Enter API Key" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 

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

@@ -18,7 +18,7 @@ import SubmitTestResponse from "./submit-test-response.png";
 import SuccessConnection from "./success-connection.png";
 import UpdateQuestionId from "./update-question-id.png";
 
-export const meta = {
+export const metadata = {
   title: "Comprehensive Guide to Integrating Formbricks with n8n",
   description: "Unlock the potential of combining Formbricks with n8n for a streamlined workflow experience. Dive into our step-by-step guide and send your survey data effortlessly to 350+ applications. Streamline your data processes now!",
 };
@@ -71,7 +71,7 @@ Click on Create New Credentail button to add your host and API Key
 
 <Image src={AddApiKey} alt="Add host and api key" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
-Now you need an API key. Please refer to the [API Key Setup](/docs/api/api-key-setup) page to learn how to create one.
+Now you need an API key. Please refer to the [API Key Setup](/docs/api/management/api-key-setup) page to learn how to create one.
 
 Once you copied it in the API Key field, hit Save button to test the connection and save the credentials.