test perf

Co-authored-by: RajuGangitla <gangitlaraju8520@gmail.com>
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
Co-authored-by: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com>

.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.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,28 @@
 // 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",
+  "postAttachCommand": "pnpm dev --filter=@formbricks/web... --filter=@formbricks/demo...",
 
-	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "node"
+  // 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.)
 

.dockerignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-**/node_modules
+# **/node_modules
 .pnp
 .pnp.js
 .pnpm-store/
@@ -35,3 +35,5 @@ yarn-error.log*
 .vscode
 .github
 **/.turbo
+
+.env

.env.example

@@ -1,17 +1,15 @@
-/*
 ########################################################################
-# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------#
+# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------ #
 ########################################################################
 
-
 ############
 #  BASICS  #
 ############
 
 WEBAPP_URL=http://localhost:3000
 
-# Set this if you want to have a shorter link for surveys
-SHORT_URL_BASE=
+# Required for next-auth. Should be the same as WEBAPP_URL
+NEXTAUTH_URL=http://localhost:3000
 
 # Encryption keys
 # Please set both for now, we will change this in the future
@@ -19,24 +17,20 @@ SHORT_URL_BASE=
 # You can use: `openssl rand -hex 32` to generate one
 ENCRYPTION_KEY=
 
+# @see: https://next-auth.js.org/configuration/options#nextauth_secret
+# You can use: `openssl rand -hex 32` to generate a secure one
+NEXTAUTH_SECRET=
+
+# API Secret for running cron jobs. (mandatory)
+# You can use: `openssl rand -hex 32` to generate a secure one
+CRON_SECRET=
+
 ##############
 #  DATABASE  #
 ##############
 
 DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=public'
 
-###############
-#  NEXT AUTH  #
-###############
-
-# @see: https://next-auth.js.org/configuration/options#nextauth_secret
-# You can use: `openssl rand -hex 32` to generate one
-NEXTAUTH_SECRET=RANDOM_STRING
-
-# Set this to your public-facing URL, e.g., https://example.com
-# You do not need the NEXTAUTH_URL environment variable in Vercel.
-NEXTAUTH_URL=http://localhost:3000
-
 ################
 #  MAIL SETUP  #
 ################
@@ -52,6 +46,8 @@ SMTP_SECURE_ENABLED=0
 SMTP_USER=smtpUser
 SMTP_PASSWORD=smtpPassword
 
+# If set to 0, the server will accept connections without requiring authorization from the list of supplied CAs (default is 1). 
+# SMTP_REJECT_UNAUTHORIZED_TLS=0
 
 ########################################################################
 # ------------------------------ OPTIONAL -----------------------------#
@@ -59,20 +55,42 @@ SMTP_PASSWORD=smtpPassword
 
 # Uncomment the variables you would like to use and customize the values.
 
+# Custom local storage path for file uploads
+#UPLOADS_DIR=
+
+##############
+# S3 STORAGE #
+##############
+
+# S3 Storage is required for the file upload in serverless environments like Vercel
+S3_ACCESS_KEY=
+S3_SECRET_KEY=
+S3_REGION=
+S3_BUCKET_NAME=
+# Configure a third party S3 compatible storage service endpoint like StorJ leave empty if you use Amazon S3
+# e.g., https://gateway.storjshare.io
+S3_ENDPOINT_URL=
+# Force path style for S3 compatible storage (0 for disabled, 1 for enabled)
+S3_FORCE_PATH_STYLE=0
+
 #####################
 # Disable Features  #
 #####################
 
 # 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.
+# Note: This variable is only available to the SaaS setup of Formbricks Cloud. Signup is disable by default for self-hosting.
 # SIGNUP_DISABLED=1
 
-# Team Invite. Disable the ability for invited users to create an account.
+# Email login. Disable the ability for users to login with email.
+# EMAIL_AUTH_DISABLED=1
+
+# Organization Invite. Disable the ability for invited users to create an account.
 # INVITE_DISABLED=1
 
 ##########
@@ -85,28 +103,32 @@ TERMS_URL=
 IMPRINT_URL=
 
 # Configure Github Login
-GITHUB_AUTH_ENABLED=0
 GITHUB_ID=
 GITHUB_SECRET=
 
 # Configure Google Login
-GOOGLE_AUTH_ENABLED=0
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
 # Configure Azure Active Directory Login
-AZUREAD_AUTH_ENABLED=0
 AZUREAD_CLIENT_ID=
 AZUREAD_CLIENT_SECRET=
 AZUREAD_TENANT_ID=
-AZURE_DIRECT_REDIRECT=0
 
-# Cron Secret
-CRON_SECRET=
+# OpenID Connect (OIDC) configuration
+# OIDC_CLIENT_ID=
+# OIDC_CLIENT_SECRET=
+# OIDC_ISSUER=
+# OIDC_DISPLAY_NAME=
+# OIDC_SIGNING_ALGORITHM=
 
 # 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=
@@ -116,15 +138,45 @@ NEXT_PUBLIC_FORMBRICKS_API_HOST=
 NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
 NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
 
-# Oauth credentials for Google sheet integration 
+# Oauth credentials for Google sheet integration
 GOOGLE_SHEETS_CLIENT_ID=
 GOOGLE_SHEETS_CLIENT_SECRET=
 GOOGLE_SHEETS_REDIRECT_URL=
 
-# Oauth credentials for Airtable integration 
+# Oauth credentials for Airtable integration
 AIRTABLE_CLIENT_ID=
 
+# Oauth credentials for Slack integration
+SLACK_CLIENT_ID=
+SLACK_CLIENT_SECRET=
+
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=
 
-*/
+# Automatically assign new users to a specific organization and role within that organization
+# Insert an existing organization id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
+# (Role Management is an Enterprise feature)
+# DEFAULT_ORGANIZATION_ID=
+# DEFAULT_ORGANIZATION_ROLE=admin
+
+# Send new users to customer.io
+# CUSTOMER_IO_API_KEY=
+# CUSTOMER_IO_SITE_ID=
+
+# Ignore Rate Limiting across the Formbricks app
+# RATE_LIMITING_DISABLED=1
+
+# OpenTelemetry URL for tracing
+# OPENTELEMETRY_LISTENER_URL=http://localhost:4318/v1/traces
+
+# Unsplash API Key
+UNSPLASH_ACCESS_KEY=
+
+# The below is used for Next Caching (uses In-Memory from Next Cache if not provided)
+# REDIS_URL=redis://localhost:6379
+
+# The below is used for Rate Limiting (uses In-Memory LRU Cache if not provided) (You can use a service like Webdis for this)
+# REDIS_HTTP_URL:
+
+# Disable custom cache handler if necessary (e.g. if deployed on Vercel)
+# CUSTOM_CACHE_DISABLED=1

.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+packages/config-eslint/

.eslintrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-  root: true,
-  // This tells ESLint to load the config from the package `eslint-config-formbricks`
-  extends: ["formbricks"],
-  settings: {
-    next: {
-      rootDir: ["apps/*/"],
-    },
-  },
-};

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -42,7 +42,6 @@ body:
         - First time: Please read our [introductory blog post](https://formbricks.com/blog/join-the-formtribe)
         - All UI components are in the package `formbricks/ui`
         - Run `pnpm go` to find a demo app to test in-app surveys at `localhost:3002`
-        - Everything is type-safe
-        - We use **chatGPT** to help refactor code. Use our [Formbricks ✨ megaprompt ✨](https://github.com/formbricks/formbricks/blob/main/megaprompt.md) to create the right 
-          context before you write your prompt.
+        - Everything is type-safe.
+        - We use **chatGPT** to help refactor code.
         - Anything unclear? [Ask in Discord](https://formbricks.com/discord)

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

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,3 +1,5 @@
+<!-- We require pull request titles to follow the Conventional Commits specification ( https://www.conventionalcommits.org/en/v1.0.0/#summary ). Please make sure your title follow these conventions -->
+
 ## What does this PR do?
 
 <!-- Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
@@ -8,18 +10,6 @@ Fixes # (issue)
  Loom Video: https://www.loom.com/
 -->
 
-## Type of change
-
-<!-- Please mark the relevant points by using [x] -->
-
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] Chore (refactoring code, technical debt, workflow improvements)
-- [ ] Enhancement (small improvements)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] This change adds a new database migration
-- [ ] This change requires a documentation update
-
 ## How should this be tested?
 
 <!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration -->
@@ -42,7 +32,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 🙏
+- [ ] First PR at Formbricks? [Please sign the CLA!](https://cla-assistant.io/formbricks/formbricks) Without it we wont be able to merge it 🙏
 
 ### Appreciated
 

.github/actions/cache-build-web/action.yml

@@ -0,0 +1,70 @@
+name: Build & Cache Web App
+
+on:
+  workflow_dispatch:
+    inputs:
+      e2e_testing_mode:
+        description: "Set E2E Testing Mode"
+        required: false
+        default: "0"
+
+runs:
+  using: "composite"
+  steps:
+    - name: Checkout repo
+      uses: actions/checkout@v3
+
+    - uses: ./.github/actions/dangerous-git-checkout
+
+    - name: Cache Build
+      uses: actions/cache@v3
+      id: cache-build
+      env:
+        cache-name: prod-build
+        key-1: ${{ hashFiles('pnpm-lock.yaml') }}
+        key-2: ${{ hashFiles('apps/**/**.[jt]s', 'apps/**/**.[jt]sx', 'packages/**/**.[jt]s', 'packages/**/**.[jt]sx', '!**/node_modules') }}
+      with:
+        path: |
+          ${{ github.workspace }}/apps/web/.next
+          **/.turbo/**
+          **/dist/**
+        key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}
+
+    - name: Set Cache Hit Status
+      run: echo "cache-hit=${{ steps.cache-build.outputs.cache-hit }}" >> "$GITHUB_OUTPUT"
+      shell: bash
+
+    - name: Setup Node.js 20.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: 20.x
+      if: steps.cache-build.outputs.cache-hit != 'true'
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      if: steps.cache-build.outputs.cache-hit != 'true'
+
+    - name: Install dependencies
+      run: pnpm install --config.platform=linux --config.architecture=x64
+      if: steps.cache-build.outputs.cache-hit != 'true'
+      shell: bash
+
+    - name: create .env
+      run: cp .env.example .env
+      shell: bash
+
+    - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
+      run: |
+        RANDOM_KEY=$(openssl rand -hex 32)
+        sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
+        sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
+        sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
+        sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${RANDOM_KEY}/" .env
+        echo "E2E_TESTING=${{ inputs.e2e_testing_mode }}" >> .env
+      shell: bash
+
+    - run: |
+        pnpm build --filter=@formbricks/web...
+
+      if: steps.cache-build.outputs.cache-hit != 'true'
+      shell: bash

.github/actions/dangerous-git-checkout/action.yml

@@ -0,0 +1,10 @@
+name: Dangerous git Checkout
+description: "Git Checkout from PR code so we can run checks from forks"
+runs:
+  using: "composite"
+  steps:
+    - name: Checkout repo
+      uses: actions/checkout@v3
+      with:
+        ref: ${{ github.event.pull_request.head.sha }}
+        fetch-depth: 2

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

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

.github/workflows/build-web.yml

@@ -1,4 +1,4 @@
-name: Build
+name: Build web
 on:
   workflow_call:
 jobs:
@@ -8,27 +8,11 @@ jobs:
     timeout-minutes: 30
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
 
-      - name: Setup Node.js 18.x
-        uses: actions/setup-node@v3
+      - name: Build & Cache Web Binaries
+        uses: ./.github/actions/cache-build-web
+        id: cache-build-web
         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: create .env
-        run: cp .env.example .env
-
-      - name: Generate Random NEXTAUTH_SECRET
-        run: |
-          SECRET=$(openssl rand -hex 32)
-          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
-
-      - name: Build Formbricks-web
-        run: pnpm build --filter=web...
+          e2e_testing_mode: "0"

.github/workflows/chromatic.yml

@@ -0,0 +1,30 @@
+name: "Chromatic"
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: apps/storybook

.github/workflows/cron-closeOnDate.yml

@@ -1,23 +0,0 @@
-name: Cron - closeOnDate
-
-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:
-    # Runs “At 00:00.” (see https://crontab.guru)
-    - cron: "0 0 * * *"
-jobs:
-  cron-weeklySummary:
-    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/close_surveys \
-            -X POST \
-            -H 'content-type: application/json' \
-            -H 'x-api-key: ${{ env.CRON_SECRET }}' \
-            --fail

.github/workflows/cron-reportUsageToStripe.yml

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

.github/workflows/cron-surveyStatusUpdate.yml

@@ -0,0 +1,24 @@
+name: Cron - Survey status update
+
+on:
+  workflow_dispatch:
+  # "Scheduled workflows run on the latest commit on the default or base branch."
+  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
+  # schedule:
+  # Runs “At 00:00.” (see https://crontab.guru)
+  # - cron: "0 0 * * *"
+jobs:
+  cron-weeklySummary:
+    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/survey-status \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'x-api-key: ${{ env.CRON_SECRET }}' \
+            --fail

.github/workflows/cron-weeklySummary.yml

@@ -1,6 +1,7 @@
-name: Cron - weeklySummary
+name: Cron - Weekly summary
 
 on:
+  workflow_dispatch:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
@@ -16,7 +17,7 @@ jobs:
       - name: cURL request
         if: ${{ env.APP_URL && env.CRON_SECRET }}
         run: |
-          curl ${{ env.APP_URL }}/api/cron/weekly_summary \
+          curl ${{ env.APP_URL }}/api/cron/weekly-summary \
             -X POST \
             -H 'content-type: application/json' \
             -H 'x-api-key: ${{ env.CRON_SECRET }}' \

.github/workflows/e2e.yml

@@ -0,0 +1,94 @@
+name: E2E Tests
+on:
+  workflow_call:
+  workflow_dispatch:
+env:
+  TELEMETRY_DISABLED: 1
+jobs:
+  build:
+    name: Run E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    services:
+      postgres:
+        image: postgres:latest
+        env:
+          POSTGRES_DB: postgres
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: postgres
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd="pg_isready -U testuser"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=5
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+        shell: bash
+
+      - name: create .env
+        run: cp .env.example .env
+        shell: bash
+
+      - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
+        run: |
+          RANDOM_KEY=$(openssl rand -hex 32)
+          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
+          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
+          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
+          sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${RANDOM_KEY}/" .env
+          echo "E2E_TESTING=1" >> .env
+          echo "NEXT_PUBLIC_E2E_TESTING=1" >> .env
+        shell: bash
+
+      - name: Build App
+        run: |
+          pnpm build --filter=@formbricks/web...
+
+      - name: Apply Prisma Migrations
+        run: |
+          pnpm prisma migrate deploy
+
+      - name: Run App
+        run: |
+          NODE_ENV=test pnpm start --filter=@formbricks/web &
+          sleep 10  # Optional: gives some buffer for the app to start
+          for attempt in {1..10}; do
+            if [ $(curl -o /dev/null -s -w "%{http_code}" http://localhost:3000/health) -eq 200 ]; then
+              echo "Application is ready."
+              break
+            fi
+            if [ $attempt -eq 10 ]; then
+              echo "Application failed to start in time."
+              exit 1
+            fi
+            echo "Still waiting for the application to be ready..."
+            sleep 10
+          done
+
+      - name: Install Playwright
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run E2E Tests
+        run: |
+          pnpm test:e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/lint.yml

@@ -8,16 +8,16 @@ jobs:
     timeout-minutes: 15
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
@@ -25,10 +25,12 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
-      - name: Generate Random NEXTAUTH_SECRET
+      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
         run: |
-          SECRET=$(openssl rand -hex 32)
-          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+          RANDOM_KEY=$(openssl rand -hex 32)
+          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
+          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
+          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
 
       - name: Lint
         run: pnpm lint

.github/workflows/pr.yml

@@ -1,7 +1,7 @@
 name: PR Update
 
 on:
-  pull_request_target:
+  pull_request:
     branches:
       - main
   merge_group:
@@ -12,23 +12,54 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  changes:
+    name: Detect changes
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    outputs:
+      has-files-requiring-all-checks: ${{ steps.filter.outputs.has-files-requiring-all-checks }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            has-files-requiring-all-checks:
+              - "!(**.md|.github/CODEOWNERS)"
+
   test:
-    name: Run Tests
+    name: Run Unit Tests
+    needs: [changes]
+    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/test.yml
     secrets: inherit
 
   lint:
     name: Run Linters
+    needs: [changes]
+    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/lint.yml
     secrets: inherit
 
   build:
     name: Build Formbricks-web
+    needs: [changes]
+    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/build-web.yml
     secrets: inherit
 
+  e2e-test:
+    name: Run E2E Tests
+    needs: [changes]
+    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
+    uses: ./.github/workflows/e2e.yml
+    secrets: inherit
+
   required:
-    needs: [lint, test, build]
+    name: PR Check Summary
+    needs: [lint, test, build, e2e-test]
     if: always()
     runs-on: ubuntu-latest
     steps:

.github/workflows/release-changesets.yml

@@ -1,9 +1,10 @@
 name: Release Changesets
 
 on:
-  push:
-    branches:
-      - main
+  workflow_dispatch:
+  #push:
+  #  branches:
+  #    - main
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

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

@@ -0,0 +1,62 @@
+name: Docker for Data Migrations
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "v*"
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: formbricks/data-migrations
+  DATABASE_URL: "postgresql://postgres:postgres@postgres:5432/formbricks?schema=public"
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@v3.5.0
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=tag
+            type=raw,value=${{ github.ref_name }}
+            type=raw,value=latest
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          file: ./packages/database/Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            DATABASE_URL=${{ env.DATABASE_URL }}
+
+      - name: Sign the published Docker image
+        if: ${{ github.event_name != 'pull_request' }}
+        run: |
+          cosign sign --yes ghcr.io/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
+          cosign sign --yes ghcr.io/${{ env.IMAGE_NAME }}:latest

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

@@ -0,0 +1,91 @@
+name: Docker Release to Github Experimental
+
+# 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:
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}-experimental
+  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: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Depot CLI
+        uses: depot/setup-action@v1
+
+      # 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@v3.5.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: depot/build-push-action@v1
+        with:
+          project: tw0fqmsx3c
+          token: ${{ secrets.DEPOT_PROJECT_TOKEN }}
+          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
+
+      # 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-github.yml

@@ -1,4 +1,4 @@
-name: Docker
+name: Docker Release to Github
 
 # This workflow uses actions that are not certified by GitHub.
 # They are provided by a third-party and are governed by
@@ -6,6 +6,7 @@ name: Docker
 # documentation.
 
 on:
+  workflow_dispatch:
   push:
     tags:
       - "v*"
@@ -15,11 +16,12 @@ env:
   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
@@ -32,25 +34,20 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
+      - name: Set up Depot CLI
+        uses: depot/setup-action@v1
+
       # Install the cosign tool except on PR
       # https://github.com/sigstore/cosign-installer
       - name: Install cosign
         if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@6e04d228eb30da1757ee4e1dd75a0ec73a653e06 #v3.1.1
-        with:
-          cosign-release: 'v2.1.1'
-
-      # Set up BuildKit Docker container builder to be able to build
-      # multi-platform images and export cache
-      # https://github.com/docker/setup-buildx-action
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+        uses: sigstore/cosign-installer@v3.5.0
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
+        uses: docker/login-action@v3 # v3.0.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -60,7 +57,7 @@ jobs:
       # https://github.com/docker/metadata-action
       - name: Extract Docker metadata
         id: meta
-        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
+        uses: docker/metadata-action@v5 # v5.0.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
 
@@ -68,9 +65,13 @@ jobs:
       # https://github.com/docker/build-push-action
       - name: Build and push Docker image
         id: build-and-push
-        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
+        uses: depot/build-push-action@v1
         with:
+          project: tw0fqmsx3c
+          token: ${{ secrets.DEPOT_PROJECT_TOKEN }}
           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 }}

.github/workflows/release-docker.yml

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

.github/workflows/test.yml

@@ -3,25 +3,21 @@ on:
   workflow_call:
 jobs:
   build:
-    name: Tests
+    name: Unit Tests
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
-    env:
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
@@ -29,8 +25,12 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
-      - name: Build formbricks-js dependencies
-        run: pnpm build --filter=js
+      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
+        run: |
+          RANDOM_KEY=$(openssl rand -hex 32)
+          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
+          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
+          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
 
       - name: Test
         run: pnpm test

.gitignore

@@ -44,4 +44,17 @@ packages/database/zod
 # nixos stuff
 .direnv
 
-Zone.Identifier
+Zone.Identifier
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# uploads
+packages/lib/uploads
+
+# Vite Timestamps
+*vite.config.*.timestamp-*
+

.gitpod.yml

@@ -33,7 +33,6 @@ tasks:
       gp sync-await init &&
       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_ENCRYPTION_KEY=$(openssl rand -hex 32)
       sed -i 's/^ENCRYPTION_KEY=.*/ENCRYPTION_KEY='"$RANDOM_ENCRYPTION_KEY"'/' .env
       turbo --filter "@formbricks/web" go

.husky/pre-commit

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

.prettierrc.js

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

README.md

@@ -1,88 +1,111 @@
 <div id="top"></div>
 
-[<img src="ph.png">](https://www.producthunt.com/posts/formbricks)
+<p align="center">
+
+<a href="https://formbricks.com">
+
+<img width="120" alt="Open Source 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">
-<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>
-
-  <p align="center">
-    The Open Source Survey Toolbox
-    <br />
-    <a href="https://formbricks.com/">Website</a>  |  <a href="https://formbricks.com/discord">Join Discord community</a>
-  </p>
+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://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/>
 
+<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">
+<i>Trusted by</i><br/>
+  <img width="867" alt="clients-hi-res" src="https://github.com/formbricks/formbricks/assets/72809645/924d3693-f66a-4063-bb31-6e5789a8175a">
 </p>
+<div>
 
 <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>
+<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">
 
-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 is a powerful tool for creating in-product micro-surveys - and leverage a significantly higher conversion rate. It allows you to gather valuable insights from your users, enabling you to make data-driven decisions that enhance your product's user experience. With Formbricks, you can create surveys with our no-code editor, choose from a variety of templates, target specific user groups, and much more.
+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)
+
+- [Cloud Version](#cloud-version)
+
+- [Self-hosted Version](#self-hosted-version)
+
+- [Development](#development)
+
 - [Contribution](#contribution)
+
 - [Contact](#contact-us)
-- [License](#license)
+
 - [Security](#security)
 
+- [License](#license)
+
 <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**.
+
+- 👨‍👩‍👦 Invite your organization members to **collaborate** on your surveys.
+
+- 🔌 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/)
 
+- 🐛 [Vitest](https://vitest.dev/)
+
 <a id="getting-started"></a>
 
 ## 🚀 Getting started
@@ -93,16 +116,14 @@ We've got several options depending on your need to help you quickly get started
 
 ### ☁️ 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).
 
 <a id="self-hosted-version"></a>
 
-### 🐳 Self-hosted version
+### 🐳 Self-hosting Formbricks
 
 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
 
-(In the future we may develop additional features that aren't in the free Open-Source version).
-
 If you opt for self-hosting Formbricks, here are a few options to consider:
 
 #### Docker
@@ -117,23 +138,37 @@ 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)
 
+##### RepoCloud
+
+Or you can also deploy Formbricks on [RepoCloud](https://repocloud.io) using the button below.
+
+[![Deploy on RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploy.png)](https://repocloud.io/details/?app_id=254)
+
+##### Zeabur
+
+Or you can also deploy Formbricks on [Zeabur](https://zeabur.com) using the button below.
+
+[![Deploy to Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/G4TUJL)
+
 <a id="development"></a>
 
-### 👨‍💻 Development
+## 👨‍💻 Development
 
-#### Prerequisites
+### Prerequisites
 
 Here is what you need to be able to run Formbricks:
 
 - [Node.js](https://nodejs.org/en) (Version: >=18.x)
+
 - [Pnpm](https://pnpm.io/)
+
 - [Docker](https://www.docker.com/) - to run PostgreSQL and MailHog
 
-#### Local Setup
+### Local Setup
 
-To get started locally, we've got a [guide to help you](https://formbricks.com/docs/contributing/setup).
+To get started locally, we've got a [guide to help you](https://formbricks.com/docs/developer-docs/contributing/get-started#local-machine-setup).
 
-#### Gitpod Setup
+### Gitpod Setup
 
 1. Click the button below to open this project in Gitpod.
 
@@ -150,15 +185,19 @@ 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 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.
+Please check out [our contribution guide](https://formbricks.com/docs/developer-docs/contributing/get-started) 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" />
+
+<img src="https://contrib.rocks/image?repo=formbricks/formbricks" />
+
 </a>
 
 <a id="contact-us"></a>
@@ -171,14 +210,30 @@ Let's have a chat about your survey needs and get you started.
 
 <a id="license"></a>
 
-## ⚖️ License
-
-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`](./SECURITY.md) for more information.
 
+<a id="license"></a>
+
+## 👩‍⚖️ License
+
+### The AGPL Formbricks Core
+
+The Formbricks core application is licensed under the [AGPLv3 Open Source License](https://github.com/formbricks/formbricks/blob/main/LICENSE). The core application is fully functional and includes everything you need to design & run link surveys, website surveys and in-app surveys. You can use the software for free for personal and commercial use. You're also allowed to create and distribute modified versions as long as you document the changes you make incl. date. The AGPL license requires you to publish your modified version under the AGPLv3 license as well.
+
+### The Enterprise Edition
+
+Additional to the AGPL licensed Formbricks core, this repository contains code licensed under an Enterprise license. The [code](https://github.com/formbricks/formbricks/tree/main/packages/ee) and [license](https://github.com/formbricks/formbricks/blob/main/packages/ee/LICENSE) for the enterprise functionality can be found in the `/packages/ee` folder of this repository. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an [Enterprise License Key](https://formbricks.com/docs/self-hosting/enterprise) to unlock it.
+
+### White-Labeling Formbricks and Other Licensing Needs
+
+We currently do not offer Formbricks white-labeled. Any other needs? [Send us an email](mailto:hola@formbricks.com).
+
+### Why charge for Enterprise Features?
+
+The Enterprise Edition and White-Label Licenses allow us to fund the development of Formbricks sustainably. It guarantees that the open-source surveying infrastructure we're building will be around for decades to come.
+
 <p align="right"><a href="#top">🔼 Back to top</a></p>

apps/demo-react-native/.env.example

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_API_HOST=http://192.168.178.20:3000
+EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=clzr04nkd000bcdl110j0ijyq

apps/demo-react-native/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ["@formbricks/eslint-config/react.js"],
+  parserOptions: {
+    project: "tsconfig.json",
+    tsconfigRootDir: __dirname,
+  },
+};

apps/demo-react-native/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

apps/demo-react-native/app.json

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

apps/demo-react-native/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function babel(api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+  };
+};

apps/demo-react-native/index.js

@@ -0,0 +1,7 @@
+import { registerRootComponent } from "expo";
+import { LogBox } from "react-native";
+import App from "./src/app";
+
+registerRootComponent(App);
+
+LogBox.ignoreAllLogs();

apps/demo-react-native/metro.config.js

@@ -0,0 +1,21 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const path = require("node:path");
+const { getDefaultConfig } = require("expo/metro-config");
+
+// Find the workspace root, this can be replaced with `find-yarn-workspace-root`
+const workspaceRoot = path.resolve(__dirname, "../..");
+const projectRoot = __dirname;
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [workspaceRoot];
+// 2. Let Metro know where to resolve packages, and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, "node_modules"),
+  path.resolve(workspaceRoot, "node_modules"),
+];
+// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+config.resolver.disableHierarchicalLookup = true;
+
+module.exports = config;

apps/demo-react-native/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@formbricks/demo-react-native",
+  "version": "1.0.0",
+  "main": "./index.js",
+  "scripts": {
+    "dev": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject",
+    "clean": "rimraf .turbo node_modules .expo"
+  },
+  "dependencies": {
+    "@formbricks/js": "workspace:*",
+    "@formbricks/react-native": "workspace:*",
+    "expo": "^51.0.26",
+    "expo-status-bar": "~1.12.1",
+    "react": "^18.2.0",
+    "react-native": "^0.74.4",
+    "react-native-webview": "13.8.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/react": "~18.2.79",
+    "typescript": "^5.3.3"
+  },
+  "private": true
+}

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

@@ -0,0 +1,52 @@
+import { StatusBar } from "expo-status-bar";
+import { Button, LogBox, StyleSheet, Text, View } from "react-native";
+import Formbricks, { track } from "@formbricks/react-native";
+
+LogBox.ignoreAllLogs();
+
+export default function App(): JSX.Element {
+  if (!process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID) {
+    throw new Error("EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID is required");
+  }
+
+  if (!process.env.EXPO_PUBLIC_API_HOST) {
+    throw new Error("EXPO_PUBLIC_API_HOST is required");
+  }
+
+  const config = {
+    environmentId: process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
+    apiHost: process.env.EXPO_PUBLIC_API_HOST,
+    userId: "random-user-id",
+    attributes: {
+      language: "en",
+      testAttr: "attr-test",
+    },
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text>Formbricks React Native SDK Demo</Text>
+
+      <Button
+        title="Trigger Code Action"
+        onPress={() => {
+          track("code").catch((error: unknown) => {
+            // eslint-disable-next-line no-console -- logging is allowed in demo apps
+            console.error("Error tracking event:", error);
+          });
+        }}
+      />
+      <StatusBar style="auto" />
+      <Formbricks initConfig={config} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

apps/demo-react-native/tsconfig.json

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

apps/demo/.eslintrc.js

@@ -1,4 +1,3 @@
 module.exports = {
-  root: true,
-  extends: ["formbricks"],
+  extends: ["@formbricks/eslint-config/legacy-next.js"],
 };

apps/demo/components/LayoutApp.tsx

@@ -1,6 +1,6 @@
-import Sidebar from "./Sidebar";
+import { Sidebar } from "./Sidebar";
 
-export default function LayoutApp({ children }: { children: React.ReactNode }) {
+export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="min-h-full">
       {/* Static sidebar for desktop */}
@@ -10,4 +10,4 @@ export default function LayoutApp({ children }: { children: React.ReactNode }) {
       <div className="flex flex-1 flex-col lg:pl-64">{children}</div>
     </div>
   );
-}
+};

apps/demo/components/Sidebar.tsx

@@ -1,31 +1,31 @@
-import { classNames } from "@/lib/utils";
 import {
   ClockIcon,
   CogIcon,
   CreditCardIcon,
-  DocumentChartBarIcon,
+  FileBarChartIcon,
+  HelpCircleIcon,
   HomeIcon,
-  QuestionMarkCircleIcon,
   ScaleIcon,
   ShieldCheckIcon,
-  UserGroupIcon,
-} from "@heroicons/react/24/outline";
+  UsersIcon,
+} from "lucide-react";
+import { classNames } from "../lib/utils";
 
 const navigation = [
   { name: "Home", href: "#", icon: HomeIcon, current: true },
   { name: "History", href: "#", icon: ClockIcon, current: false },
   { name: "Balances", href: "#", icon: ScaleIcon, current: false },
   { name: "Cards", href: "#", icon: CreditCardIcon, current: false },
-  { name: "Recipients", href: "#", icon: UserGroupIcon, current: false },
-  { name: "Reports", href: "#", icon: DocumentChartBarIcon, current: false },
+  { name: "Recipients", href: "#", icon: UsersIcon, current: false },
+  { name: "Reports", href: "#", icon: FileBarChartIcon, current: false },
 ];
 const secondaryNavigation = [
   { name: "Settings", href: "#", icon: CogIcon },
-  { name: "Help", href: "#", icon: QuestionMarkCircleIcon },
+  { name: "Help", href: "#", icon: HelpCircleIcon },
   { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];
 
-export default function Sidebar({}) {
+export const Sidebar = () => {
   return (
     <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
       <nav
@@ -62,4 +62,4 @@ export default function Sidebar({}) {
       </nav>
     </div>
   );
-}
+};

apps/demo/components/SurveySwitch.tsx

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

apps/demo/lib/utils.ts

@@ -1,3 +1,3 @@
-export function classNames(...classes: any) {
+export const classNames = (...classes: any) => {
   return classes.filter(Boolean).join(" ");
-}
+};

apps/demo/next.config.js

@@ -1,27 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  async redirects() {
-    return [
-      {
-        source: "/",
-        destination: "/app",
-        permanent: false,
-      },
-    ];
-  },
-  images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "tailwindui.com",
-      },
-      {
-        protocol: "https",
-        hostname: "images.unsplash.com",
-      },
-    ],
-  },
-};
-
-module.exports = nextConfig;

apps/demo/next.config.mjs

@@ -0,0 +1,27 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/app",
+        permanent: false,
+      },
+    ];
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "tailwindui.com",
+      },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
+  },
+};
+
+export default nextConfig;

apps/demo/package.json

@@ -12,12 +12,14 @@
   },
   "dependencies": {
     "@formbricks/js": "workspace:*",
-    "@heroicons/react": "^2.0.18",
-    "next": "14.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@formbricks/ui": "workspace:*",
+    "lucide-react": "^0.418.0",
+    "next": "14.2.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "eslint-config-formbricks": "workspace:*"
+    "@formbricks/eslint-config": "workspace:*",
+    "@formbricks/config-typescript": "workspace:*"
   }
 }

apps/demo/pages/_app.tsx

@@ -2,7 +2,7 @@ import type { AppProps } from "next/app";
 import Head from "next/head";
 import "../styles/globals.css";
 
-export default function App({ Component, pageProps }: AppProps) {
+const App = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <Head>
@@ -17,4 +17,6 @@ export default function App({ Component, pageProps }: AppProps) {
       <Component {...pageProps} />
     </>
   );
-}
+};
+
+export default App;

apps/demo/pages/_document.tsx

@@ -1,8 +1,8 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";
 
-export default function Document() {
+const Document = () => {
   return (
-    <Html lang="en" className="h-full bg-gray-50">
+    <Html lang="en" className="h-full bg-slate-50">
       <Head />
       <body className="h-full">
         <Main />
@@ -10,4 +10,6 @@ export default function Document() {
       </body>
     </Html>
   );
-}
+};
+
+export default Document;

apps/demo/pages/app/index.tsx

@@ -1,12 +1,13 @@
-import formbricks from "@formbricks/js";
 import Image from "next/image";
-import { useEffect, useState } from "react";
-import fbsetup from "../../public/fb-setup.png";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import formbricks from "@formbricks/js/app";
+import { SurveySwitch } from "../../components/SurveySwitch";
+import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
-export default function AppPage({}) {
+const AppPage = ({}) => {
   const [darkMode, setDarkMode] = useState(false);
   const router = useRouter();
 
@@ -19,16 +20,32 @@ export default function AppPage({}) {
   }, [darkMode]);
 
   useEffect(() => {
+    // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
+    const addFormbricksDebugParam = () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      if (!urlParams.has("formbricksDebug")) {
+        urlParams.set("formbricksDebug", "true");
+        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+        window.history.replaceState({}, "", newUrl);
+      }
+    };
+
+    addFormbricksDebugParam();
+
     if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const isUserId = window.location.href.includes("userId=true");
-      const userId = isUserId ? "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING" : undefined;
+      const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
+      const userInitAttributes = {
+        language: "de",
+        "Init Attribute 1": "eight",
+        "Init Attribute 2": "two",
+      };
+
       formbricks.init({
         environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
         apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
         userId,
-        debug: true,
+        attributes: userInitAttributes,
       });
-      window.formbricks = formbricks;
     }
 
     // Connect next.js router to Formbricks
@@ -40,20 +57,24 @@ export default function AppPage({}) {
         router.events.off("routeChangeComplete", handleRouteChange);
       };
     }
-  });
+  }, []);
 
   return (
     <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">
-            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 className="flex flex-col items-center gap-2 sm:flex-row">
+          <SurveySwitch value="app" formbricks={formbricks} />
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+              Formbricks In-product Survey Demo App
+            </h1>
+            <p className="text-slate-700 dark:text-slate-300">
+              This app helps you test your app surveys. You can create and test user actions, create and
+              update user attributes, etc.
+            </p>
+          </div>
         </div>
+
         <button
           className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
           onClick={() => setDarkMode(!darkMode)}>
@@ -66,18 +87,18 @@ export default function AppPage({}) {
           <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
+              Copy the environment ID of your Formbricks app to the env variable in /apps/demo/.env
             </p>
             <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
 
-            <div className="mt-4 flex-col items-start text-sm text-slate-700 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">
                   {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="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
                   <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
                 </span>
               </div>
@@ -96,22 +117,22 @@ export default function AppPage({}) {
         </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">
+          <div className="col-span-3 self-start rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-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 className="text-slate-700 dark:text-slate-300">
+              On formbricks.reset() the local state will <strong>be deleted</strong> and formbricks gets{" "}
+              <strong>reinitialized</strong>.
             </p>
             <button
-              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
+              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
               onClick={() => {
                 formbricks.reset();
               }}>
               Reset
             </button>
-            <p className="text-xs text-slate-700 dark:text-gray-300">
+            <p className="text-xs text-slate-700 dark:text-slate-300">
               If you made a change in Formbricks app and it does not seem to work, hit &apos;Reset&apos; and
               try again.
             </p>
@@ -119,32 +140,12 @@ export default function AppPage({}) {
 
           <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={() => {
-                  formbricks.track("Code Action");
-                }}>
-                Code Action
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">
-                This button sends a{" "}
-                <a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
-                  Code Action
-                </a>{" "}
-                to the Formbricks API called &apos;Code Action&apos;. You will find it in the Actions Tab.
-              </p>
-            </div>
-          </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">
+              <button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
                 No-Code Action
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">
+              <p className="text-xs text-slate-700 dark:text-slate-300">
                 This button sends a{" "}
                 <a
                   href="https://formbricks.com/docs/actions/no-code"
@@ -168,12 +169,12 @@ export default function AppPage({}) {
                 onClick={() => {
                   formbricks.setAttribute("Plan", "Free");
                 }}
-                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">
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
                 Set Plan to &apos;Free&apos;
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">
+              <p className="text-xs text-slate-700 dark:text-slate-300">
                 This button sets the{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/custom-attributes"
@@ -191,12 +192,12 @@ export default function AppPage({}) {
                 onClick={() => {
                   formbricks.setAttribute("Plan", "Paid");
                 }}
-                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">
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
                 Set Plan to &apos;Paid&apos;
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">
+              <p className="text-xs text-slate-700 dark:text-slate-300">
                 This button sets the{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/custom-attributes"
@@ -214,12 +215,12 @@ export default function AppPage({}) {
                 onClick={() => {
                   formbricks.setEmail("test@web.com");
                 }}
-                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">
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
                 Set Email
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">
+              <p className="text-xs text-slate-700 dark:text-slate-300">
                 This button sets the{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/identify-users"
@@ -231,43 +232,10 @@ export default function AppPage({}) {
               </p>
             </div>
           </div>
-          <div className="p-6">
-            {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 activates/deactivates{" "}
-                <a
-                  href="https://formbricks.com/docs/attributes/identify-users"
-                  target="_blank"
-                  className="underline dark:text-blue-500">
-                  user identification
-                </a>{" "}
-                with the userId &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
-              </p>
-            </div>
-          </div>
         </div>
       </div>
     </div>
   );
-}
+};
+
+export default AppPage;

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)}>
-          {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
-        </button>
-      </div>
-
-      <div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
-        <div>
-          <div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
-            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">1. Setup .env</h3>
-            <p className="text-slate-700 dark:text-slate-300">
-              Copy the environment ID of your Formbricks app to the env variable in 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/pages/website/index.tsx

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

apps/demo/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/demo/tsconfig.json

@@ -1,23 +1,5 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
+  "extends": "@formbricks/config-typescript/nextjs.json",
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

apps/docs/.env.example

@@ -0,0 +1,10 @@
+NEXT_PUBLIC_FORMBRICKS_COM_API_HOST=http://localhost:3000
+NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID=
+NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID=
+
+# Strapi API Key
+STRAPI_API_KEY=
+
+NEXT_PUBLIC_DOCSEARCH_APP_ID=
+NEXT_PUBLIC_DOCSEARCH_API_KEY=
+NEXT_PUBLIC_DOCSEARCH_INDEX_NAME=

apps/docs/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@formbricks/eslint-config/legacy-next.js"],
+};

apps/docs/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+public/sitemap*.xml
+public/robots.txt

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

@@ -0,0 +1,131 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import I1 from "./images/I1.webp";
+import I2 from "./images/I2.webp";
+
+export const metadata = {
+  title: "Using Actions in Formbricks | Fine-tuning User Moments",
+  description:
+    "Dive deep into how actions in Formbricks help products and organizations to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",
+};
+
+#### App Surveys
+
+# Actions & Targeting
+
+Understanding user thoughts and feelings at critical moments in their journey is pivotal. To achieve this, Formbricks uses user-centric actions that trigger surveys at precisely the right time. Actions are essentially notifications sent from your application to Formbricks when predefined user activities occur, making it possible to gather insights during key interactions.
+
+<Note>
+  Ensure that you’ve **initialized Formbricks with a userId** to fully utilize this feature along with other
+  app survey capabilities.
+</Note>
+
+## **How Do Actions Work?**
+
+Actions in Formbricks App Surveys are deeply integrated with user activities within your app. When a user performs a specified action, the Formbricks widget detects this activity and can present a survey to that specific user if the trigger conditions match of that survey, while also recording the event. This capability ensures that surveys are not only triggered at the right time but are also tailored to the user’s recent interactions within the app. You can set up these actions through a user-friendly No-Code interface within the Formbricks dashboard.
+
+## **Why Are Actions Useful?**
+
+Actions are invaluable for enhancing survey relevance and effectiveness:
+
+- **Personalized Engagement**: Surveys triggered by user actions ensure content is highly relevant and engaging, matching each user’s current context.
+- **User Attributes**: By tying surveys to specific user attributes, such as activity levels or feature usage, you can customize the survey experience to reflect individual user profiles.
+- **User Segments**: Analyze action data to create detailed user segments, targeting specific groups with surveys that are pertinent to their behaviors or interactions within the app.
+- **User Targeting**: Precise targeting based on user actions and attributes ensures that surveys are shown only to users who meet certain criteria, enhancing the relevance and effectiveness of each survey.
+
+## **Setting Up No-Code Actions**
+
+Formbricks offers an intuitive No-Code interface that allows you to configure actions without needing to write any code.
+
+To add a No-Code Action:
+
+1. Visit the Formbricks Dashboard & switch to the Actions tab:
+
+<MdxImage
+  src={I1}
+  alt="setup checklist ui of survey popup for app surveys"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. Now click on “Add Action”
+
+<MdxImage
+  src={I2}
+  alt="setup checklist ui of survey popup for app surveys"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Here are four types of No-Code actions you can set up:
+
+### **1. Click Action**
+
+Click Action is triggered when a user clicks on a specific element within your application. You can define the element's inner text or CSS selector to trigger the survey.
+
+- **Inner Text**: Checks if the innerText of a clicked HTML element, like a button label, matches a specific text. This action allows you to display a survey based on text interactions within your application.
+
+- **CSS Selector**: Verifies if a clicked HTML element matches a provided CSS selector, such as a class, ID, or any other CSS selector used in your website. It enables survey triggers based on element interactions.
+
+### **2. Page view Action**
+
+This action is triggered when a user visits a page within your application.
+
+### **3. Exit Intent Action**
+
+This action is triggered when a user is about to leave your application. It helps capture user feedback before they exit, providing valuable insights into user experiences and potential improvements.
+
+### **4. 50% Scroll Action**
+
+This action is triggered when a user scrolls through 50% of a page within your application. It helps capture user feedback at a specific point in their journey, enabling you to gather insights based on user interactions.
+
+This action is triggered when a user visits a specific page within your application. You can define the URL match conditions as follows:
+
+<Note>
+You can combine the url filters with any of the no-code actions to trigger the survey based on the URL match conditions.
+
+### **URL Match Conditions**
+
+- **exactMatch**: Triggers the action when the URL exactly matches the specified string.
+- **contains**: Activates when the URL contains the specified substring.
+- **startsWith**: Fires when the URL starts with the specified string.
+- **endsWith**: Executes when the URL ends with the specified string.
+- **notMatch**: Triggers when the URL does not match the specified condition.
+- **notContains**: Activates when the URL does not contain the specified substring.
+
+</Note>
+
+## **Setting Up Code Actions**
+
+For more granular control, you can implement actions directly in your codebase:
+
+1. **Configure the Action**: First, add the action via the Formbricks web interface to make it available for survey configuration.
+   After that you can fire an action using `formbricks.track()`
+
+2. **Track an Action**: Use formbricks.track() to send an action event to Formbricks.
+
+<Col>
+<CodeGroup title="Track an action">
+
+```javascript
+formbricks.track("Action Name");
+```
+
+</CodeGroup>
+</Col>
+Here is an example of how to fire an action when a user clicks a button:
+<Col>
+<CodeGroup title="Track Button Click">
+
+```javascript
+const handleClick = () => {
+  formbricks.track("Button Clicked");
+};
+
+return <button onClick={handleClick}>Click Me</button>;
+```
+
+</CodeGroup>
+</Col>
+
+This documentation frames actions around user interactions, emphasizing the connection between the user's activities and the survey experience. By leveraging user-centric actions, you can create highly targeted and timely surveys that resonate with users and yield valuable insights.

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

@@ -0,0 +1,81 @@
+import { MdxImage } from "@/components/MdxImage";
+import { ResponsiveVideo } from "@/components/ResponsiveVideo";
+
+import GermansGpt from "./germans-gpt.webp";
+import Hni from "./hni.webp";
+import PowerUsers from "./power-users.webp";
+import RideHailing from "./ride-hailing.webp";
+import UpsellMiro from "./upsell-miro.webp";
+
+export const metadata = {
+  title: "Advanced Targeting for In-app Surveys | Formbricks",
+  description:
+    "Advanced Targeting allows you to show surveys to just the right group of people. You can target surveys based on user attributes, user events, and metadata. This helps you get more relevant feedback and make data-driven decisions.",
+};
+
+#### App Surveys
+
+# Advanced Targeting
+
+<Note>
+  Targeting based on actions is deprecated in Advanced Targeting and will be removed soon. We recommend using
+  filters on user attributes to target the survey only to specific groups of users.
+</Note>
+
+Advanced Targeting allows you to show surveys to the right group of people. You can target surveys based on user attributes, device type, and more instead of spraying and praying. This helps you get more relevant feedback and make data-driven decisions. All of this without writing a single line of code.
+
+<ResponsiveVideo
+  title="Formbricks Multi-language Surveys"
+  src="https://www.youtube-nocookie.com/embed/0BQp6N4cXzU?si=KeBM7G7Ch1xtrsOm&amp;controls=0"
+/>
+
+## How to setup Advanced Targeting
+
+<Note>
+  Advanced Targeting is available on the Pro plan!
+</Note>
+
+1. On the Formbricks dashboard, click on **People** tab from the top navigation bar.
+
+2. Switch to the **Segments** tab & click on **Create Segment**.
+
+3. Give your segment a title & a description to help you remember what this segment is about.
+
+4. Now click on the **Add Filter** button to add a filter. You can filter based on actions, user attributes, other segments, devices, and more.
+
+5. To group a set of filters together, click on the Three Dots icon on the right side of the filter and click on **Create Group**.
+
+6. Try playing around with different filters & conditions that we have provided to see how the segment size changes.
+
+7. Once you are happy with the segment, click on **Save Segment**.
+
+8. Now, when you create a survey, you can select this segment to target your survey to.
+
+## Examples:
+
+1. Let's say you want to upsell to: Miro, Loom, Figma, Slack and Asana.
+
+   <MdxImage
+     src={UpsellMiro}
+     alt="Upselling Opportunity"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />
+
+2. Post-experience surveying for a ride hailing app where users who have taken more than 1 ride are shown a survey.
+
+   <MdxImage
+     src={RideHailing}
+     alt="Ride Hailing Targeting"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />
+
+3. Sneak Peak: How we at Formbricks automate inviting power users to chat with us
+
+   <MdxImage
+     src={PowerUsers}
+     alt="Automate inviting power users to chat with us at Formbricks"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />

apps/docs/app/app-surveys/framework-guides/components/Libraries.tsx

@@ -0,0 +1,66 @@
+import { Button } from "@/components/Button";
+import logoHtml from "@/images/frameworks/html5.svg";
+import logoNextjs from "@/images/frameworks/nextjs.svg";
+import logoReactJs from "@/images/frameworks/reactjs.svg";
+import logoVueJs from "@/images/frameworks/vuejs.svg";
+import Image from "next/image";
+
+const libraries = [
+  {
+    href: "#html",
+    name: "HTML",
+    description: "All you need to do is add 3 lines of code to your HTML script and thats it, you're done!",
+    logo: logoHtml,
+  },
+  {
+    href: "#react-js",
+    name: "React.js",
+    description: "Load the our Js library with your environment ID and you're ready to go!",
+    logo: logoReactJs,
+  },
+  {
+    href: "#next-js",
+    name: "Next.js",
+    description:
+      "Natively add us to your NextJs project with support for both App as well as Pages project structure!",
+    logo: logoNextjs,
+  },
+  {
+    href: "#vue-js",
+    name: "Vue.js",
+    description: "Simply add us to your router change and sit back!",
+    logo: logoVueJs,
+  },
+  {
+    href: "#react-native",
+    name: "React Native",
+    description: "Easily integrate our SDK with your React Native app for seamless survey support!",
+    logo: logoReactJs,
+  },
+];
+
+export const Libraries = () => {
+  return (
+    <div className="my-16 xl:max-w-none">
+      <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-slate-900/5 xl:max-w-none xl:grid-cols-2 2xl:grid-cols-3 dark:border-white/5">
+        {libraries.map((library) => (
+          <a
+            key={library.name}
+            href={library.href}
+            className="flex flex-row-reverse gap-6 rounded-2xl p-6 transition-all duration-100 ease-in-out hover:cursor-pointer hover:bg-slate-100/50 dark:hover:bg-slate-800/50">
+            <div className="flex-auto">
+              <h3 className="text-sm font-semibold text-slate-900 dark:text-white">{library.name}</h3>
+              <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">{library.description}</p>
+              <p className="mt-4">
+                <Button href={library.href} variant="text" arrow="right">
+                  Read more
+                </Button>
+              </p>
+            </div>
+            <Image src={library.logo} alt="" className="h-12 w-12" unoptimized />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,471 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import { Libraries } from "./components/Libraries";
+
+import ReactApp from "./images/react-in-app-survey-app-popup-form.webp";
+import WidgetConnected from "./images/widget-connected.webp";
+import WidgetNotConnected from "./images/widget-not-connected.webp";
+
+export const metadata = {
+  title: "Integrate Formbricks: Comprehensive Framework Guide & Integration Tutorial",
+  description:
+    "Master the integration of Formbricks into your application with our detailed guides. From HTML to ReactJS, NextJS, and VueJS, get step-by-step instructions and ensure seamless setup.",
+};
+
+# Framework Guides
+
+One can integrate Formbricks App Survey SDK into their app using multiple options! Checkout the options below that we provide! If you are looking
+for something else, please [join our Discord!](https://formbricks.com/discord) and we would be glad to help.
+
+<Libraries />
+
+---
+
+## Prerequisites
+
+Before getting started, make sure you have:
+
+1. A web application (behind your user authentication system) in your desired framework is set up and running.
+2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings.
+
+---
+
+## HTML
+
+All you need to do is copy a `<script>` tag to your HTML head, and that’s about it!
+
+<Col>
+<CodeGroup title="HTML">
+```html {{ title: 'index.html' }}
+<!-- START Formbricks Surveys -->
+<script type="text/javascript">
+!function(){
+    var apiHost = "https://app.formbricks.com";
+    var environmentId = "<your-environment-id>";
+    var userId = "<your-user-id>";
+    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=apiHost+"/api/packages/app";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: environmentId, apiHost: apiHost, userId: userId})},500)}();
+</script>
+<!-- END Formbricks Surveys -->
+```
+</CodeGroup>
+</Col>
+### Required customizations to be made
+
+<Properties>
+  <Property name="environment-id" type="string">
+    Formbricks Environment ID.
+  </Property>
+  <Property name="api-host" type="string">
+    URL of the hosted Formbricks instance.
+  </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
+</Properties>
+
+Refer to our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+
+---
+
+## ReactJS
+
+Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`. Note that zod is required as a peer dependency must also be installed in your project.
+
+<Col>
+<CodeGroup title="Install Formbricks JS library">
+```shell {{ title: 'npm' }}
+npm install @formbricks/js zod
+```
+```shell {{ title: 'pnpm' }}
+pnpm add @formbricks/js zod
+```
+```shell {{ title: 'yarn' }}
+yarn add @formbricks/js zod
+```
+
+</CodeGroup>
+</Col>
+Now, update your App.js/ts file to initialise Formbricks.
+<Col>
+<CodeGroup title="src/App.js">
+
+```js
+// other imports
+import formbricks from "@formbricks/js/app";
+
+if (typeof window !== "undefined") {
+  formbricks.init({
+    environmentId: "<environment-id>",
+    apiHost: "<api-host>",
+    userId: "<user-id>",
+  });
+}
+
+function App() {
+  // your own app
+}
+
+export default App;
+```
+
+</CodeGroup>
+</Col>
+### Required customizations to be made
+
+<Properties>
+  <Property name="environment-id" type="string">
+    Formbricks Environment ID.
+  </Property>
+  <Property name="api-host" type="string">
+    URL of the hosted Formbricks instance.
+  </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
+</Properties>
+
+Refer to our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+
+---
+
+## NextJS
+
+NextJs projects typically follow two main conventions: the App Directory and the Pages Directory.
+To ensure smooth integration with the Formbricks SDK, which operates solely on the client side, follow the
+guidelines for each convention below:
+
+- App directory: You will have to define a new component in `app/formbricks.tsx` file and call it in your `app/layout.tsx` file.
+- Pages directory: You will have to visit your `_app.tsx` and just initialise Formbricks there.
+
+Code snippets for the integration for both conventions are provided to further assist you.
+
+<Col>
+<CodeGroup title="Install Formbricks JS library">
+```shell {{ title: 'npm' }}
+npm install @formbricks/js zod
+```
+```shell {{ title: 'pnpm' }}
+pnpm add @formbricks/js zod
+```
+```shell {{ title: 'yarn' }}
+yarn add @formbricks/js zod
+```
+
+</CodeGroup>
+</Col>
+
+### App Directory
+
+<Col>
+<CodeGroup title="app/formbricks.tsx">
+
+```tsx {{title: 'Typescript'}}
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import formbricks from "@formbricks/js/app";
+
+export default function FormbricksProvider() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    formbricks.init({
+      environmentId: "<environment-id>",
+      apiHost: "<api-host>",
+      userId: "<user-id>",
+    });
+  }, []);
+
+  useEffect(() => {
+    formbricks?.registerRouteChange();
+  }, [pathname, searchParams]);
+
+  return null;
+}
+```
+
+</CodeGroup>
+
+<CodeGroup title="app/layout.tsx">
+```tsx {{title: 'Typescript'}}
+// other imports
+import FormbricksProvider from "./formbricks";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <FormbricksProvider />
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+</CodeGroup>
+</Col>
+
+Refer to our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
+
+### Pages Directory
+
+<Col>
+<CodeGroup title="src/pages/_app.tsx">
+
+```tsx {{ title: 'Typescript' }}
+// other import
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import formbricks from "@formbricks/js/app";
+
+if (typeof window !== "undefined") {
+  formbricks.init({
+    environmentId: "<environment-id>",
+    apiHost: "<api-host>",
+    userId: "<user-id>",
+  });
+}
+
+export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Connect next.js router to Formbricks
+    const handleRouteChange = formbricks?.registerRouteChange;
+    router.events.on("routeChangeComplete", handleRouteChange);
+
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, []);
+  return <Component {...pageProps} />;
+}
+```
+
+</CodeGroup>
+</Col>
+Refer to our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
+
+### Required customizations to be made
+
+<Properties>
+  <Property name="environment-id" type="string">
+    Formbricks Environment ID.
+  </Property>
+  <Property name="api-host" type="string">
+    URL of the hosted Formbricks instance.
+  </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
+</Properties>
+
+First we initialize the Formbricks SDK, ensuring that it only runs on the client side.
+To connect the Next.js router to Formbricks and ensure the SDK can keep track of every page change, we are registering the route change event.
+
+Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+
+---
+
+## VueJs
+
+Integrating the Formbricks SDK with Vue.js is a straightforward process.
+We will make sure the SDK is only loaded and used on the client side, as it's not intended for server-side usage.
+
+<Col>
+<CodeGroup title="Install Formbricks JS library">
+```shell {{ title: 'npm' }}
+npm install @formbricks/js
+````
+
+```shell {{ title: 'pnpm' }}
+pnpm add @formbricks/js
+```
+
+```shell {{ title: 'yarn' }}
+yarn add @formbricks/js
+```
+
+</CodeGroup>
+
+<CodeGroup title="src/formbricks.js">
+
+```js
+import formbricks from "@formbricks/js/app";
+
+if (typeof window !== "undefined") {
+  formbricks.init({
+    environmentId: "<environment-id>",
+    apiHost: "<api-host>",
+    userId: "<user-id>",
+  });
+}
+
+export default formbricks;
+```
+
+</CodeGroup>
+
+<CodeGroup title="src/main.js">
+
+```js
+// other imports
+import formbricks from "@/formbricks";
+
+const app = createApp(App);
+
+app.use(router);
+
+app.mount("#app");
+
+router.afterEach((to, from) => {
+  if (typeof formbricks !== "undefined") {
+    formbricks.registerRouteChange();
+  }
+});
+```
+
+</CodeGroup>
+</Col>
+### Required customizations to be made
+
+<Properties>
+  <Property name="environment-id" type="string">
+    Formbricks Environment ID.
+  </Property>
+</Properties>
+<Properties>
+  <Property name="api-host" type="string">
+    URL of the hosted Formbricks instance.
+  </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
+</Properties>
+
+Refer to our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+
+## React Native
+
+Install the Formbricks React Native SDK using one of the package managers, i.e., npm, pnpm, or yarn.
+
+<Col>
+<CodeGroup title="Install Formbricks JS library">
+```shell {{ title: 'npm' }}
+npm install @formbricks/react-native
+```
+```shell {{ title: 'pnpm' }}
+pnpm add @formbricks/react-native
+```
+```shell {{ title: 'yarn' }}
+yarn add @formbricks/react-native
+```
+
+</CodeGroup>
+</Col>
+Now, update your App.js/App.tsx file to initialize Formbricks:
+<Col>
+<CodeGroup title="src/App.js">
+
+```js
+// other imports
+import Formbricks from "@formbricks/react-native";
+
+const config = {
+  environmentId: "<environment-id>",
+  apiHost: "<api-host>",
+  userId: "<user-id>",
+};
+
+export default function App() {
+  return (
+    <>
+      {/* Your app content */}
+      <Formbricks initConfig={config} />
+    </>
+  );
+}
+```
+
+</CodeGroup>
+</Col>
+### Required customizations to be made
+
+<Properties>
+  <Property name="environment-id" type="string">
+    Formbricks Environment ID.
+  </Property>
+  <Property name="api-host" type="string">
+    URL of the hosted Formbricks instance.
+  </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
+</Properties>
+
+---
+
+## Validate your setup
+
+Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this:
+
+<MdxImage
+  src={WidgetNotConnected}
+  alt="Widget isnt connected"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+To this:
+
+<MdxImage
+  src={WidgetConnected}
+  alt="Widget is connected"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Debugging Formbricks Integration
+
+Enabling Formbricks debug mode in your browser is a useful troubleshooting step for identifying and resolving complex issues. This section outlines how to activate debug mode, covers common use cases, and provides insights into specific debug log messages.
+
+### Activate Debug Mode
+
+To activate Formbricks debug mode:
+
+1. **Via URL Parameter:**
+
+   - Enable debug mode mode by adding `?formbricksDebug=true` to your application's URL (e.g. `https://example.com?formbricksDebug=true` or `https://example.com?page=123&formbricksDebug=true`). This parameter will enable debugging for the current page.
+
+2. **View Debug Logs:**
+
+   - Open your browser's developer tools by pressing `F12` or right-clicking and selecting "Inspect."
+   - Navigate to the "Console" tab to view Formbricks debugging information.
+
+     **How to Open Browser Console:**
+
+     - **Google Chrome:** Press `F12` or right-click, select "Inspect," and go to the "Console" tab.
+     - **Firefox:** Press `F12` or right-click, select "Inspect Element," and go to the "Console" tab.
+     - **Safari:** Press `Option + Command + C` to open the developer tools and navigate to the "Console" tab.
+     - **Edge:** Press `F12` or right-click, select "Inspect Element," and go to the "Console" tab.
+
+### Common Use Cases
+
+Debug mode is beneficial for scenarios such as:
+
+- Verifying Formbricks initialization.
+- Identifying survey trigger issues.
+- Troubleshooting unexpected behavior.
+
+### Debug Log Messages
+
+Debug log messages provide insights into:
+
+- API calls and responses.
+- Event tracking, survey triggers and form interactions.
+- Initialization errors.
+
+**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**
+
+---

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

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

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

@@ -0,0 +1,107 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import AppSurvey from "./app-survey.webp";
+import GlobalWaitTime from "./global-wait-time.webp";
+import IgnoreWaitTime from "./ignore-wait-time.webp";
+import SurveyRecontact from "./survey-recontact.webp";
+
+export const metadata = {
+  title: "Recontact Options in Formbricks: When to show a survey again to a user",
+  description:
+    "Explore how to configure Recontact options in Formbricks to control the frequency of survey exposure to users, ensuring effective feedback collection without compromising user experience.",
+};
+
+#### App Surveys
+
+# Recontact Options
+
+Recontact options in Formbricks enable you to manage how often and under what conditions a survey is shown to a user. This feature is crucial for balancing effective feedback collection with a positive user experience by preventing survey fatigue.
+
+## When do Recontact Options come into play?
+
+Recontact options are the last layer of the logic that determines if a survey is shown to the current user. The logic goes as follows:
+
+1. Targeting: Does the current user targeted to fill out this survey? If yes...
+2. Trigger: Is the survey triggered? If yes...
+3. **Recontact Options:** Should the survey be shown (again) to this user? That's dependent on:
+
+- Did the user see any survey recently (meaning, has Global Waiting Time passed)?
+- Did the user see this specific survey already?
+- How many times did the user see this specific survey already?
+- Has the user already responded to this survey?
+
+As you can see, there are a lot of different cases to cover. Let's have a closer look 👇
+
+## Recontact Options
+
+<Note>By default, a survey is shown to each user only once.</Note>
+
+You can adjust the default behavior by modifying the Recontact Options for each survey in the settings:
+
+1. Open the Survey Editor for the survey you want to see & modify the Recontact Options for.
+2. Select the Settings Tab.
+3. Ensure your Survey type is set to **App Survey**.
+
+<MdxImage
+  src={AppSurvey}
+  alt="Choose Survey Type as App Survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+4. Scroll down to the Recontact Options section.
+
+Available Recontact Options include:
+
+- **Show only once**: (default) Displays the survey a single time, regardless of whether it was completed.
+- **Until they Submit a Response**: If tareting matches and trigger fires, Formbricks keeps showing the survey until the user submits a response.
+- **Keep Showing while Conditions Match**: Always shows the survey while specific conditions are met. Useful for continuous feedback collection, such as in [Docs Feedback Survey](/best-practices/docs-feedback) or the [Feedback Box](/best-practices/feedback-box).
+
+<MdxImage
+  src={SurveyRecontact}
+  alt="Choose Recontanct Options for the Survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Product-wide Global Waiting Time
+
+The Global Waiting Time is a universal blocker to make sure that no user sees too many surveys. This is particularly helpful when several teams of large organisations use Formbricks at the same time.
+
+<Note>The default Global Waiting Time is set to 7 days.</Note>
+
+To adjust the Global Waiting Time:
+
+1. Visit Formbricks Settings
+2. Go to Product Settings
+3. Find the **Recontact Waiting Time** section
+4. Modify the interval (in days) as needed.
+
+<MdxImage
+  src={GlobalWaitTime}
+  alt="Formbricks Product-Wide Wait Time"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Overriding Global Waiting Time for a Specific Survey
+
+For specific surveys, you may need to override the default waiting time. Below is how you can do that:
+
+1. In the Survey Editor, access the Settings Tab.
+2. Find the Ignore Waiting Time between Surveys toggle under Recontact Options.
+3. Enable this toggle to bypass the global setting.
+4. Set a custom recontact period:
+   - **Always Show Survey**: Displays the survey whenever triggered, ignoring the waiting time.
+   - **Wait `X` days before showing this survey again**: Sets a specific interval before the survey can be shown again.
+
+<MdxImage
+  src={IgnoreWaitTime}
+  alt="Ignore Global Waiting Time for a Specific Survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+---
+
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/docs/app/app-surveys/user-identification/page.mdx

@@ -0,0 +1,123 @@
+export const metadata = {
+  title: "Identifying Users in Formbricks App Surveys",
+  description:
+    "Dive into the importance of user identification in surveys. Boost your survey response rates and target the right users with Formbricks.",
+};
+
+#### App Surveys
+
+# User Identification
+
+User Identification helps you to not only segment your users but also to see more information about the user who responded to a survey. This helps you to target surveys to specific user segments and see more information about the user who responded to a survey.
+
+### Understanding Identified vs Unidentified Users
+
+<Note>
+  Formbricks App Surveys can **only be used with identified users**. If you are looking to run surveys on your
+  public-facing website, head over to the [Website Surveys](/website-surveys/quickstart) section.
+</Note>
+
+In Formbricks, understanding the distinction between identified and unidentified users is crucial for effective survey segmentation and targeted feedback collection.
+
+| Feature                                                  | Unidentified Users | Identified Users |
+| -------------------------------------------------------- | ------------------ | ---------------- |
+| Show surveys based on **trigger** actions                | ✅                 | ✅               |
+| Set **recontact details** to avoid survey fatique        | ✅                 | ✅               |
+| Target a subset of users using **attributes & segments** | ❌                 | ✅               |
+| Collect **user information** in Formbricks               | ❌                 | ✅               |
+| Track **custom attributes**                              | ❌                 | ✅               |
+| Counts towards your **monthly tacked user (MTU)** limit  | ❌                 | ✅               |
+| Recommended for **public-facing websites**               | ✅                 | ❌               |
+| Recommended for **web apps after login**                 | ❌                 | ✅               |
+
+## Identified Users
+
+Identified users are those for whom specific information has been set, notably the userId. This identification allows for more precise targeting of surveys and a deeper understanding of the feedback provided. When enabled, all information specified by you and all actions are sent to Formbricks.
+
+This method is recommended for applications where users are required to log in and will often return.
+
+### Setting User ID
+
+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.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 Custom User Attributes
+
+You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
+
+<Note>
+  Please note that the number of different attribute classes (e.g., "Plan," "First Name," etc.) is currently
+  limited to 150 attributes per environment.
+</Note>
+
+<Col>
+<CodeGroup title="Setting Custom Attributes">
+
+```javascript
+formbricks.setAttribute("Plan", "free");
+```
+
+</CodeGroup>
+</Col>
+
+Generally speaking, the setAttribute function works like this:
+
+<Col>
+<CodeGroup title="Setting Custom Attributes">
+
+```javascript
+formbricks.setAttribute("attribute_key", "attribute_value");
+```
+
+</CodeGroup>
+</Col>
+Where `attributeName` is the name of the attribute you want to set, and `attributeValue` is the value of the attribute you want to set.
+
+### Logging Out Users
+
+When a user logs out of your webpage, make sure to log them out of Formbricks as well. This will prevent new activity from being associated with an incorrect user. Use the logout function:
+
+<Col>
+<CodeGroup title="Logging out User">
+
+```javascript
+formbricks.logout();
+```
+
+</CodeGroup>
+</Col>