feat: Release @formbricks/js@1.1.3 (#1379)

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

.changeset/config.json

@@ -4,8 +4,8 @@
   "commit": false,
   "fixed": [],
   "linked": [],
-  "access": "restricted",
+  "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@formbricks/formbricks-com"]
+  "ignore": ["@formbricks/formbricks-com", "@formbricks/demo", "@formbricks/web"]
 }

.devcontainer/Dockerfile

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

.devcontainer/devcontainer.json

@@ -0,0 +1,30 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node-postgres
+// Update the VARIANT arg in docker-compose.yml to pick a Node.js version
+{
+	"name": "Node.js & PostgreSQL",
+	"dockerComposeFile": "docker-compose.yml",
+	"service": "app",
+	"workspaceFolder": "/workspace",
+
+	// Configure tool-specific properties.
+	"customizations": {
+		// Configure properties specific to VS Code.
+		"vscode": {
+			// Add the IDs of extensions you want installed when the container is created.
+			"extensions": [
+				"dbaeumer.vscode-eslint"
+			]
+		}
+	},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// This can be used to network with other containers or with the host.
+	"forwardPorts": [3000, 5432, 8025],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "pnpm install",
+
+	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

.devcontainer/docker-compose.yml

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

.dockerignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+**/node_modules
+.pnp
+.pnp.js
+.pnpm-store/
+
+# testing
+coverage
+
+# next.js
+**/.next
+**/out
+**/build
+
+# node
+**/dist
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# turbo
+.turbo
+
+# nixos stuff
+.direnv
+
+.vscode
+.github
+**/.turbo

.env.example

@@ -0,0 +1,132 @@
+/*
+########################################################################
+# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------#
+########################################################################
+
+
+############
+#  BASICS  #
+############
+
+WEBAPP_URL=http://localhost:3000
+
+SURVEY_BASE_URL=http://localhost:3000/s
+
+# Set this if you want to have a shorter link for surveys
+SHORT_SURVEY_BASE_URL=
+
+# Encryption keys
+# Please set both for now, we will change this in the future
+
+# You can use: `openssl rand -base64 16` to generate one
+FORMBRICKS_ENCRYPTION_KEY=
+
+# You can use: `openssl rand -base64 24` to generate one
+ENCRYPTION_KEY=
+
+##############
+#  DATABASE  #
+##############
+
+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 -base64 32` to generate one
+NEXTAUTH_SECRET=RANDOM_STRING
+
+# Set this to your public-facing URL, e.g., https://example.com
+# You do not need the NEXTAUTH_URL environment variable in Vercel.
+NEXTAUTH_URL=http://localhost:3000
+
+################
+#  MAIL SETUP  #
+################
+
+# Necessary if email verification and password reset are enabled.
+# See optional configurations below if you want to disable these features.
+
+MAIL_FROM=noreply@example.com
+SMTP_HOST=localhost
+SMTP_PORT=1025
+# Enable SMTP_SECURE_ENABLED for TLS (port 465)
+SMTP_SECURE_ENABLED=0
+SMTP_USER=smtpUser
+SMTP_PASSWORD=smtpPassword
+
+
+########################################################################
+# ------------------------------ OPTIONAL -----------------------------#
+########################################################################
+
+# Uncomment the variables you would like to use and customize the values.
+
+#####################
+# Disable Features  #
+#####################
+
+# Email Verification. If you enable Email Verification you have to setup SMTP-Settings, too.
+# EMAIL_VERIFICATION_DISABLED=1
+
+# Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
+# PASSWORD_RESET_DISABLED=1
+
+# Signup. Disable the ability for new users to create an account.
+# SIGNUP_DISABLED=1
+
+# Team Invite. Disable the ability for invited users to create an account.
+# INVITE_DISABLED=1
+
+##########
+# Other  #
+##########
+
+# Display privacy policy, imprint and terms of service links in the footer of signup & public pages.
+PRIVACY_URL=
+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=
+
+# Configure this when you want to ship JS & CSS files from a complete URL instead of the current domain
+# ASSET_PREFIX_URL=
+
+# Stripe Billing Variables
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+
+# Configure Formbricks usage within Formbricks
+NEXT_PUBLIC_FORMBRICKS_API_HOST=
+NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
+NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
+
+# Oauth credentials for Google sheet integration 
+GOOGLE_SHEETS_CLIENT_ID=
+GOOGLE_SHEETS_CLIENT_SECRET=
+GOOGLE_SHEETS_REDIRECT_URL=
+
+# Oauth credentials for Airtable integration 
+AIR_TABLE_CLIENT_ID=
+
+*/

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,44 +0,0 @@
----
-name: Bug report
-about: Something not working as expected? Let us look into it
-title: ""
-labels: bug
-assignees: ""
----
-
-Found a bug? Please fill out the sections below. 👍
-
-### Issue Summary
-
-<!--
-A summary of the issue. This needs to be a clear detailed-rich summary.
--->
-
-(Write your answer here.)
-
-### Steps to Reproduce
-
-<!--
-1. (for example) Went to ...
-2. Clicked on...
-3. ...
-
-Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?
--->
-
-(Write your answer here.)
-
-## Environment
-
-- [ ] snoopForms Cloud (app.snoopforms.com)
-- [ ] self-hosted snoopForms, version/commit: [please provide]
-
-### Additional Context
-
-<!--
-- Browser version, screen recording, console logs, network requests: You can make a recording with [Bird Eats Bug](https://birdeatsbug.com/).
-- Node.js version
-- Anything else that you think could be an issue.
--->
-
-(Write your answer here.)

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
   - name: Questions
-    url: https://discord.gg/3YFcABF2Ts
+    url: https://formbricks.com/discord
     about: Ask a general question about the project on our Discord server

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,41 +0,0 @@
----
-name: Feature request
-about: Suggest a feature or idea
-title: ""
-labels: feature
-assignees: ""
----
-
-### Is your proposal related to a problem?
-
-<!--
-  Provide a clear and concise description of what the problem is.
-  For example, "I'm always frustrated when..."
--->
-
-(Write your answer here.)
-
-### Describe the solution you'd like
-
-<!--
-  Provide a clear and concise description of what you want to happen.
--->
-
-(Describe your proposed solution here.)
-
-### Describe alternatives you've considered
-
-<!--
-  Let us know about other solutions you've tried or researched.
--->
-
-(Write your answer here.)
-
-### Additional context
-
-<!--
-  Is there anything else you can add about the proposal?
-  You might want to link to related issues here, if you haven't already.
--->
-
-(Write your answer here.)

.github/ISSUE_TEMPLATE/feature_request.yml

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

.github/PULL_REQUEST_TEMPLATE.md

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

.github/labeler.yml

@@ -0,0 +1,6 @@
+"❗️ migrations":
+  - packages/database/migrations/**/migration.sql
+
+"❗️ .env changes":
+  - .env.example
+  - .env.docker

.github/workflows/apply-issue-labels-to-pr.yml

@@ -0,0 +1,74 @@
+name: "Apply issue labels to PR"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+
+jobs:
+  label_on_pr:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: none
+      issues: read
+      pull-requests: write
+
+    steps:
+      - name: Apply labels from linked issue to PR
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            async function getLinkedIssues(owner, repo, prNumber) {
+              const query = `query GetLinkedIssues($owner: String!, $repo: String!, $prNumber: Int!) {
+                repository(owner: $owner, name: $repo) {
+                  pullRequest(number: $prNumber) {
+                    closingIssuesReferences(first: 10) {
+                      nodes {
+                        number
+                        labels(first: 10) {
+                          nodes {
+                            name
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }`;
+
+              const variables = {
+                owner: owner,
+                repo: repo,
+                prNumber: prNumber,
+              };
+
+              const result = await github.graphql(query, variables);
+              return result.repository.pullRequest.closingIssuesReferences.nodes;
+            }
+
+            const pr = context.payload.pull_request;
+            const linkedIssues = await getLinkedIssues(
+              context.repo.owner,
+              context.repo.repo,
+              pr.number
+            );
+
+            const labelsToAdd = new Set();
+            for (const issue of linkedIssues) {
+              if (issue.labels && issue.labels.nodes) {
+                for (const label of issue.labels.nodes) {
+                  labelsToAdd.add(label.name);
+                }
+              }
+            }
+
+            if (labelsToAdd.size) {
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: pr.number,
+                labels: Array.from(labelsToAdd),
+              });
+            }

.github/workflows/build.yml

@@ -0,0 +1,34 @@
+name: Build
+on:
+  workflow_call:
+jobs:
+  build:
+    name: Build Formbricks-web
+    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: create .env
+        run: cp .env.example .env
+
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -base64 24)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
+      - name: Build Formbricks-web
+        run: pnpm build --filter=web...

.github/workflows/checks.yml

@@ -1,28 +0,0 @@
-name: Checks
-on: [push]
-jobs:
-  build:
-    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
-    runs-on: ubuntu-latest
-
-    env:
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-
-      - name: Setup Node.js 16.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 16.x
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.2
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Lint
-        run: pnpm lint

.github/workflows/cron-closeOnDate.yml

@@ -0,0 +1,23 @@
+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-weeklySummary.yml

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

.github/workflows/labeler.yml

@@ -0,0 +1,19 @@
+name: "Pull Request Labeler"
+on:
+  - pull_request_target
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+jobs:
+  labeler:
+    name: Pull Request Labeler
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@v4
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          # https://github.com/actions/labeler/issues/442#issuecomment-1297359481
+          sync-labels: ""

.github/workflows/lint.yml

@@ -0,0 +1,34 @@
+name: Lint
+on:
+  workflow_call:
+jobs:
+  build:
+    name: Linters
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    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: create .env
+        run: cp .env.example .env
+
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -base64 24)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
+      - name: Lint
+        run: pnpm lint

.github/workflows/pr.yml

@@ -0,0 +1,37 @@
+name: PR Update
+
+on:
+  pull_request_target:
+    branches:
+      - main
+  merge_group:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    name: Run Tests
+    uses: ./.github/workflows/test.yml
+    secrets: inherit
+
+  lint:
+    name: Run Linters
+    uses: ./.github/workflows/lint.yml
+    secrets: inherit
+
+  build:
+    name: Build Formbricks-web
+    uses: ./.github/workflows/build.yml
+    secrets: inherit
+
+  required:
+    needs: [lint, test, build]
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - name: fail if conditional jobs failed
+        if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')
+        run: exit 1

.github/workflows/release-changesets.yml

@@ -1,4 +1,4 @@
-name: Release
+name: Release Changesets
 
 on:
   push:
@@ -7,10 +7,15 @@ on:
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
 jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
+    timeout-minutes: 15
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
@@ -18,16 +23,16 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@v2
 
-      - name: Setup Node.js 16.x
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.2
+        uses: pnpm/action-setup@v2.2.4
 
       - name: Install Dependencies
-        run: pnpm install
+        run: pnpm install --config.platform=linux --config.architecture=x64
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets

.github/workflows/release-docker.yml

@@ -0,0 +1,57 @@
+name: Release on Dockerhub
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  release-image-on-dockerhub:
+    name: Release on Dockerhub
+    runs-on: ubuntu-latest
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+      DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
+    steps:
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 16)
+          echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
+
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -base64 24)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Get Release Tag
+        id: extract_release_tag
+        run: |
+          TAG=${{ github.ref }}
+          TAG=${TAG#refs/tags/v}
+          echo "RELEASE_TAG=$TAG" >> $GITHUB_ENV
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./apps/web/Dockerfile
+          push: true
+          tags: |
+            ${{ secrets.DOCKER_USERNAME }}/formbricks:${{ env.RELEASE_TAG }}
+            ${{ secrets.DOCKER_USERNAME }}/formbricks:latest
+          build-args: |
+            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
+            DATABASE_URL=${{ env.DATABASE_URL }}

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

@@ -0,0 +1,47 @@
+name: "Check PR"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: write
+
+jobs:
+  validate-pr:
+    name: PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        id: lint_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        # When the previous steps fails, the workflow would stop. By adding this
+        # condition you can continue the execution with the populated error message.
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Hey there and thank you for opening this pull request! 👋🏼
+
+            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
+
+            Details:
+
+            ```
+            ${{ steps.lint_pr_title.outputs.error_message }}
+            ```
+
+      # Delete a previous comment when the issue has been resolved
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-title-lint-error
+          message: |
+            Thank you for following the naming conventions for pull request titles! 🙏

.github/workflows/test.yml

@@ -0,0 +1,36 @@
+name: Tests
+on:
+  workflow_call:
+jobs:
+  build:
+    name: 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
+
+      - 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: create .env
+        run: cp .env.example .env
+
+      - name: Build formbricks-js dependencies
+        run: pnpm build --filter=js
+
+      - name: Test
+        run: pnpm test

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

@@ -0,0 +1,27 @@
+name: "Welcome new contributors"
+
+on:
+  issues:
+    types: opened
+  pull_request:
+    types: opened
+
+permissions:
+  pull-requests: write
+  issues: write
+
+jobs:
+  welcome-message:
+    name: Welcoming New Users
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    if: github.event.action == 'opened'
+    steps:
+      - uses: actions/first-interaction@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          pr-message: |-
+            Thank you so much for making your first Pull Request and taking the time to improve Formbricks! 🚀🙏❤️
+            Feel free to join the conversation at [Discord](https://formbricks.com/discord)
+          issue-message: |
+            Thank you for opening your first issue! 🙏❤️ One of our team members will review it and get back to you as soon as it possible. 😊

.gitignore

@@ -33,10 +33,15 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 !packages/database/.env
+!apps/web/.env
+
+# Prisma generated files
+packages/database/zod
 
 # turbo
 .turbo
 
 # nixos stuff
 .direnv
-apps/examples
+
+Zone.Identifier

.gitpod.Dockerfile

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

.gitpod.yml

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

.gitpod/init.bash

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+images=($(yq eval '.services.*.image' packages/database/docker-compose.yml))
+
+pull_image() {
+  docker pull "$1"
+}
+
+# install packages in background
+pnpm i &
+
+# pull images
+for image in "${images[@]}"
+do
+  pull_image "$image" &
+done
+
+wait

.gitpod/setup-demo.bash

@@ -0,0 +1,5 @@
+for task in $(yq -r -oy '.pipeline."@formbricks/demo#go".dependsOn[]' turbo.json); do
+  package="${task%#*}"
+  command="${task#*#}"
+  turbo --filter "$package" $command
+done

.gitpod/setup-web.bash

@@ -0,0 +1,5 @@
+for task in $(yq -r -oy '.pipeline."@formbricks/web#go".dependsOn[]' turbo.json); do
+  package="${task%#*}"
+  command="${task#*#}"
+  turbo --filter "$package" $command
+done

.husky/pre-commit

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

.npmrc

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

.vercelignore

@@ -0,0 +1 @@
+apps/web/.env

.vscode/launch.json

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

.vscode/settings.json

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

LICENSE

@@ -1,21 +1,670 @@
-MIT License
+Copyright (c) 2023 Formbricks GmbH
 
-Copyright (c) 2022 Matthias Nannt
+Portions of this software are licensed as follows:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+- All content that resides under the "packages/ee/" directory of this repository, if that directory exists, is licensed under the license defined in "packages/ee/LICENSE".
+- All content that resides under the "packages/js/", "packages/errors/" and "packages/api/" directories of this repository, if that directories exist, is licensed under the "MIT" license as defined in the "LICENSE" files of these packages.
+- All third party components incorporated into the Formbricks Software are licensed under the original license provided by the owner of the applicable component.
+- Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+Everyone is permitted to copy and distribute verbatim copies
+of this license document, but changing it is not allowed.
+
+                            Preamble
+
+The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate. Many developers of free software are heartened and
+encouraged by the resulting cooperation. However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community. It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server. Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals. This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+1. Definitions.
+
+"This License" refers to version 3 of the GNU Affero General Public License.
+
+"Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+"The Program" refers to any copyrightable work licensed under this
+License. Each licensee is addressed as "you". "Licensees" and
+"recipients" may be individuals or organizations.
+
+To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy. The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+1. Source Code.
+
+The "source code" for a work means the preferred form of the work
+for making modifications to it. "Object code" means any non-source
+form of a work.
+
+A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+The Corresponding Source for a work in source code form is that
+same work.
+
+2. Basic Permissions.
+
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force. You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright. Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+Conveying under any other circumstances is permitted solely under
+the conditions stated below. Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+4. Conveying Verbatim Copies.
+
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+5. Conveying Modified Source Versions.
+
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+6. Conveying Non-Source Forms.
+
+You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling. In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage. For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product. A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+"Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source. The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed. Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+7. Additional Terms.
+
+"Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+8. Termination.
+
+You may not propagate or modify a covered work except as expressly
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+9. Acceptance Not Required for Having Copies.
+
+You are not required to accept this License in order to receive or
+run a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+10. Automatic Licensing of Downstream Recipients.
+
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+
+An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+11. Patents.
+
+A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's "contributor version".
+
+A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License. You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+12. No Surrender of Others' Freedom.
+
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all. For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+13. Remote Network Interaction; Use with the GNU General Public License.
+
+Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software. This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+14. Revised Versions of this License.
+
+The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time. Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number. If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation. If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+Later license versions may give you additional or different
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+15. Disclaimer of Warranty.
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+16. Limitation of Liability.
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+17. Interpretation of Sections 15 and 16.
+
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+To do so, attach the following notices to the program. It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source. For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code. There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

README.md

@@ -1,83 +1,159 @@
+<div id="top"></div>
 <p align="center">
-<a href="https://github.com/formbricks/formbricks">
-    <img src="https://user-images.githubusercontent.com/675065/201035557-a94a6bde-dff0-4bd3-9693-ec9257a9b1b3.svg" alt="Logo" width="500">
+<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 Forms & Survey Toolbox
+    The Open Source Survey & Experience Management solution for fast growing companies
     <br />
     <a href="https://formbricks.com/">Website</a>  |  <a href="https://formbricks.com/discord">Join Discord community</a>
   </p>
 </p>
 
 <p align="center">
-<a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-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://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://formbricks.com/discord"><img src="https://img.shields.io/discord/979077669410979880?label=Discord&logo=discord&logoColor=%23fff" alt="Join Formbricks Discord"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
    <a href="https://news.ycombinator.com/item?id=32303986"><img src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600" alt="Hacker News"></a>
    <a href="https://www.producthunt.com/products/snoopforms"><img src="https://img.shields.io/badge/Product%20Hunt-%232%20Product%20of%20the%20Day-orange?logo=producthunt&logoColor=%23fff" alt="Product Hunt"></a>
+   <a href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator" alt="Github Accelerator"></a>
+<a href="https://github.com/formbricks/formbricks/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
 </p>
 
 <br/>
 
-> :octocat: Are you looking for snoopForms - the Open Source Typeform Alternative? We're building the next stage of the snoopForms evolution here with Formbricks - more modular, more open, and for all your form needs. If you still are looking for the code of snoopForms you can find it in the [snoopforms branch](https://github.com/formbricks/formbricks/tree/snoopforms).
+<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">
+</p>
 
-> :warning: Repository still in progress `#buildinpublic`
+<p align="center">
+  <a href="https://trendshift.io/repositories/2570" target="_blank"><img src="https://trendshift.io/api/badge/repositories/2570" alt="Trendshift Badge for formbricks/formbricks" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
 
-## About Formbricks
+<img width="1527" alt="formtribe hackathon" src="https://github.com/formbricks/formbricks/assets/72809645/addc3a5b-421c-4c8d-8be2-eedf087100ed">
 
-![formbricks-twitter-header-open source forms and survey tools_smaller](https://user-images.githubusercontent.com/72809645/201055057-0883bbcf-86f2-4ea1-83f0-3a190a12f6cd.png)
+## 🔥 The FormTribe Hackathon is on!
 
-We're building all essential form functionality so you don't have to. Modular, customizable, extendable. And open source.
+To celebrate Hacktoberfest, we've launched our FormTribe hackathon. Write code or perform non-code side quests to collect points and increase your chances of winning the MacBook Air M2!
 
-### Mission: Stop rewriting existing code
+**Join lottery with a [single tweet!](https://formtribe.com). All info on [formtribe.com](https://formtribe.com)**
 
-We want to solve forms once and for all. If, in 10 years, a web developer rewrites core form functionality instead of building on top of our stack, we didn’t do our job. We want you to build your next big thing faster. Our big thing is the last form tool humanity needs. Hold us accountable!
+## ✨ About Formbricks
 
-[Read more in our blog](https://formbricks-com.vercel.app/blog/snoopforms-becomes-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">
 
-## Our Toolbox
+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.
 
-Build a 'home-cooked' solution at the fraction of the time. We do the heavy lifting, you customize to your needs.
+**Try it out in the cloud at [formbricks.com](https://formbricks.com)**
 
-### React Forms Library
+## 💪 Mission: Make customer-centric decisions based on data.
 
-Building React forms has never been quicker. But there is more...
-
-Loads of question types, validation, multi-page forms, logic jumps, i18n, custom styles - all the good stuff you want, but don't want to build yourself.
-Building forms fast is great, but where do you pipe your data? And what is it worth without a schema?"
-
-### Core API - The OS form engine
-
-Your form looks perfect? Time to build integrations...
-
-Our core API handles all of the submission handling of your forms and surveys. Our main objective is versatility, so that you can use it with any currently existing form. Soon we will integrate it with our React Form Builder. This allows for handling schemas so that you get a full image of your submission data.
+Formbricks helps you apply best practices from data-driven work and experience management to make better business decisions. Ask users as they experience your product - and leverage a significantly higher conversion rate. Gather all insights you can - including partial submissions and build conviction for the next product decision. Better data, better business.
 
 ### Features
 
-- **Fast Form Creation**: Build complex forms with our React Lib. Our data pipes also work with any other form.
-- **Data Pipelines**: Save your data where you need it. Use webhooks or pre-built integrations.
-- **Powerful Data Insights**: View and manage your results quicker. Handle submissions in our dahsboard.
-- **No-Code Builder**: Let your operators create and change forms. Stick with React to style and embed forms. `(coming soon)`
-- **Built-in Analytics**: Opening rate, drop-offs, conversions. Use privacy-first analytics out of the box. `(coming soon)`
-- **Survey Templates**: NPS, CSAT, Employee Surveys. Name your business objective, we have the questions. `(coming soon)`
+- 📲 Create **in-product surveys** with our no code editor with multiple question types.
+- 📚 Choose from a variety of best-practice **templates**.
+- 👩🏻 Launch and **target your surveys to specific user groups** without changing your application code.
+- 🔗 Create shareable **link surveys**.
+- 👨‍👩‍👦 Invite your team members to **collaborate** on your surveys.
+- 🔌 Integrate Formbricks with **Slack, Posthog, Zapier, n8n and more**.
+- 🔒 All **open source**, transparent and self-hostable.
 
-### Why Formbricks
+### Built on Open Source
 
-- **Futureproof**: Form needs change. With Formbricks you’ll avoid island solutions right from the start.
-- **Privacy by design**: Self-host the entire product and fly through privacy compliance reviews.
-- **Community driven**: We're building for you. If you need something specific, we’re happy to build it!
-- **Great DX**: We love a solid developer experience. We felt your pain and do our best to avoid it.
-- **Customizable**: We have to build opinionated. If it doesn't suit your need, just change it up.
-- **Extendable**: Even though we try, we cannot build every single integration. With Formbricks, you can.
+- 💻 [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/)
 
-### Built With
+## 🚀 Getting started
 
-- [Typescript](https://www.typescriptlang.org/)
-- [Next.js](https://nextjs.org/)
-- [React](https://reactjs.org/)
-- [TailwindCSS](https://tailwindcss.com/)
-- [Prisma](https://prisma.io/)
+We've got several options depending on your need to help you quickly get started with Formbricks.
 
-## Installation and usage
+### ☁️ Cloud Version
 
-Coming soon - we will update this Readme in the weeks ahead and show you how to leverage all the advantages of Formbricks
+Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://formbricks.com).
+
+### 🐳 Self-hosted version
+
+Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
+
+(In the future we may develop additional features that aren't in the free Open-Source version).
+
+If you opt for self-hosting Formbricks, here are a few options to consider:
+
+#### Docker
+
+To get started with self-hosting with Docker, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).
+
+#### Community managed One Click Hosting
+
+##### Railway
+
+You can deploy Formbricks on [Railway](https://railway.app) using the button below.
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
+
+### 👨‍💻 Development
+
+#### Prerequisites
+
+Here is what you need to be able to run Formbricks:
+
+- [Node.js](https://nodejs.org/en) (Version: >=18.x)
+- [Pnpm](https://pnpm.io/)
+- [Docker](https://www.docker.com/) - to run PostgreSQL and MailHog
+
+#### Local Setup
+
+To get started locally, we've got a [guide to help you](https://formbricks.com/docs/contributing/setup).
+
+#### Gitpod Setup
+
+1. Click the button below to open this project in Gitpod.
+
+2. This will open a fully configured workspace in your browser with all the necessary dependencies already installed.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/formbricks/formbricks)
+
+## ✍️ Contribution
+
+We are very happy if you are interested in contributing to Formbricks 🤗
+
+Here are a few options:
+
+- Star this repo.
+- Create issues every time you feel something is missing or goes wrong.
+- Upvote issues with 👍 reaction so we know what's the demand for a particular issue to prioritize it within the roadmap.
+
+Please check out [our contribution guide](https://formbricks.com/docs/contributing/introduction) and our [list of open issues](https://github.com/formbricks/formbricks/issues) for more information.
+
+## All Thanks To Our Contributors
+
+<a href="https://github.com/formbricks/formbricks/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=formbricks/formbricks" />
+</a>
+
+## 📆 Contact us
+
+Let's have a chat about your survey needs and get you started.
+
+<a href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
+
+## ⚖️ License
+
+Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.
+
+## 🔒 Security
+
+We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See [`SECURITY.md`](./SECURITY.md) for more information.
+
+<p align="right"><a href="#top">🔼 Back to top</a></p>

SECURITY.md

@@ -0,0 +1,75 @@
+# Security Policy of Formbricks
+
+This is Formbrick's security policy. Please reach out to us
+on our Discord or, if privately, via <security@formbricks.com>
+
+## Introduction
+
+Formbricks is dedicated to maintaining the integrity and security of our systems and our clients' data. In our pursuit to keep our technology environment safe, we welcome the collaborative efforts of our user community and security researchers to enhance security protocols and continuously secure our platform. This security policy outlines our approach towards handling data, ensuring secure practices, and managing the disclosure of vulnerabilities.
+
+## I. Third-Party Data Usage Policy
+
+We affirm our commitment towards meticulous validation of data usage and collection scope by any third-party library or integration utilized in our operations. We adhere to the following protocols:
+
+- Rigorous vetting of third-party services to confirm adherence to our data usage and privacy standards.
+- Continuous monitoring and assessment of third-party practices to ensure ongoing compliance.
+- Immediate action to mitigate risks if a third-party deviates from agreed-upon data practices.
+
+## II. Annual Penetration Testing (Pentest)
+
+To understand and bolster our security stature, Formbricks undertakes:
+
+- Annual penetration testing executed by an independent, skilled third party.
+- Prioritization of any identified issues, with immediate action on critical vulnerabilities.
+- Transparent communication and learnings shared with relevant stakeholders.
+
+## III. Vulnerability Reporting and Management
+
+Please do not use attacks on physical security, social engineering, distributed denial of service, spam or applications of third parties.
+
+### **A. When to Report a Vulnerability**
+
+We invite you to report if:
+
+- A potential security vulnerability in Formbricks is identified.
+- There is uncertainty about how a vulnerability affects our platform.
+- A vulnerability is detected in a dependent project of Formbricks.
+- An action was executed which, in your belief, should be restricted.
+
+### **B. When Reporting is Unnecessary**
+
+Avoid reporting if:
+
+- Assistance is needed to optimize Formbricks for security – please engage on our Discord for this.
+- Help is required for applying security-related updates.
+- The concern is not related to security.
+
+### **C. Vulnerability Reporting Procedure**
+
+In the interest of responsibly managing vulnerabilities, please adhere to the following procedure:
+
+> Do not reveal the problem to others until it has been resolved.
+
+1. **Send a Detailed Report**:
+   - Address emails to [security@formbricks.com](mailto:security@formbricks.com).
+   - Include:
+     - Problem description.
+     - Detailed, reproducible steps, with screenshots where possible.
+     - Affected version(s).
+     - Known possible mitigations.
+     - Your Discord username or preferred contact method.
+2. **Acknowledgement of Receipt**:
+   - Our security team will acknowledge receipt and provide an initial response within 48 hours.
+   - Following verification of the vulnerability and the fix, a release plan will be formulated, with the fix deployed between 7 to 28 days, depending on the severity and complexity.
+3. **Ongoing Communication**:
+   - A project maintainer may engage with you for additional details or clarification.
+   - We appreciate your patience as we explore the reported item, verify its authenticity, and ascertain the existence of a vulnerability.
+
+---
+
+### Please Read the below carefully
+
+If you have followed the instructions above, we will **not** take any legal action against you in regard to the report,
+We will handle your report with strict confidentiality, and not pass on your personal details to third parties without your permission, We will keep you informed of the progress towards resolving the problem, In the public information concerning the problem reported, we will give your name as the discoverer of the problem (unless you desire otherwise).
+
+We, at Formbricks, wish to express our gratitude towards all individuals who assist us in fortifying our security posture. Your responsible disclosure and cooperation enable us to elevate our security protocols, safeguarding our platform and data therein.

apps/demo/.env.example

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

apps/demo/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["formbricks"],
+};

apps/demo/.gitignore

@@ -0,0 +1,36 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/demo/components/LayoutApp.tsx

@@ -0,0 +1,13 @@
+import Sidebar from "./Sidebar";
+
+export default function LayoutApp({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-full">
+      {/* Static sidebar for desktop */}
+      <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
+        <Sidebar />
+      </div>
+      <div className="flex flex-1 flex-col lg:pl-64">{children}</div>
+    </div>
+  );
+}

apps/demo/components/Sidebar.tsx

@@ -0,0 +1,65 @@
+import { classNames } from "@/lib/utils";
+import {
+  ClockIcon,
+  CogIcon,
+  CreditCardIcon,
+  DocumentChartBarIcon,
+  HomeIcon,
+  QuestionMarkCircleIcon,
+  ScaleIcon,
+  ShieldCheckIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/outline";
+
+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 },
+];
+const secondaryNavigation = [
+  { name: "Settings", href: "#", icon: CogIcon },
+  { name: "Help", href: "#", icon: QuestionMarkCircleIcon },
+  { name: "Privacy", href: "#", icon: ShieldCheckIcon },
+];
+
+export default function Sidebar({}) {
+  return (
+    <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
+      <nav
+        className="mt-5 flex flex-1 flex-col divide-y divide-cyan-800 overflow-y-auto"
+        aria-label="Sidebar">
+        <div className="space-y-1 px-2">
+          {navigation.map((item) => (
+            <a
+              key={item.name}
+              href={item.href}
+              className={classNames(
+                item.current ? "bg-cyan-800 text-white" : "text-cyan-100 hover:bg-cyan-600 hover:text-white",
+                "group flex items-center rounded-md px-2 py-2 text-sm font-medium leading-6"
+              )}
+              aria-current={item.current ? "page" : undefined}>
+              <item.icon className="mr-4 h-6 w-6 flex-shrink-0 text-cyan-200" aria-hidden="true" />
+              {item.name}
+            </a>
+          ))}
+        </div>
+        <div className="mt-6 pt-6">
+          <div className="space-y-1 px-2">
+            {secondaryNavigation.map((item) => (
+              <a
+                key={item.name}
+                href={item.href}
+                className="group flex items-center rounded-md px-2 py-2 text-sm font-medium leading-6 text-cyan-100 hover:bg-cyan-600 hover:text-white">
+                <item.icon className="mr-4 h-6 w-6 text-cyan-200" aria-hidden="true" />
+                {item.name}
+              </a>
+            ))}
+          </div>
+        </div>
+      </nav>
+    </div>
+  );
+}

apps/demo/lib/utils.ts

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

apps/demo/next-env.d.ts

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

apps/demo/next.config.js

@@ -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",
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;

apps/demo/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@formbricks/demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf .turbo node_modules .next",
+    "dev": "next dev -p 3002 --turbo",
+    "go": "next dev -p 3002",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@formbricks/js": "workspace:*",
+    "@heroicons/react": "^2.0.18",
+    "next": "13.5.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "eslint-config-formbricks": "workspace:*"
+  }
+}

apps/demo/pages/_app.tsx

@@ -0,0 +1,50 @@
+import formbricks from "@formbricks/js";
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import "../styles/globals.css";
+
+declare const window: any;
+
+if (typeof window !== "undefined") {
+  if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+    formbricks.init({
+      environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
+      apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
+      debug: true,
+    });
+    window.formbricks = formbricks;
+  }
+}
+
+export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Connect next.js router to Formbricks
+    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
+      const handleRouteChange = formbricks?.registerRouteChange;
+      router.events.on("routeChangeComplete", handleRouteChange);
+
+      return () => {
+        router.events.off("routeChangeComplete", handleRouteChange);
+      };
+    }
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <title>Demo App</title>
+      </Head>
+      {(!process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID ||
+        !process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) && (
+        <div className="w-full bg-red-500 p-3 text-center text-sm text-white">
+          Please set Formbricks environment variables in apps/demo/.env
+        </div>
+      )}
+      <Component {...pageProps} />
+    </>
+  );
+}

apps/demo/pages/_document.tsx

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

apps/demo/pages/app/index.tsx

@@ -0,0 +1,233 @@
+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-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>
+        <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={() => {
+                  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">
+                No-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/no-code"
+                  className="underline dark:text-blue-500"
+                  target="_blank">
+                  No Code Action
+                </a>{" "}
+                as long as you created it beforehand in the Formbricks App.{" "}
+                <a
+                  href="https://formbricks.com/docs/actions/no-code"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  Here are instructions on how to do it.
+                </a>
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button
+                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">
+                Set Plan to &apos;Free&apos;
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/attributes/custom-attributes"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  attribute
+                </a>{" "}
+                &apos;Plan&apos; to &apos;Free&apos;. If the attribute does not exist, it creates it.
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button
+                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">
+                Set Plan to &apos;Paid&apos;
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/attributes/custom-attributes"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  attribute
+                </a>{" "}
+                &apos;Plan&apos; to &apos;Paid&apos;. If the attribute does not exist, it creates it.
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button
+                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">
+                Set Email
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sets the{" "}
+                <a
+                  href="https://formbricks.com/docs/attributes/identify-users"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  user email
+                </a>{" "}
+                &apos;test@web.com&apos;
+              </p>
+            </div>
+          </div>
+          <div className="p-6">
+            <div>
+              <button
+                onClick={() => {
+                  formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
+                }}
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
+                Set User ID
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-gray-300">
+                This button sets an external{" "}
+                <a
+                  href="https://formbricks.com/docs/attributes/identify-users"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  user ID
+                </a>{" "}
+                to &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/demo/pages/signin/index.tsx

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,202 @@
+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/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/demo/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

apps/demo/public/thirteen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>

apps/demo/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

apps/demo/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: "class",
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/forms")],
+};

apps/demo/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "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": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

apps/formbricks-com/.env.example

@@ -0,0 +1,6 @@
+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=

apps/formbricks-com/.gitignore

@@ -23,7 +23,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local
@@ -35,4 +34,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.vscode
+public/sitemap*.xml

apps/formbricks-com/LICENSE.md

@@ -0,0 +1,129 @@
+# Tailwind UI License
+
+## Personal License
+
+Tailwind Labs Inc. grants you an on-going, non-exclusive license to use the Components and Templates.
+
+The license grants permission to **one individual** (the Licensee) to access and use the Components and Templates.
+
+You **can**:
+
+- Use the Components and Templates to create unlimited End Products.
+- Modify the Components and Templates to create derivative components and templates. Those components and templates are subject to this license.
+- Use the Components and Templates to create unlimited End Products for unlimited Clients.
+- Use the Components and Templates to create End Products where the End Product is sold to End Users.
+- Use the Components and Templates to create End Products that are open source and freely available to End Users.
+
+You **cannot**:
+
+- Use the Components and Templates to create End Products that are designed to allow an End User to build their own End Products using the Components and Templates or derivatives of the Components and Templates.
+- Re-distribute the Components and Templates or derivatives of the Components and Templates separately from an End Product, neither in code or as design assets.
+- Share your access to the Components and Templates with any other individuals.
+- Use the Components and Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc.
+
+### Example usage
+
+Examples of usage **allowed** by the license:
+
+- Creating a personal website by yourself.
+- Creating a website or web application for a client that will be owned by that client.
+- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
+- Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
+- Creating a web application where the primary purpose is clearly not to simply re-distribute the components (like a conference organization app that uses the components for its UI for example) that is free and open source, where the source code is publicly available.
+
+Examples of usage **not allowed** by the license:
+
+- Creating a repository of your favorite Tailwind UI components or templates (or derivatives based on Tailwind UI components or templates) and publishing it publicly.
+- Creating a React or Vue version of Tailwind UI and making it available either for sale or for free.
+- Create a Figma or Sketch UI kit based on the Tailwind UI component designs.
+- Creating a "website builder" project where end users can build their own websites using components or templates included with or derived from Tailwind UI.
+- Creating a theme, template, or project starter kit using the components or templates and making it available either for sale or for free.
+- Creating an admin panel tool (like [Laravel Nova](https://nova.laravel.com/) or [ActiveAdmin](https://activeadmin.info/)) that is made available either for sale or for free.
+
+In simple terms, use Tailwind UI for anything you like as long as it doesn't compete with Tailwind UI.
+
+### Personal License Definitions
+
+Licensee is the individual who has purchased a Personal License.
+
+Components and Templates are the source code and design assets made available to the Licensee after purchasing a Tailwind UI license.
+
+End Product is any artifact produced that incorporates the Components or Templates or derivatives of the Components or Templates.
+
+End User is a user of an End Product.
+
+Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity. Customers of software-as-a-service products are not considered clients for the purpose of this document.
+
+## Team License
+
+Tailwind Labs Inc. grants you an on-going, non-exclusive license to use the Components and Templates.
+
+The license grants permission for **up to 25 Employees and Contractors of the Licensee** to access and use the Components and Templates.
+
+You **can**:
+
+- Use the Components and Templates to create unlimited End Products.
+- Modify the Components and Templates to create derivative components and templates. Those components and templates are subject to this license.
+- Use the Components and Templates to create unlimited End Products for unlimited Clients.
+- Use the Components and Templates to create End Products where the End Product is sold to End Users.
+- Use the Components and Templates to create End Products that are open source and freely available to End Users.
+
+You **cannot**:
+
+- Use the Components or Templates to create End Products that are designed to allow an End User to build their own End Products using the Components or Templates or derivatives of the Components or Templates.
+- Re-distribute the Components or Templates or derivatives of the Components or Templates separately from an End Product.
+- Use the Components or Templates to create End Products that are the property of any individual or entity other than the Licensee or Clients of the Licensee.
+- Use the Components or Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc.
+
+### Example usage
+
+Examples of usage **allowed** by the license:
+
+- Creating a website for your company.
+- Creating a website or web application for a client that will be owned by that client.
+- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
+- Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
+- Creating a web application where the primary purpose is clearly not to simply re-distribute the components or templates (like a conference organization app that uses the components or a template for its UI for example) that is free and open source, where the source code is publicly available.
+
+Examples of use **not allowed** by the license:
+
+- Creating a repository of your favorite Tailwind UI components or template (or derivatives based on Tailwind UI components or templates) and publishing it publicly.
+- Creating a React or Vue version of Tailwind UI and making it available either for sale or for free.
+- Creating a "website builder" project where end users can build their own websites using components or templates included with or derived from Tailwind UI.
+- Creating a theme or template using the components or templates and making it available either for sale or for free.
+- Creating an admin panel tool (like [Laravel Nova](https://nova.laravel.com/) or [ActiveAdmin](https://activeadmin.info/)) that is made available either for sale or for free.
+- Creating any End Product that is not the sole property of either your company or a client of your company. For example your employees/contractors can't use your company Tailwind UI license to build their own websites or side projects.
+
+### Team License Definitions
+
+Licensee is the business entity who has purchased a Team License.
+
+Components and Templates are the source code and design assets made available to the Licensee after purchasing a Tailwind UI license.
+
+End Product is any artifact produced that incorporates the Components or Templates or derivatives of the Components or Templates.
+
+End User is a user of an End Product.
+
+Employee is a full-time or part-time employee of the Licensee.
+
+Contractor is an individual or business entity contracted to perform services for the Licensee.
+
+Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity. Customers of software-as-a-service products are not considered clients for the purpose of this document.
+
+## Enforcement
+
+If you are found to be in violation of the license, access to your Tailwind UI account will be terminated, and a refund may be issued at our discretion. When license violation is blatant and malicious (such as intentionally redistributing the Components or Templates through private warez channels), no refund will be issued.
+
+The copyright of the Components and Templates is owned by Tailwind Labs Inc. You are granted only the permissions described in this license; all other rights are reserved. Tailwind Labs Inc. reserves the right to pursue legal remedies for any unauthorized use of the Components or Templates outside the scope of this license.
+
+## Liability
+
+Tailwind Labs Inc.’s liability to you for costs, damages, or other losses arising from your use of the Components or Templates — including third-party claims against you — is limited to a refund of your license fee. Tailwind Labs Inc. may not be held liable for any consequential damages related to your use of the Components or Templates.
+
+This Agreement is governed by the laws of the Province of Ontario and the applicable laws of Canada. Legal proceedings related to this Agreement may only be brought in the courts of Ontario. You agree to service of process at the e-mail address on your original order.
+
+## Questions?
+
+Unsure which license you need, or unsure if your use case is covered by our licenses?
+
+Email us at [support@tailwindui.com](mailto:support@tailwindui.com) with your questions.

apps/formbricks-com/README.md

@@ -1,34 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

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

@@ -0,0 +1,34 @@
+export const meta = {
+  title: "Implementing Code Actions in Formbricks | Real-time User Action Tracking",
+  description:
+    "Dive into the world of Formbricks' code actions. Learn how to seamlessly integrate formbricks.track() method into your codebase, enabling real-time tracking of user actions like button clicks, visiting a specific URL. Up your survey game with precise and exact triggers.",
+};
+
+#### Actions
+
+# Code Actions
+
+Actions can also be set in the code base. You can fire an action using `formbricks.track()`
+<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>

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

@@ -0,0 +1,30 @@
+export const meta = {
+  title: "Implementing No-Code Actions in Formbricks | Real-time User Action Tracking",
+  description:
+    "Discover the power of Formbricks' No-Code Actions. Easily set up triggers based on Page URL, innerText, and CSS Selectors without touching a line of code. Inccrease user engagement and get insights at precise moments in the user journey.",
+};
+
+#### Actions
+
+# No-Code Actions
+
+No-Code actions can be set up within Formbricks with just a few clicks. There are three types of No-Code actions:
+
+## Page URL Action
+
+The page URL action is triggered, when a user visits a specific page in your application. There are several match conditions:
+
+- `exactMatch`: The URL should exactly match the provided string.
+- `contains`: The URL should contain the specified string as a substring.
+- `startsWith`: The URL should start with the specified string.
+- `endsWith`: The URL should end with the specified string.
+- `notMatch`: The URL should not match the specified condition.
+- `notContains`: The URL should not contain the specified string as a substring.
+
+## innerText Action
+
+The innerText action checks if the `innerText` of a clicked HTML element matches a specific text, e.g. the label of a button. Display a survey on any button click!
+
+## CSS Selector Action
+
+The CSS Selector action checks if the provided CSS selector matches the selector of a clicked HTML element. The CSS selector can be a class, id or any other CSS selector within your website. Display a survey on any element click!

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

@@ -0,0 +1,23 @@
+export const meta = {
+  title: "Using Actions in Formbricks | Fine-tuning User Moments",
+  description:
+    "Dive deep into how actions in Formbricks help products and teams to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",
+};
+
+#### Actions
+
+# What are actions and why are they useful?
+
+You want to understand what your users think and feel during specific moments in the user journey. To be able to ask at exactly the right point in time, you need actions.
+
+## What are actions?
+
+Actions are a little notification sent from your application to Formbricks. You decide which actions are sent either in your [Code](/docs/actions/code) or by setting up a [No-Code](/docs/actions/no-code) action within Formbricks.
+
+## How do actions work?
+
+When a predefined action happens in your app, the Formbricks widget notices. This action can then trigger a survey to be shown to the user and is stored in the database.
+
+## Why are actions useful?
+
+Actions help you to display your surveys at the right time. Later on, you will be able to segment your users based on the actions they have triggered in the past. This way, you can create much more granular user segments, e.g. only target users that already have used a specific feature.

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

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

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

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

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

@@ -0,0 +1,222 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly",
+  description:
+    "Unlock the full potential of Formbricks' Responses API. From fetching to updating survey responses, our comprehensive guide helps you integrate and manage survey data efficiently without compromising security. Ideal for client-side interactions.",
+};
+
+#### Management API
+
+# Responses API
+
+The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
+
+---
+
+## Create a response {{ tag: 'POST', label: '/api/v1/client/responses' }}
+
+Add a new response to a survey.
+
+<Row>
+  <Col>
+
+    ### Mandatory Body Fields
+
+    <Properties>
+      <Property name="surveyId" type="string">
+        The id of the survey the response belongs to.
+      </Property>
+      <Property name="finished" type="boolean">
+        Marks whether the response is complete or not.
+      </Property>
+      <Property name="data" type="string">
+        The data of the response as JSON object (key: questionId, value: answer).
+      </Property>
+
+    </Properties>
+
+    ### Optional Body Fields
+
+    <Properties>
+      <Property name="personId" type="string" required>
+        Internal Formbricks id to identify the user sending the response
+      </Property>
+    </Properties>
+
+### Parameters Explained
+
+| field name | required | default | description                                                                                                                                    |
+| ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| data       | yes      | -       | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
+| personId   | no       | -       | The person this response is connected to.                                                                                                      |
+| surveyId   | yes      | -       | The survey this response is connected to.                                                                                                      |
+| finished   | yes      | false   | Mark a response as complete to be able to filter accordingly.                                                                                  |
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/api/v1/client/responses">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses' \
+    --data-raw '{
+      "surveyId":"clfqz1esd0000yzah51trddn8",
+      "personId": "clfqjny0v000ayzgsycx54a2c",
+      "finished": true,
+      "data": {
+          "clfqjny0v0003yzgscnog1j9i": 10,
+          "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
+        }
+    }'
+    ```
+
+    ```json {{ title: 'Example Request Body' }}
+    {
+      "personId": "clfqjny0v000ayzgsycx54a2c",
+      "surveyId": "clfqz1esd0000yzah51trddn8",
+      "finished": true,
+      "data": {
+          "clfqjny0v0003yzgscnog1j9i": 10,
+          "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
+        }
+    }
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{ title: '200 Success' }}
+    {
+    "data": {
+      "id": "clisyqeoi000219t52m5gopke",
+      "surveyId": "clfqz1esd0000yzah51trddn8",
+      "finished": true,
+      "person": {
+        "id": "clfqjny0v000ayzgsycx54a2c",
+        "attributes": {
+          "email": "me@johndoe.com"
+        }
+      },
+      "data": {
+          "clfqjny0v0003yzgscnog1j9i": 10,
+          "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
+        }
+      }
+    }
+    ```
+
+    ```json {{ title: '400 Bad Request' }}
+    {
+      "code": "bad_request",
+      "message": "surveyId was not provided.",
+      "details": {
+        "surveyId": "This field is required."
+      }
+    }
+    ```
+
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Update a response {{ tag: 'POST', label: '/api/v1/client/responses/<response-id>' }}
+
+Update an existing response in a survey.
+
+<Row>
+  <Col>
+
+    ### Mandatory Body Fields
+
+    <Properties>
+      <Property name="data" type="string">
+        The data of the response as JSON object (key: questionId, value: answer).
+      </Property>
+    </Properties>
+
+### Parameters Explained
+
+| field name | required | default | description                                                                                                                                    |
+| ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| data       | yes      | -       | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
+| finished   | yes      | false   | Mark a response as complete to be able to filter accordingly.                                                                                  |
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/api/v1/client/responses/<response-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses/<response-id>' \
+    --data-raw '{
+      "personId": "clfqjny0v000ayzgsycx54a2c",
+      "surveyId": "clfqz1esd0000yzah51trddn8",
+      "finished": true,
+      "data": {
+          "clggpvpvu0009n40g8ikawby8": 5,
+      }
+    }'
+    ```
+
+    ```json {{ title: 'Example Request Body' }}
+    {
+      "personId": "clfqjny0v000ayzgsycx54a2c",
+      "surveyId": "clfqz1esd0000yzah51trddn8",
+      "finished": true,
+      "data": {
+          "clggpvpvu0009n40g8ikawby8": 5,
+      }
+    }
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{ title: '200 Success' }}
+    {
+      "data": {
+        "id": "clisyqeoi000219t52m5gopke",
+        "surveyId": "clfqz1esd0000yzah51trddn8",
+        "finished": true,
+        "person": {
+          "id": "clfqjny0v000ayzgsycx54a2c",
+          "attributes": {
+            "email": "me@johndoe.com"
+          }
+        },
+        "data": {
+          "clfqjny0v0003yzgscnog1j9i": 10,
+          "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks",
+          "clggpvpvu0009n40g8ikawby8": 5
+        }
+      }
+    }
+    ```
+
+    ```json {{ title: '400 Bad Request' }}
+    {
+      "code": "bad_request",
+      "message": "data was not provided.",
+      "details": {
+        "data": "This field is required."
+      }
+    }
+    ```
+
+    ```json {{ title: '404 Not Found' }}
+    {
+      "code": "not_found",
+      "message": "Response not found"
+    }
+    ```
+
+    </CodeGroup>
+
+  </Col>
+</Row>

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

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

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

@@ -0,0 +1,103 @@
+import Image from "next/image";
+
+import AddApiKey from "./add-api-key.webp";
+import ApiKeySecret from "./api-key-secret.webp";
+
+export const meta = {
+  title: "Formbricks API Key: Setup and Testing",
+  description:
+    "This guide provides step-by-step instructions to generate, store, and delete API keys, ensuring safe and authenticated access to your Formbricks account.",
+};
+
+#### API
+
+# API Key Setup
+
+## Auth: Personal API key
+
+The API requests are authorized with a personal API key. This API key gives you the same rights as if you were logged in at formbricks.com - **don't share it around!**
+
+### How to generate an API key
+
+1. Go to your settings on [app.formbricks.com](https://app.formbricks.com).
+2. Go to page “API keys”
+   <Image src={AddApiKey} alt="Add API Key" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+3. Create a key for the development or production environment.
+4. Copy the key immediately. You won’t be able to see it again.
+   <Image
+     src={ApiKeySecret}
+     alt="API Key Secret"
+     quality="100"
+     className="rounded-lg max-w-full sm:max-w-3xl"
+   />
+
+<Note>
+  ### Store API key safely
+  Anyone who has your API key has full control over your account.
+  For security reasons, you cannot view the API key again.
+</Note>
+
+### Test your API Key
+
+Hit the below request to verify that you are authenticated with your API Key and the server is responding. 
+
+## Get My Profile {{ tag: 'GET', label: '/api/v1/me' }}
+
+<Row>
+  <Col>
+
+    Get the product details and environment type of your account.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/me">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/me' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "id": "cll2m30r70004mx0huqkitgqv",
+      "createdAt": "2023-08-08T18:04:59.922Z",
+      "updatedAt": "2023-08-08T18:04:59.922Z",
+      "type": "production",
+      "product": {
+          "id": "cll2m30r60003mx0hnemjfckr",
+          "name": "My Product"
+      },
+      "widgetSetupCompleted": false
+    }
+    ```
+    ```json {{ title: '401 Not Authenticated' }}
+    Not authenticated
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+### Delete a personal API key
+
+1. Go to settings on [app.formbricks.com](https://app.formbricks.com/).
+2. Go to page “API keys”.
+3. Find the key you wish to revoke and select “Delete”.
+4. Your API key will stop working immediately.

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,400 @@
+export const meta = {
+  title: "Formbricks Webhook API Documentation - List, Retrieve, Create, and Delete Webhooks",
+  description:
+    "Explore the comprehensive guide to the Formbricks Webhooks API. This is all you need to interact and play with the Formbricks Webhooks and integrate them into any third party app of your choice",
+};
+
+#### Management API
+
+# Webhook API
+
+Formbricks' Webhook API offers a powerful interface for interacting with webhooks. Webhooks allow you to receive real-time HTTP notifications of changes to specific objects in the Formbricks environment.
+
+The behavior of the webhooks is determined by their trigger settings. The trigger determines which updates the webhook sends. Current available triggers include "responseCreated", "responseUpdated", and "responseFinished". This allows you to customize your webhooks to only send notifications for the events that are relevant to your application.
+
+Webhooks are tied to a specific Formbricks environment. Once set, a webhook will receive updates from all surveys within this environment. This makes it easy to manage your data flow and ensure that all relevant updates are caught by the webhook.
+
+This set of API can be used to
+- [List All Webhooks](#list-webhooks)
+- [Get Webhook](#retrieve-webhook-by-id)
+- [Create Webhook](#create-webhook)
+- [Delete Webhook](#delete-webhook-by-id)
+
+And the detailed Webhook Paylod is elaborated [here](#webhook-payload).
+
+These APIs are designed to facilitate seamless integration of Formbricks with third-party systems. By making use of our webhook API, you can automate the process of sending data to these systems whenever significant events occur within your Formbricks environment.
+
+<Note>You will need an API Key to interact with these APIs.</Note>
+
+---
+
+## List Webhooks {{ tag: 'GET', label: '/api/v1/webhooks' }}
+
+<Row>
+  <Col>
+
+    Learn how to retrieve a list of all webhooks via API.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/webhooks">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/webhooks' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{ title: '200 Success' }}
+    {
+      "data": [
+        {
+          "id": "cliu1kdza000219zftad4ip6c",
+          "createdAt": "2023-06-13T08:49:04.198Z",
+          "updatedAt": "2023-06-13T08:49:04.198Z",
+          "url": "https://mysystem.com/myendpoint",
+          "environmentId": "clisypjy4000319t4imm289uo",
+          "triggers": [
+            "responseFinished"
+          ]
+        }
+      ]
+    }
+    ```
+
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+      }
+    }
+    ```
+
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Retrieve Webhook by ID {{ tag: 'GET', label: '/api/v1/webhooks/<webhook-id>' }}
+
+<Row>
+  <Col>
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/webhooks/<webhook-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/webhooks/<webhook-id>' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{ title: '200 Success' }}
+    {
+      "data": {
+        "id": "cliu167rk000019zfhbo68bar",
+        "createdAt": "2023-06-13T08:38:02.960Z",
+        "updatedAt": "2023-06-13T08:38:02.960Z",
+        "url": "https://mysystem.com/myendpoint",
+        "environmentId": "clisypjy4000319t4imm289uo",
+        "triggers": [
+          "responseFinished"
+        ]
+      }
+    }
+    ```
+
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+      }
+    }
+    ```
+
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Create Webhook {{ tag: 'POST', label: '/api/v1/webhooks' }}
+
+Add a webhook to your product.
+
+<Row>
+  <Col>
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+    ### Request Body Parameters
+
+    <Properties>
+      <Property name="url" type="string" required>
+        The URL where the webhook will send data to.
+      </Property>
+      <Property name="triggers" type="string[]" required>
+        List of events that will trigger the webhook.
+      </Property>
+      <Property name="surveyIds" type="string[]">
+        List of survey IDs that will trigger the webhook. If not provided, the webhook will be triggered for all surveys.
+      </Property>
+    </Properties>
+
+| field name | required | default | description                                                                                                       |
+| ---------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| url        | yes      | -       | The endpoint that the webhook will send data to                                                                   |
+| trigger    | yes      | -       | The event that will trigger the webhook ("responseCreated" or "responseUpdated" or "responseFinished")            |
+| surveyIds  | no       | -       | List of survey IDs that will trigger the webhook. If not provided, the webhook will be triggered for all surveys. |
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/api/v1/webhooks">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location --request POST 'https://app.formbricks.com/api/v1/webhooks' \
+    --header 'x-api-key: <your-api-key>' \
+    --header 'Content-Type: application/json' \
+    --data-raw '{
+      "url": "https://mysystem.com/myendpoint",
+      "triggers": ["responseFinished"]
+    }'
+    ```
+
+    ```json {{ title: 'Example Request Body' }}
+    {
+      "url": "https://mysystem.com/myendpoint",
+      "triggers": ["responseFinished"]
+    }
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{ title: '200 Success' }}
+    {
+      "data": {
+        "id": "cliu1kdza000219zftad4ip6c",
+        "createdAt": "2023-06-13T08:49:04.198Z",
+        "updatedAt": "2023-06-13T08:49:04.198Z",
+        "url": "https://mysystem.com/myendpoint",
+        "environmentId": "clisypjy4000319t4imm289uo",
+        "triggers": ["responseFinished"],
+        "surveyIds": ["clisypjy4000319t4imm289uo"]
+      }
+    }
+    ```
+
+    ```json {{ title: '400 Bad Request' }}
+    {
+      "code": "bad_request",
+      "message": "Missing trigger",
+      "details": {
+        "missing_field": "trigger"
+      }
+    }
+    ```
+
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+      }
+    }
+    ```
+
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Delete Webhook by ID {{ tag: 'DELETE', label: '/api/v1/webhooks/<webhook-id>' }}
+
+<Row>
+  <Col>
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="DELETE" label="/api/v1/webhooks/<webhook-id>">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location --request DELETE 'https://app.formbricks.com/api/v1/webhooks/<webhook-id>' \
+    --header 'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{ title: '200 Success' }}
+    {
+      "data": {
+        "id": "cliu167rk000019zfhbo68bar",
+        "createdAt": "2023-06-13T08:38:02.960Z",
+        "updatedAt": "2023-06-13T08:38:02.960Z",
+        "url": "https://mysystem.com/myendpoint",
+        "environmentId": "clisypjy4000319t4imm289uo",
+        "triggers": ["responseFinished"]
+      }
+    }
+    ```
+
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+      }
+    }
+    ```
+
+    ```json {{ title: '404 Not Found' }}
+    {
+      "code": "not_found",
+      "message": "Webhook not found.",
+      "details": {
+        "webhookId": "The requested webhook does not exist."
+      }
+    }
+    ```
+
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Webhook Payload
+
+This documentation helps understand the payload structure that will be received when the webhook is triggered in Formbricks.
+
+<Row>
+  <Col sticky>
+
+| Variable              | Type    | Description                                                                                                                                    |
+| --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| webhookId             | String  | Webhook's Id                                                                                                                                   |
+| event                 | String  | The name of the trigger event [responseCreated, responseUpdated, responseFinished]                                                             |
+| data                  | Object  | Contains the details of the newly created response.                                                                                            |
+| data.id               | String  | Formbricks Response ID.                                                                                                                        |
+| data.createdAt        | String  | The timestamp when the response was created.                                                                                                   |
+| data.updatedAt        | String  | The timestamp when the response was last updated.                                                                                              |
+| data.surveyId         | String  | The identifier of the survey associated with this response.                                                                                    |
+| data.finished         | Boolean | A boolean value indicating whether the survey response is marked as finished.                                                                  |
+| data.data             | Object  | An object containing the response data, where keys are question identifiers, and values are the corresponding answers given by the respondent. |
+| data.meta             | Object  | Additional metadata related to the response, such as the user's operating system and browser information.                                      |
+| data.personAttributes | Object  | An object with attributes related to the respondent, such as their email and a user ID (if available).                                         |
+| data.person           | Object  | Information about the respondent, including their unique id, attributes, and creation/update timestamps.                                       |
+| data.notes            | Array   | An array of notes associated with the response (if any).                                                                                       |
+| data.tags             | Array   | An array of tags assigned to the response (if any).                                                                                            |
+
+  </Col>
+  <Col>
+
+    ### An example webhook payload
+
+    <CodeGroup title="Payload">
+
+    ```json
+    {
+        "webhookId": "cljwxvjos0003qhnvj2jg4k5i",
+        "event": "responseCreated",
+        "data": {
+            "id": "cljwy2m8r0001qhclco1godnu",
+            "createdAt": "2023-07-10T14:14:17.115Z",
+            "updatedAt": "2023-07-10T14:14:17.115Z",
+            "surveyId": "cljsf3d7a000019cv9apt2t27",
+            "finished": false,
+            "data": {
+                "qumbk3fkr6cky8850bvvq5z1": "Executive"
+            },
+            "meta": {
+                "userAgent": {
+                    "os": "Mac OS",
+                    "browser": "Chrome"
+                }
+            },
+            "personAttributes": {
+                "email": "test@web.com",
+                "userId": "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING"
+            },
+            "person": {
+                "id": "cljold01t0000qh8ewzigzmjk",
+                "attributes": {
+                    "email": "test@web.com",
+                    "userId": "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING"
+                },
+                "createdAt": "2023-07-04T17:56:17.154Z",
+                "updatedAt": "2023-07-04T17:56:17.154Z"
+            },
+            "notes": [],
+            "tags": []
+        }
+    }
+    ```
+
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---

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

@@ -0,0 +1,35 @@
+export const meta = {
+  title: "Guide for Setting Custom Attributes | Formbricks Documentation",
+  description:
+    "Learn how to set attributes in code using setAttribute function. Enhance user segmentation, target surveys effectively, and gather valuable insights for better decisions. Easily send user-specific details for better survey segmentation and gain deeper insights.",
+};
+
+#### Attributes
+
+# Setting attributes with code
+
+One way to send attributes to Formbricks is in your code. In Formbricks, there are two special attributes for [user identification](/docs/attributes/identify-users)(user ID & email) and custom attributes. An example:
+
+## Setting Custom User Attributes
+
+You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
+<Col>
+<CodeGroup title="Setting Plan to Pro">
+
+```javascript
+formbricks.setAttribute("Plan", "Pro");
+```
+
+</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.

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

@@ -0,0 +1,62 @@
+export const meta = {
+  title: "User Identification in Formbricks | Enhancing Survey Feedback",
+  description:
+    "A comprehensive guide on identifying users in Formbricks without compromising privacy. Learn how to set User ID, email, and custom attributes to optimize survey targeting, recontact users, and control survey intervals, all while respecting user anonymity.",
+};
+
+#### Attributes
+
+# Identifying Users
+
+At Formbricks, we value user privacy. By default, Formbricks doesn't collect or store any personal information from your users. However, we understand that it can be helpful for you to know which user submitted the feedback and also functionality like recontacting users and controlling the waiting period between surveys requires identifying the users. That's why we provide a way for you to share existing user data from your app, so you can view it in our dashboard.
+
+Once the Formbricks widget is loaded on your web app, our SDK exposes methods for identifying user attributes. Let's set it up!
+
+## Setting User ID
+
+You can use the `setUserId` function to identify a user with any string. It's best to use the default identifier you use in your app (e.g. unique id from database) but you can also anonymize these as long as they are unique for every user. This function can be called multiple times with the same value safely and stores the identifier in local storage. We recommend you set the User ID whenever the user logs in to your website, as well as after the installation snippet (if the user is already logged in).
+<Col>
+<CodeGroup title="Setting User ID">
+
+```javascript
+formbricks.setUserId("USER_ID");
+```
+
+</CodeGroup>
+</Col>
+## Setting User Email
+
+You can use the setEmail function to set the user's email:
+<Col>
+<CodeGroup title="Setting Email">
+
+```javascript
+formbricks.setEmail("user@example.com");
+```
+
+</CodeGroup>
+</Col>
+### Setting Custom User Attributes
+
+You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
+<Col>
+<CodeGroup title="Setting Custom Attributes">
+
+```javascript
+formbricks.setAttribute("attribute_key", "attribute_value");
+```
+
+</CodeGroup>
+</Col>
+### Logging Out Users
+
+When a user logs out of your webpage, make sure to log them out of Formbricks as well. This will prevent new activity from being associated with an incorrect user. Use the logout function:
+<Col>
+<CodeGroup title="Logging out User">
+
+```javascript
+formbricks.logout();
+```
+
+</CodeGroup>
+</Col>

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

@@ -0,0 +1,23 @@
+export const meta = {
+  title: "Understanding User Attributes in Formbricks Surveys",
+  description:
+    "Dive into the importance of attributes in surveys. Learn how key-value pairs can significantly improve survey targeting, enhance feedback quality, and guide data-driven decisions with Formbricks.",
+};
+
+#### Attributes
+
+# What are attributes and why are they useful?
+
+Surveying your user base without segmentation leads to weak results and survey fatigue. Attributes help you segment your users into groups.
+
+## What are attributes?
+
+Attributes are key-value pairs that you can set for each person individually. For example, the attribute "Plan" can be set to "Free" or "Paid".
+
+## How do attributes work?
+
+Attributes are sent from your application to Formbricks and are associated with the current user. We store it in our database and allow you to use it the next time you create a survey.
+
+## Why are attributes useful?
+
+Attributes help show surveys to the right group of people. For example, you can show a survey to all users who have a "Plan" attribute set to "Paid".

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

@@ -0,0 +1,166 @@
+import Image from "next/image";
+import DemoPreview from "@/components/dummyUI/DemoPreview";
+
+import CreateChurnFlow from "./create-cancel-flow.webp";
+import ChangeText from "./change-text.webp";
+import TriggerInnerText from "./trigger-inner-text.webp";
+import TriggerCSS from "./trigger-css-selector.webp";
+import TriggerPageUrl from "./trigger-page-url.webp";
+import RecontactOptions from "./recontact-options.webp";
+import PublishSurvey from "./publish-survey.webp";
+import SelectAction from "./select-action.webp";
+
+export const meta = {
+  title: "Mastering Churn Surveys with Formbricks | Essential Tips & Steps",
+  description: "Learn how to effectively utilize Formbricks' Churn Surveys to gain deeper insights into user departures. Dive into a step-by-step guide to craft, trigger, and optimize your churn surveys, ensuring you capture invaluable feedback at critical junctures",
+};
+
+#### Best Practices
+
+# Learn from Churn
+
+Churn is hard, but can teach you a lot. Whenever a user decides that your product isn’t worth it anymore, you have a unique opportunity to get deep insights. These insights are pure gold to reduce churn.
+
+## Purpose
+
+The Churn Survey is among the most effective ways to identify weaknesses in you offering. People were willing to pay but now are not anymore: What changed? Let’s find out!
+
+## Preview
+
+<DemoPreview template="Churn Survey" />
+
+## Formbricks Approach
+
+- Ask at exactly the right point in time
+- Follow-up to prevent bad reviews
+- Coming soon: Make survey mandatory
+
+## Overview
+
+To run the Churn Survey in your app you want to proceed as follows:
+
+1. Create new Churn Survey at [app.formbricks.com](http://app.formbricks.com/)
+2. Set up the user action to display survey at right point in time
+3. Choose correct recontact options to never miss a feedback
+4. Prevent that churn!
+
+<Note>
+  ## Formbricks Widget running?
+  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages
+  and surveys in your app. If not, please follow the [Quick Start Guide (takes 15mins max.)](/docs/getting-started/quickstart-in-app-survey)
+</Note>
+
+### 1. Create new Churn Survey
+
+If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
+
+Click on "Create Survey" and choose the template “Churn Survey”:
+
+<Image
+  src={CreateChurnFlow}
+  alt="Create churn survey by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+### 2. Update questions (if you like)
+
+You’re free to update the question and answer options. However, based on our experience, we suggest giving the provided template a go 😊
+
+<Image
+  src={ChangeText}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+_Want to change the button color? You can do so in the product settings._
+
+Save, and move over to the “Audience” tab.
+
+### 3. Pre-segment your audience
+
+In this case, you don’t really need to pre-segment your audience. You likely want to ask everyone who hits the “Cancel subscription” button.
+
+### 4. Set up a trigger
+
+To create the trigger for your Churn Survey, you have two options to choose from:
+
+1. **Trigger by innerText:** You likely have a “Cancel Subscription” button in your app. You can setup a user Action with the according `innerText` to trigger the survey, like so:
+
+<Image
+  src={TriggerInnerText}
+  alt="Set the trigger by inner Text"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+2. **Trigger by CSS Selector:** In case you have more than one button saying “Cancel Subscription” in your app and only want to display the survey when one of them is clicked, you want to be more specific. The best way to do that is to give this button the HTML `id=“cancel-subscription”` and set your user action up like so:
+
+<Image
+  src={TriggerCSS}
+  alt="Set the trigger by CSS Selector"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+3. **Trigger by pageURL:** Lastly, you could also display your survey on a subpage “/subscription-cancelled” where you forward users once they cancelled the trial subscription. You can then create a user Action with the type `pageURL` with the following settings:
+
+<Image
+  src={TriggerPageUrl}
+  alt="Set the trigger by page URL"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+Whenever a user visits this page, matches the filter conditions above and the recontact options (below) the survey will be displayed ✅
+
+Here is our complete [Actions manual](/docs/actions/why) covering [Code](/docs/actions/code) and [No-Code](/docs/actions/no-code) Actions.
+
+<Note>
+  ## Pre-churn flow coming soon 
+  We’re currently building full-screen survey pop-ups. You’ll be able to prevent users from closing the survey
+  unless they respond to it. It’s certainly debatable if you want that but you could force them to click through
+  the survey before letting them cancel 🤷
+</Note>
+
+### 5. Select Action in the “When to ask” card
+
+<Image
+  src={SelectAction}
+  alt="Select feedback button action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+### 6. Last step: Set Recontact Options correctly
+
+Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure you milk these super valuable insights. You want to make sure that this survey is always displayed, no matter if the user has already seen a survey in the past days:
+
+<Image
+  src={RecontactOptions}
+  alt="Set recontact options"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+These settings make sure the survey is always displayed, when a user wants to Cancel their subscription.
+
+### 7. Congrats! You’re ready to publish your survey 💃
+
+<Image
+  src={PublishSurvey}
+  alt="Publish survey"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+<Note>
+  ## Formbricks Widget running? 
+  You need to have the Formbricks Widget installed to display the Churn Survey in your app. Please follow [this
+  tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey) to install the widget.
+</Note>
+
+###
+
+# Get those insights! 🎉