chore: Release formbricks-js 1.0.5 (#781)

* Version Packages

* ignore formbricks-web in changeset

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Matthias Nannt <mail@matthiasnannt.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"]
 }

.env.docker

@@ -46,7 +46,8 @@ NEXTAUTH_URL=http://localhost:3000
 # MAIL_FROM=noreply@example.com
 # SMTP_HOST=localhost
 # SMTP_PORT=1025
-# SMTP_SECURE_ENABLED=0 # Enable for TLS (port 465)
+# Enable SMTP_SECURE_ENABLED for TLS (port 465)
+# SMTP_SECURE_ENABLED=0
 # SMTP_USER=smtpUser
 # SMTP_PASSWORD=smtpPassword
 
@@ -70,6 +71,9 @@ NEXT_PUBLIC_PASSWORD_RESET_DISABLED=1
 # Signup. Disable the ability for new users to create an account.
 # NEXT_PUBLIC_SIGNUP_DISABLED=1
 
+# Team Invite. Disable the ability for invited users to create an account.
+# NEXT_PUBLIC_INVITE_DISABLED=1
+
 ##########
 # Other  #
 ##########
@@ -93,4 +97,7 @@ GITHUB_SECRET=
 # Configure Google Login
 NEXT_PUBLIC_GOOGLE_AUTH_ENABLED=0
 GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
+GOOGLE_CLIENT_SECRET=
+
+# Cron Secret
+CRON_SECRET=

.env.example

@@ -46,7 +46,8 @@ NEXTAUTH_URL=http://localhost:3000
 MAIL_FROM=noreply@example.com
 SMTP_HOST=localhost
 SMTP_PORT=1025
-SMTP_SECURE_ENABLED=0 # Enable for TLS (port 465)
+# Enable SMTP_SECURE_ENABLED for TLS (port 465)
+SMTP_SECURE_ENABLED=0
 SMTP_USER=smtpUser
 SMTP_PASSWORD=smtpPassword
 
@@ -70,6 +71,9 @@ SMTP_PASSWORD=smtpPassword
 # Signup. Disable the ability for new users to create an account.
 # NEXT_PUBLIC_SIGNUP_DISABLED=1
 
+# Team Invite. Disable the ability for invited users to create an account.
+# NEXT_PUBLIC_INVITE_DISABLED=1
+
 ##########
 # Other  #
 ##########
@@ -79,12 +83,6 @@ NEXT_PUBLIC_PRIVACY_URL=
 NEXT_PUBLIC_TERMS_URL=
 NEXT_PUBLIC_IMPRINT_URL=
 
-# Disable Sentry warning
-SENTRY_IGNORE_API_RESOLUTION_ERROR=1
-
-# Enable Sentry Error Tracking
-NEXT_PUBLIC_SENTRY_DSN=
-
 # Configure Github Login
 NEXT_PUBLIC_GITHUB_AUTH_ENABLED=0
 GITHUB_ID=
@@ -97,7 +95,6 @@ GOOGLE_CLIENT_SECRET=
 
 
 # Stripe Billing Variables
-NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
@@ -105,4 +102,7 @@ STRIPE_WEBHOOK_SECRET=
 # Configure Formbricks usage within Formbricks
 NEXT_PUBLIC_FORMBRICKS_API_HOST=
 NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
-NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
+NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
+
+# Cron Secret
+CRON_SECRET=

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,51 +0,0 @@
----
-name: Bug report
-about: "Found a bug? Please fill out the sections below. \U0001F44D"
-title: "[BUG]"
-labels: bug
-assignees: ""
----
-
-### 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. ...
-
-### Expected behavior
-
-A clear and concise description of what you expected to happen.
-
-### Other information
-
-#### Screenshots
-
-If applicable, add screenshots to help explain your problem.
-
-#### Environment
-
-- [ ] Formbricks Cloud (app.formbricks.com)
-- [ ] self-hosted Formbricks, version/commit: [please provide]
-
-#### Desktop (please complete the following information):
-
-- OS: [e.g. iOS]
-- Browser [e.g. chrome, safari]
-- Version [e.g. 22]
-
-#### Node.JS version
-
-[e.g. v18.15.0]
-
-#### 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/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/feature_request.md

@@ -1,19 +0,0 @@
----
-name: Feature request
-about: "Suggest an idea for this project \U0001F680"
-title: "[FEATURE]"
-labels: enhancement
-assignees: ""
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,45 @@
+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 🤓
+
+      - Everything is type-safe
+      - All UI components are in the package `formbricks/ui`
+      - Run `pnpm dev` to find a demo app to test in-app surveys at `localhost:3002`
+      - We use **chatGPT** to help refactor code. Use our [Formbricks ✨ megaprompt ✨](https://github.com/formbricks/formbricks/blob/main/megaprompt.md) to create the right 
+        context before you write your prompt.

.github/PULL_REQUEST_TEMPLATE.md

@@ -31,6 +31,8 @@ Fixes # (issue)
 
 <!-- We're starting to get more and more contributions. Please help us making this efficient for all of us and go through this checklist. Please tick off what you did  -->
 
+- [ ] Added a screen recording or screenshots to this PR
+- [ ] Filled out the "How to test" section in this PR
 - [ ] Read the [contributing guide](https://github.com/formbricks/formbricks/blob/main/CONTRIBUTING.md)
 - [ ] Self-reviewed my own code
 - [ ] Commented on my code in hard-to-understand bits

.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-production.yml

@@ -0,0 +1,33 @@
+name: Tests
+on:
+  workflow_call:
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.4
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+
+      - name: create .env
+        run: cp .env.example .env
+
+      - name: Build formbricks-js dependencies
+        run: pnpm build --filter=web...

.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,18 @@
+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:
+    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

@@ -1,9 +1,11 @@
-name: Checks
-on: [push]
+name: Lint
+on:
+  workflow_call:
 jobs:
   build:
     name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
     runs-on: ubuntu-latest
+    timeout-minutes: 15
 
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}

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

@@ -0,0 +1,118 @@
+name: "Next.js Bundle Analysis"
+
+on:
+  workflow_call:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Production build
+    if: ${{ github.event_name == 'push' }}
+    uses: ./.github/workflows/build-production.yml
+    secrets: inherit
+
+  analyze:
+    needs: build
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.4
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+
+      - name: create .env
+        run: cp .env.example .env
+
+      - name: Build formbricks-js dependencies
+        run: pnpm build --filter=web...
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v2
+        with:
+          name: bundle
+          path: apps/web/.next/analyze/__bundle_analysis.json
+
+      - name: Analyze bundle
+        run: |
+          cd apps/web
+          npx -p nextjs-bundle-analysis@0.5.0 report
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v2
+        with:
+          name: bundle
+          path: apps/web/.next/analyze/__bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: nextjs-bundle-analysis.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          path: apps/web/.next/analyze/base
+
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: |
+          cd apps/web
+          ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
+
+      - name: Get comment body
+        id: get-comment-body
+        if: success() && github.event.number
+        run: |
+          cd apps/web
+          body=$(cat .next/analyze/__bundle_analysis_comment.txt)
+          body="${body//'%'/'%25'}"
+          body="${body//$'\n'/'%0A'}"
+          body="${body//$'\r'/'%0D'}"
+          echo ::set-output name=body::$body
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        if: success() && github.event.number
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: "<!-- __NEXTJS_BUNDLE_@calcom/web -->"
+
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

.github/workflows/pr.yml

@@ -0,0 +1,45 @@
+name: PR Update
+
+on:
+  pull_request_target:
+    branches:
+      - main
+    paths-ignore:
+      - "**.md"
+      - ".github/CODEOWNERS"
+  merge_group:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    name: Unit tests
+    uses: ./.github/workflows/test.yml
+    secrets: inherit
+
+  lint:
+    name: Linters
+    uses: ./.github/workflows/lint.yml
+    secrets: inherit
+
+  build-production:
+    name: Production build (without database)
+    uses: ./.github/workflows/build-production.yml
+    secrets: inherit
+
+  analyze:
+    needs: build-production
+    uses: ./.github/workflows/nextjs-bundle-analysis.yml
+    secrets: inherit
+
+  required:
+    needs: [lint, test, build-production]
+    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 }}
@@ -24,7 +29,7 @@ jobs:
           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 --config.platform=linux --config.architecture=x64

.github/workflows/release-docker.yml

@@ -0,0 +1,43 @@
+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 }}
+    steps:
+      - 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

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

@@ -0,0 +1,47 @@
+name: "Validate PRs"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: write
+
+jobs:
+  validate-pr:
+    name: Validate 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: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.4
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+
+      - name: create .env
+        run: cp .env.example .env
+
+      - name: Build formbricks-js dependencies
+        run: pnpm build --filter=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,6 +33,10 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 !packages/database/.env
+!apps/web/.env
+
+# Prisma generated files
+packages/database/zod
 
 # turbo
 .turbo

.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,76 @@
+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#^(NEXT_PUBLIC_WEBAPP_URL=).*#\1 $(gp url 3000)#" .env &&
+      sed -i -r "s#^(NEXTAUTH_URL=).*#\1 $(gp url 3000)#" .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: ignore
+    
+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

.vercelignore

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

LICENSE

@@ -1,9 +1,9 @@
-Copyright (c) 2023 Matthias Nannt, Johannes Dancker
+Copyright (c) 2023 Formbricks GmbH
 
 Portions of this software are licensed as follows:
 
 - 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/" directory of this repository, if that directory exists, is licensed under the "MIT" license as defined in "packages/js/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.
 
@@ -67,7 +67,7 @@ modification follow.
 
                        TERMS AND CONDITIONS
 
-0. Definitions.
+1. Definitions.
 
 "This License" refers to version 3 of the GNU Affero General Public License.
 

README.md

@@ -1,6 +1,6 @@
 <p align="center">
-<a href="https://github.com/formbricks/formbricks">
-    <img src="https://user-images.githubusercontent.com/675065/203262290-3c2bc5b8-839c-468a-b675-e26a369c7fe2.png" 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>
 
@@ -12,67 +12,89 @@
 </p>
 
 <p align="center">
-<a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPL-purple" alt="License"></a> <a href="https://formbricks.com/discord"><img src="https://img.shields.io/discord/979077669410979880?label=Discord&logo=discord&logoColor=%23fff" alt="Join Formbricks Discord"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
+<a href="https://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/>
 
-## About Formbricks
+<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>
 
-<img width="1527" alt="formbricks-sneak" src="https://user-images.githubusercontent.com/675065/227726212-6ebf930e-6a20-4ffa-b966-56cd41bdf363.png">
+## ✨ About Formbricks
 
-Formbricks productizes best practices for qualitative in-app user discovery. Use micro-surveys to target the right users at the right time without making surveys annoying.
+<img width="1527" alt="formbricks-sneak" src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">
+
+Formbricks is your go-to solution for in-product micro-surveys that will supercharge your product experience. Use micro-surveys to target the right users at the right time without making surveys annoying.
 
 **Try it out in the cloud at [formbricks.com](https://formbricks.com)**
 
-### Mission: Base your decisions on qualitative data.
+## 💪 Mission: Make customer-centric decisions based on data.
 
-Formbricks helps you apply best practices from data-driven work and experience management to make better business decisions. Use Formbricks to collect and manage insights from your users; run a product market fit survey to know which audience to focus on and whether your value proposition is being recognized.
+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
 
-- 📲 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 and more
-- 🔒 All open source, transparent and self-hostable
+- 📲 Create **in-product surveys** with our no code editor with multiple question types
+- 📚 Choose from a variety of best-practice **templates**
+- 👩🏻 Launch and **target your surveys to specific user groups** without changing your application code
+- 🔗 Create shareable **link surveys**
+- 👨‍👩‍👦 Invite your team members to **collaborate** on your surveys
+- 🔌 Integrate Formbricks with **Slack, Posthog, Zapier, n8n and more**
+- 🔒 All **open source**, transparent and self-hostable
 
-### Built With
+### Built on Open Source
 
-- [Typescript](https://www.typescriptlang.org/)
-- [Next.js](https://nextjs.org/)
-- [React](https://reactjs.org/)
-- [TailwindCSS](https://tailwindcss.com/)
-- [Prisma](https://prisma.io/)
+- 💻 [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/)
 
-### Upcoming Features
+## 🚀 Getting started
 
-|     | Feature                                    |
-| --- | ------------------------------------------ |
-| 👷  | Zapier, Slack & Posthog Integration        |
-| 👷  | Webhooks                                   |
-| 🗒️  | Filtering Options in Survey Analysis       |
-| 🗒️  | Multi-Language Functionality               |
-| 🗒️  | Auto-complete Surveys after at x responses |
-| 🗒️  | Pre-Fill Link-Surveys                      |
-| 🗒️  | E-Mail Surveys                             |
+### ☁️ Cloud Version
 
-_👷 In Progress | 🗒️ Up Next_
+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)
 
-## Cloud vs. self-hosted
+### 🐳 Self-hosted version
 
-Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers without a subscription. Check out our [docs](https://formbricks.com/docs/self-hosting/deployment) to see how to self-host Formbricks.
-
-We also have a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. For more information, please visit [formbricks.com](https://formbricks.com)
+Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription. To get started with self-hosting, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).
 
 (In the future we may develop additional features that aren't in the free Open-Source version)
 
-## Contributing
+## ✍️ Contribution
 
 We are very happy if you are interested in contributing to Formbricks 🤗
 
-There are many ways to contribute to Formbricks with writing Issues, fixing bugs, building new features or updating the docs. Please check out [our contribution guide](https://formbricks.com/docs/contributing/introduction) for more information.
+Here are a few options:
+
+- Star this repo
+- Create issues every time you feel something is missing or goes wrong
+- Upvote issues with 👍 reaction so we know what's the demand for particular issue to prioritize it within roadmap
+
+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.
+
+## 📆 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` 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` for more information.

apps/demo/.env.example

@@ -1,2 +1,5 @@
 NEXT_PUBLIC_FORMBRICKS_API_HOST=http://localhost:3000
-NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=YOUR_ENVIRONMENT_ID
+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/README.md

@@ -1,38 +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
-# or
-pnpm 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.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## 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/demo/next.config.js

@@ -5,7 +5,7 @@ const nextConfig = {
     return [
       {
         source: "/",
-        destination: "/signin",
+        destination: "/app",
         permanent: false,
       },
     ];

apps/demo/package.json

@@ -4,29 +4,20 @@
   "private": true,
   "scripts": {
     "clean": "rimraf .turbo node_modules .next",
-    "dev": "next dev -p 3002",
+    "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.17",
-    "@types/node": "18.15.11",
-    "@types/react": "18.0.33",
-    "@types/react-dom": "18.0.11",
-    "eslint": "8.37.0",
-    "eslint-config-formbricks": "workspace:*",
-    "next": "13.2.4",
+    "@heroicons/react": "^2.0.18",
+    "next": "13.4.12",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "5.0.3"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.3",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.21",
-    "rimraf": "^5.0.0",
-    "tailwindcss": "^3.3.1"
+    "eslint-config-formbricks": "workspace:*"
   }
 }

apps/demo/pages/_app.tsx

@@ -1,5 +1,6 @@
-import formbricks, { PersonId, SurveyId } from "@formbricks/js";
+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";
@@ -11,10 +12,9 @@ if (typeof window !== "undefined") {
     formbricks.init({
       environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
       apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
-      logLevel: "debug",
+      debug: true,
     });
     window.formbricks = formbricks;
-    formbricks.refresh();
   }
 }
 
@@ -35,10 +35,13 @@ export default function App({ Component, pageProps }: AppProps) {
 
   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
+          Please set Formbricks environment variables in apps/demo/.env
         </div>
       )}
       <Component {...pageProps} />

apps/demo/pages/app/index.tsx

@@ -1,378 +1,233 @@
-import LayoutApp from "@/components/LayoutApp";
-import { classNames } from "@/lib/utils";
-import { Bars3CenterLeftIcon, BellIcon, ScaleIcon } from "@heroicons/react/24/outline";
-import {
-  BanknotesIcon,
-  BuildingOfficeIcon,
-  CheckCircleIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  MagnifyingGlassIcon,
-} from "@heroicons/react/24/solid";
-import Image from "next/image";
 import formbricks from "@formbricks/js";
-
-const cards = [{ name: "Account balance", href: "#", icon: ScaleIcon, amount: "$30,659.45" }];
-const transactions = [
-  {
-    id: 1,
-    name: "Payment to Molly Sanders",
-    href: "#",
-    amount: "$20,000",
-    currency: "USD",
-    status: "success",
-    date: "July 11, 2020",
-    datetime: "2020-07-11",
-  },
-];
-const statusStyles: any = {
-  success: "bg-green-100 text-green-800",
-  processing: "bg-yellow-100 text-yellow-800",
-  failed: "bg-slate-100 text-slate-800",
-};
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import fbsetup from "../../public/fb-setup.png";
 
 export default function AppPage({}) {
-  return (
-    <LayoutApp>
-      <div className="flex h-16 flex-shrink-0 border-b border-slate-200 bg-white lg:border-none">
-        <button
-          type="button"
-          className="border-r border-slate-200 px-4 text-slate-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500 lg:hidden">
-          <span className="sr-only">Open sidebar</span>
-          <Bars3CenterLeftIcon className="h-6 w-6" aria-hidden="true" />
-        </button>
-        {/* Search bar */}
-        <div className="flex flex-1 justify-between px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
-          <div className="flex flex-1">
-            <form className="flex w-full md:ml-0" action="#" method="GET">
-              <label htmlFor="search-field" className="sr-only">
-                Search
-              </label>
-              <div className="relative w-full text-slate-400 focus-within:text-slate-600">
-                <div
-                  className="pointer-events-none absolute inset-y-0 left-0 flex items-center"
-                  aria-hidden="true">
-                  <MagnifyingGlassIcon className="h-5 w-5" aria-hidden="true" />
-                </div>
-                <input
-                  id="search-field"
-                  name="search-field"
-                  className="block h-full w-full border-transparent py-2 pl-8 pr-3 text-slate-900 placeholder-slate-500 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
-                  placeholder="Search transactions"
-                  type="search"
-                />
-              </div>
-            </form>
-          </div>
-          <div className="ml-4 flex items-center md:ml-6">
-            <button
-              className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
-              onClick={() => {
-                formbricks.track("Cancel Subscription");
-              }}>
-              Feedback
-            </button>
-            <button className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50">
-              No Code Feedback Btn Click
-            </button>
-            <button
-              className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
-              onClick={() => {
-                formbricks.setEmail("test@web.com");
-              }}>
-              Set Email
-            </button>
-            <button
-              className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
-              onClick={() => {
-                formbricks.setUserId("ASDASDAAAAAASSSSSSSASDASD");
-              }}>
-              Set Long UserID
-            </button>
-            <button
-              className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
-              onClick={() => {
-                formbricks.setAttribute("Plan", "Free");
-              }}>
-              Set attribute &quot;Free&quot;
-            </button>
-            <button
-              className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
-              onClick={() => {
-                formbricks.setAttribute("Plan", "Paid");
-              }}>
-              Set attribute &quot;Paid&quot;
-            </button>
+  const [darkMode, setDarkMode] = useState(false);
 
-            {/* Profile dropdown */}
-            <div className="relative ml-3">
-              <div>
-                <button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50">
-                  <Image
-                    className="h-8 w-8 rounded-full"
-                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                    width={32}
-                    height={32}
-                    alt=""
-                  />
-                  <span className="ml-3 hidden text-sm font-medium text-slate-700 lg:block">
-                    <span className="sr-only">Open user menu for </span>Emilia Birch
-                  </span>
-                  <ChevronDownIcon
-                    className="ml-1 hidden h-5 w-5 flex-shrink-0 text-slate-400 lg:block"
-                    aria-hidden="true"
-                  />
-                </button>
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  }, [darkMode]);
+
+  return (
+    <div className="h-full bg-white px-12 py-6 dark:bg-slate-800">
+      <div className="flex flex-col justify-between md:flex-row">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+            Formbricks In-product Survey Demo App
+          </h1>
+          <p className="text-slate-700 dark:text-slate-300">
+            This app helps you test your in-app surveys. You can create and test user actions, create and
+            update user attributes, etc.
+          </p>
+        </div>
+        <button
+          className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
+          onClick={() => setDarkMode(!darkMode)}>
+          Toggle Dark Mode
+        </button>
+      </div>
+
+      <div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div>
+          <div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">1. Setup .env</h3>
+            <p className="text-slate-700 dark:text-slate-300">
+              Copy the environment ID of your Formbricks app to the env variable in demo/.env
+            </p>
+            <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
+
+            <div className="mt-4 flex-col items-start text-sm text-slate-700 dark:text-slate-300 sm:flex sm:items-center sm:text-base">
+              <p className="mb-1 sm:mb-0 sm:mr-2">You&apos;re connected with env:</p>
+              <div className="flex items-center">
+                <strong className="w-32 truncate sm:w-auto">
+                  {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}
+                </strong>
+                <span className="relative ml-2 flex h-3 w-3">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
+                </span>
               </div>
             </div>
           </div>
+          <div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">2. Widget Logs</h3>
+            <p className="text-slate-700 dark:text-slate-300">
+              Look at the logs to understand how the widget works.{" "}
+              <strong className="dark:text-white">Open your browser console</strong> to see the logs.
+            </p>
+            {/* <div className="max-h-[40vh] overflow-y-auto py-4">
+              <LogsContainer />
+            </div> */}
+          </div>
+        </div>
+
+        <div className="md:grid md:grid-cols-3">
+          <div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-gray-600 dark:bg-gray-800">
+            <h3 className="text-lg font-semibold dark:text-white">
+              Reset person / pull data from Formbricks app
+            </h3>
+            <p className="text-slate-700 dark:text-gray-300">
+              On formbricks.reset() a few things happen: <strong>New person is created</strong> and{" "}
+              <strong>surveys & no-code actions are pulled from Formbricks:</strong>.
+            </p>
+            <button
+              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
+              onClick={() => {
+                formbricks.reset();
+              }}>
+              Reset
+            </button>
+            <p className="text-xs text-slate-700 dark:text-gray-300">
+              If you made a change in Formbricks app and it does not seem to work, hit &apos;Reset&apos; and
+              try again.
+            </p>
+          </div>
+
+          <div className="p-6">
+            <div>
+              <button
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
+                onClick={() => {
+                  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>
-      <main className="flex-1 pb-8">
-        {/* Page header */}
-        <div className="bg-white shadow">
-          <div className="px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
-            <div className="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-slate-200">
-              <div className="min-w-0 flex-1">
-                {/* Profile */}
-                <div className="flex items-center">
-                  <Image
-                    className="hidden h-16 w-16 rounded-full sm:block"
-                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80"
-                    alt=""
-                    width={32}
-                    height={32}
-                  />
-                  <div>
-                    <div className="flex items-center">
-                      <Image
-                        className="h-16 w-16 rounded-full sm:hidden"
-                        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80"
-                        alt=""
-                        width={32}
-                        height={32}
-                      />
-                      <h1 className="ml-3 text-2xl font-bold leading-7 text-slate-900 sm:truncate sm:leading-9">
-                        Good morning, Emilia Birch
-                      </h1>
-                    </div>
-                    <dl className="mt-6 flex flex-col sm:ml-3 sm:mt-1 sm:flex-row sm:flex-wrap">
-                      <dt className="sr-only">Company</dt>
-                      <dd className="flex items-center text-sm font-medium capitalize text-slate-500 sm:mr-6">
-                        <BuildingOfficeIcon
-                          className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
-                          aria-hidden="true"
-                        />
-                        Duke street studio
-                      </dd>
-                      <dt className="sr-only">Account status</dt>
-                      <dd className="mt-3 flex items-center text-sm font-medium capitalize text-slate-500 sm:mr-6 sm:mt-0">
-                        <CheckCircleIcon
-                          className="mr-1.5 h-5 w-5 flex-shrink-0 text-green-400"
-                          aria-hidden="true"
-                        />
-                        Verified account
-                      </dd>
-                    </dl>
-                  </div>
-                </div>
-              </div>
-              <div className="mt-6 flex space-x-3 md:ml-4 md:mt-0">
-                <button
-                  type="button"
-                  className="inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
-                  Add money
-                </button>
-                <button
-                  type="button"
-                  className="inline-flex items-center rounded-md border border-transparent bg-cyan-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
-                  Send money
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-8">
-          <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
-            <h2 className="text-lg font-medium leading-6 text-slate-900">Overview</h2>
-            <div className="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
-              {/* Card */}
-              {cards.map((card) => (
-                <div key={card.name} className="overflow-hidden rounded-lg bg-white shadow">
-                  <div className="p-5">
-                    <div className="flex items-center">
-                      <div className="flex-shrink-0">
-                        <card.icon className="h-6 w-6 text-slate-400" aria-hidden="true" />
-                      </div>
-                      <div className="ml-5 w-0 flex-1">
-                        <dl>
-                          <dt className="truncate text-sm font-medium text-slate-500">{card.name}</dt>
-                          <dd>
-                            <div className="text-lg font-medium text-slate-900">{card.amount}</div>
-                          </dd>
-                        </dl>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="bg-slate-50 px-5 py-3">
-                    <div className="text-sm">
-                      <a href={card.href} className="font-medium text-cyan-700 hover:text-cyan-900">
-                        View all
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <h2 className="mx-auto mt-8 max-w-6xl px-4 text-lg font-medium leading-6 text-slate-900 sm:px-6 lg:px-8">
-            Recent activity
-          </h2>
-
-          {/* Activity list (smallest breakpoint only) */}
-          <div className="shadow sm:hidden">
-            <ul role="list" className="mt-2 divide-y divide-slate-200 overflow-hidden shadow sm:hidden">
-              {transactions.map((transaction) => (
-                <li key={transaction.id}>
-                  <a href={transaction.href} className="block bg-white px-4 py-4 hover:bg-slate-50">
-                    <span className="flex items-center space-x-4">
-                      <span className="flex flex-1 space-x-2 truncate">
-                        <BanknotesIcon className="h-5 w-5 flex-shrink-0 text-slate-400" aria-hidden="true" />
-                        <span className="flex flex-col truncate text-sm text-slate-500">
-                          <span className="truncate">{transaction.name}</span>
-                          <span>
-                            <span className="font-medium text-slate-900">{transaction.amount}</span>{" "}
-                            {transaction.currency}
-                          </span>
-                          <time dateTime={transaction.datetime}>{transaction.date}</time>
-                        </span>
-                      </span>
-                      <ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-slate-400" aria-hidden="true" />
-                    </span>
-                  </a>
-                </li>
-              ))}
-            </ul>
-
-            <nav
-              className="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3"
-              aria-label="Pagination">
-              <div className="flex flex-1 justify-between">
-                <a
-                  href="#"
-                  className="relative inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-500">
-                  Previous
-                </a>
-                <a
-                  href="#"
-                  className="relative ml-3 inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-500">
-                  Next
-                </a>
-              </div>
-            </nav>
-          </div>
-
-          {/* Activity table (small breakpoint and up) */}
-          <div className="hidden sm:block">
-            <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
-              <div className="mt-2 flex flex-col">
-                <div className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
-                  <table className="min-w-full divide-y divide-slate-200">
-                    <thead>
-                      <tr>
-                        <th
-                          className="bg-slate-50 px-6 py-3 text-left text-sm font-semibold text-slate-900"
-                          scope="col">
-                          Transaction
-                        </th>
-                        <th
-                          className="bg-slate-50 px-6 py-3 text-right text-sm font-semibold text-slate-900"
-                          scope="col">
-                          Amount
-                        </th>
-                        <th
-                          className="hidden bg-slate-50 px-6 py-3 text-left text-sm font-semibold text-slate-900 md:block"
-                          scope="col">
-                          Status
-                        </th>
-                        <th
-                          className="bg-slate-50 px-6 py-3 text-right text-sm font-semibold text-slate-900"
-                          scope="col">
-                          Date
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-slate-200 bg-white">
-                      {transactions.map((transaction) => (
-                        <tr key={transaction.id} className="bg-white">
-                          <td className="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-slate-900">
-                            <div className="flex">
-                              <a
-                                href={transaction.href}
-                                className="group inline-flex space-x-2 truncate text-sm">
-                                <BanknotesIcon
-                                  className="h-5 w-5 flex-shrink-0 text-slate-400 group-hover:text-slate-500"
-                                  aria-hidden="true"
-                                />
-                                <p className="truncate text-slate-500 group-hover:text-slate-900">
-                                  {transaction.name}
-                                </p>
-                              </a>
-                            </div>
-                          </td>
-                          <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-slate-500">
-                            <span className="font-medium text-slate-900">{transaction.amount}</span>
-                            {transaction.currency}
-                          </td>
-                          <td className="hidden whitespace-nowrap px-6 py-4 text-sm text-slate-500 md:block">
-                            <span
-                              className={classNames(
-                                statusStyles[transaction.status],
-                                "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium capitalize"
-                              )}>
-                              {transaction.status}
-                            </span>
-                          </td>
-                          <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-slate-500">
-                            <time dateTime={transaction.datetime}>{transaction.date}</time>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                  {/* Pagination */}
-                  <nav
-                    className="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3 sm:px-6"
-                    aria-label="Pagination">
-                    <div className="hidden sm:block">
-                      <p className="text-sm text-slate-700">
-                        Showing <span className="font-medium">1</span> to{" "}
-                        <span className="font-medium">10</span> of <span className="font-medium">20</span>{" "}
-                        results
-                      </p>
-                    </div>
-                    <div className="flex flex-1 justify-between sm:justify-end">
-                      <a
-                        href="#"
-                        id="test-css"
-                        className="relative inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
-                        CSS ID Test
-                      </a>
-                      <a
-                        href="#"
-                        className="relative ml-3 inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
-                        Next
-                      </a>
-                    </div>
-                  </nav>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </LayoutApp>
+    </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)}>
+          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/tailwind.config.js

@@ -5,6 +5,7 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: "class",
   theme: {
     extend: {},
   },

apps/formbricks-com/.env.example

@@ -1,3 +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=
+NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID=
+
+# Strapi API Key
+STRAPI_API_KEY=

apps/formbricks-com/.gitignore

@@ -34,4 +34,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-public/sitemap*.xml
+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,38 +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
-# or
-pnpm 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.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## 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

@@ -1,19 +1,27 @@
-import { Layout } from "@/components/docs/Layout";
-
 export const meta = {
   title: "Code Actions",
   description:
     "Integrate code actions in Formbricks using formbricks.track() to trigger surveys based on user actions, like button clicks, for precise insights. All open-source.",
 };
 
+#### Actions
+
+# Code Actions
+
 Actions can also be set in the code base. You can fire an action using `formbricks.track()`
 
+<CodeGroup title="Track an action">
+
 ```javascript
 formbricks.track("Action Name");
 ```
 
+</CodeGroup>
+
 Here is an example of how to fire an action when a user clicks a button:
 
+<CodeGroup title="Track Button Click">
+
 ```javascript
 const handleClick = () => {
   formbricks.track("Button Clicked");
@@ -22,4 +30,4 @@ const handleClick = () => {
 return <button onClick={handleClick}>Click Me</button>;
 ```
 
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
+</CodeGroup>

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

@@ -1,11 +1,13 @@
-import { Layout } from "@/components/docs/Layout";
-
 export const meta = {
   title: "No-Code Actions",
   description:
     "Utilize Formbricks' No-Code Actions like Page URL, innerText, and CSS Selector for easy survey triggers and enhanced user insights.",
 };
 
+#### 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
@@ -26,5 +28,3 @@ The innerText action checks if the `innerText` of a clicked HTML element matches
 ## 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!
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

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

@@ -1,11 +1,13 @@
-import { Layout } from "@/components/docs/Layout";
-
 export const meta = {
   title: "What are actions and why are they useful?",
   description:
     "Actions in Formbricks enable targeted survey displays during specific user journey moments. Enhance user segmentation by tracking actions for granular surveying.",
 };
 
+#### 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?
@@ -19,5 +21,3 @@ When a predefined action happens in your app, the Formbricks widget notices. Thi
 ## 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.
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

apps/formbricks-com/app/docs/api/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: "API Key Setup",
+  description:
+    "Generate, store, and delete personal API keys for secure Formbricks access. Ensure safekeeping to prevent unauthorized account control.",
+};
+
+#### 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/display/page.mdx

@@ -0,0 +1,164 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Responses API",
+  description:
+    "Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
+};
+
+#### Management API
+
+# 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.
+
+---
+
+## 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/overview/page.mdx

@@ -0,0 +1,32 @@
+export const meta = {
+  title: "API Overview",
+  description:
+    "Explore Formbricks' APIs: Public Client API for client-side tasks, and Management API for account management with secure API Key authentication.",
+};
+
+#### 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.
+
+## 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.
+
+## 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).
+
+<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/people/page.mdx

@@ -0,0 +1,76 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Responses API",
+  description:
+    "Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
+};
+
+#### Management API
+
+# People API
+
+The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
+
+---
+
+## Get or Create Person {{ tag: 'GET', label: '/api/v1/client/people/getOrCreate' }}
+
+<Row>
+  <Col>
+
+    Fetch a Person or create (if they don't exist) by their userId and the environmentId.
+
+    ### Mandatory Query Parameters
+    <Properties>
+      <Property name="userId" type="string">
+        User ID to fetch or create (if it does not exist)
+      </Property>
+    </Properties>
+
+    <Properties>
+      <Property name="enviornmentId" type="string">
+        Formbricks Environment ID
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/client/people/getOrCreate">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/client/people/getOrCreate?userId=<user-id>&environmentId=<env-id>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data": {
+        "person": {
+            "id": "clm4bcxms02hspj0ht05k6q5c",
+            "environmentId": "cll2m30r70004mx0huqkitgqv"
+            }
+        }
+    }
+    ```
+
+    ```json {{ title: '400 Bad Request' }}
+    {
+      "code": "bad_request",
+      "message": "Fields are missing or incorrectly formatted",
+      "details": {
+        "userId": ""
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---

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

@@ -0,0 +1,320 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Responses API",
+  description:
+    "Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
+};
+
+#### Management API
+
+# 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.
+
+---
+
+## List all responses {{ tag: 'GET', label: '/api/v1/responses' }}
+
+<Row>
+  <Col>
+
+    Retrieve all the responses you have received for all your surveys.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+    ### Optional Query Params
+    <Properties>
+      <Property name="surveyId" type="string">
+        SurveyId to filter responses by.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/responses">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/responses' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+      "data":[
+        {
+          "id":"cllnfybxd051rpl0gieavthr9",
+          "createdAt":"2023-08-23T07:56:33.121Z",
+          "updatedAt":"2023-08-23T07:56:41.793Z",
+          "surveyId":"cllnfy2780fromy0hy7uoxvtn",
+          "finished":true,
+          "data":{
+              "ec7agikkr58j8uonhioinkyk":"Loved it!",
+              "gml6mgy71efgtq8np3s9je5p":"clicked",
+              "klvpwd4x08x8quesihvw5l92":"Product Manager",
+              "kp62fbqe8cfzmvy8qwpr81b2":"Very disappointed",
+              "lkjaxb73ulydzeumhd51sx9g":"Not interesed.",
+              "ryo75306flyg72iaeditbv51":"Would love if it had dark theme."
+          },
+          "meta":{
+              "url":"https://app.formbricks.com/s/cllnfy2780fromy0hy7uoxvtn",
+              "userAgent":{
+                "os":"Linux",
+                "browser":"Chrome"
+              }
+          },
+          "personAttributes":null,
+          "person":null,
+          "notes":[],
+          "tags":[]
+        }
+      ]
+    }
+    ```
+
+    ```json {{ title: '404 Not Found' }}
+    {
+      "code": "not_found",
+      "message": "cllnfy2780fromy0hy7uoxvt not found",
+      "details": {
+        "resource_id": "survey",
+        "resource_type": "cllnfy2780fromy0hy7uoxvt"
+      }
+    }
+    ```
+
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---
+
+## Create a response {{ tag: 'POST', label: '/api/v1/client/responses' }}
+
+Add a new response to a survey.
+
+<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/[responseId]' }}
+
+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/[responseId]">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses/[responseId]' \
+    --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/surveys/page.mdx

@@ -0,0 +1,180 @@
+import { Fence } from "@/components/shared/Fence";
+
+export const meta = {
+  title: "Surveys API",
+  description:
+    "Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
+};
+
+#### Management API
+
+# Surveys API
+
+The Survey API currently has one endpoint that allows you to get all the surveys you have in your Formbricks environment. You will need the [API Key](/docs/api/api-key-setup) to access the same!
+
+---
+
+## List all surveys {{ tag: 'GET', label: '/api/v1/surveys' }}
+
+<Row>
+  <Col>
+
+    Retrieve all the surveys you have for the environment.
+
+    ### Mandatory Headers
+
+    <Properties>
+      <Property name="x-Api-Key" type="string">
+        Your Formbricks API key.
+      </Property>
+    </Properties>
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/api/v1/surveys">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/surveys' \
+    --header \
+    'x-api-key: <your-api-key>'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+
+    ```json {{title:'200 Success'}}
+    {
+        "data": [
+            {
+                "id": "cllnfy2780fromy0hy7uoxvtn",
+                "createdAt": "2023-08-23T07:56:20.516Z",
+                "updatedAt": "2023-08-23T07:56:26.947Z",
+                "name": "Product Market Fit (Superhuman)",
+                "type": "link",
+                "environmentId": "cll2m30r70004mx0huqkitgqv",
+                "status": "inProgress",
+                "attributeFilters": [],
+                "displayOption": "displayOnce",
+                "autoClose": null,
+                "triggers": [],
+                "redirectUrl": null,
+                "recontactDays": null,
+                "questions": [
+                    {
+                        "id": "gml6mgy71efgtq8np3s9je5p",
+                        "type": "cta",
+                        "headline": "You are one of our power users! Do you have 5 minutes?",
+                        "required": false,
+                        "buttonLabel": "Happy to help!",
+                        "logic": [
+                            {
+                                "condition": "skipped",
+                                "destination": "end"
+                            }
+                        ],
+                        "html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We would love to understand your user experience better. Sharing your insight helps a lot!</span></p>",
+                        "buttonExternal": false,
+                        "dismissButtonLabel": "No, thanks."
+                    },
+                    {
+                        "id": "kp62fbqe8cfzmvy8qwpr81b2",
+                        "type": "multipleChoiceSingle",
+                        "headline": "How disappointed would you be if you could no longer use My Product?",
+                        "subheader": "Please select one of the following options:",
+                        "required": true,
+                        "choices": [
+                            {
+                                "id": "bdgy1hnwd7uwmfxk1ljqp1n5",
+                                "label": "Not at all disappointed"
+                            },
+                            {
+                                "id": "poabnvgtwenp8rb2v70gj4hj",
+                                "label": "Somewhat disappointed"
+                            },
+                            {
+                                "id": "opfiqyqz8wrqn0i0f7t24d3n",
+                                "label": "Very disappointed"
+                            }
+                        ],
+                        "shuffleOption": "none"
+                    },
+                    {
+                        "id": "klvpwd4x08x8quesihvw5l92",
+                        "type": "multipleChoiceSingle",
+                        "headline": "What is your role?",
+                        "subheader": "Please select one of the following options:",
+                        "required": true,
+                        "choices": [
+                            {
+                                "id": "c8nerw6l9gpsxcmqkn10f9hy",
+                                "label": "Founder"
+                            },
+                            {
+                                "id": "ebjqezei6a2axtuq86cleetn",
+                                "label": "Executive"
+                            },
+                            {
+                                "id": "ctiijjblyhlp22snypfamqt1",
+                                "label": "Product Manager"
+                            },
+                            {
+                                "id": "ibalyr0mhemfkkr82vypmg40",
+                                "label": "Product Owner"
+                            },
+                            {
+                                "id": "fipk606aegslbd0e7yhc0xjx",
+                                "label": "Software Engineer"
+                            }
+                        ],
+                        "shuffleOption": "none"
+                    },
+                    {
+                        "id": "ryo75306flyg72iaeditbv51",
+                        "type": "openText",
+                        "headline": "What type of people do you think would most benefit from My Product?",
+                        "required": true
+                    },
+                    {
+                        "id": "lkjaxb73ulydzeumhd51sx9g",
+                        "type": "openText",
+                        "headline": "What is the main benefit your receive from My Product?",
+                        "required": true
+                    },
+                    {
+                        "id": "ec7agikkr58j8uonhioinkyk",
+                        "type": "openText",
+                        "headline": "How can we improve My Product for you?",
+                        "subheader": "Please be as specific as possible.",
+                        "required": true
+                    }
+                ],
+                "thankYouCard": {
+                    "enabled": true,
+                    "headline": "Thank you!",
+                    "subheader": "We appreciate your feedback."
+                },
+                "delay": 0,
+                "autoComplete": null,
+                "closeOnDate": null
+            }
+        ]
+    }
+    ```
+    ```json {{ title: '401 Not Authenticated' }}
+    {
+      "code": "not_authenticated",
+      "message": "Not authenticated",
+      "details": {
+        "x-Api-Key": "Header not provided or API Key invalid"
+        }
+    }
+    ```
+    </CodeGroup>
+
+  </Col>
+</Row>
+
+---

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

@@ -0,0 +1,399 @@
+export const meta = {
+  title: "Webhook API Overview",
+  description: "Learn how to use the Formbricks Webhook API.",
+};
+
+#### Webhook API
+
+# Webhook API
+
+Formbricks' Webhook API offers a powerful interface for interacting with webhooks. Webhooks in Formbricks allow you to receive real-time HTTP notifications of changes to specific objects in the Formbricks environment.
+
+Before you start managing webhooks, you need to create an API key. This will be used for authorization when making requests to the Webhook API. Please see the [API key setup page](/docs/api/api-key-setup) for more details on how to create and manage your API keys.
+
+The behavior of the webhooks is determined by their trigger settings. The trigger determines which updates the webhook sends. Current available triggers include "responseCreated", "responseUpdated", and "responseFinished". This allows you to customize your webhooks to only send notifications for the events that are relevant to your application.
+
+Webhooks are tied to a specific Formbricks environment. Once set, a webhook will receive updates from all surveys within this environment. This makes it easy to manage your data flow and ensure that all relevant updates are caught by the webhook.
+
+Our API has several REST endpoints enabling you to manage these webhooks, providing a great deal of flexibility:
+
+1. **List Webhooks:** Retrieve a list of all existing webhooks.
+1. **Retrieve Webhook by ID:** Retrieve a specific webhook by it's ID.
+1. **Create a New Webhook:** Add a new webhook to your system.
+1. **Get a Specific Webhook:** Query the details of a specific webhook using its unique ID.
+1. **Delete a Webhook:** Remove an existing webhook.
+
+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.
+
+---
+
+## 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/[webhookId]' }}
+
+<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/[webhookId]">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location \
+    'https://app.formbricks.com/api/v1/webhooks/[webhookId]' \
+    --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/[webhookId]' }}
+
+<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/[webhookId]">
+
+    ```bash {{ title: 'cURL' }}
+    curl --location --request DELETE 'https://app.formbricks.com/api/v1/webhooks/[webhookId]' \
+    --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

@@ -1,27 +1,35 @@
-import { Layout } from "@/components/docs/Layout";
-
 export const meta = {
   title: "Setting attributes with code",
   description:
     "Set attributes in code using setAttribute function. Enhance user segmentation, target surveys effectively, and gather valuable insights for better decisions. All open-source.",
 };
 
+#### 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
+## Setting Custom User Attributes
 
 You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
 
+<CodeGroup title="Setting Plan to Pro">
+
 ```javascript
 formbricks.setAttribute("Plan", "Pro");
 ```
 
+</CodeGroup>
+
 Generally speaking, the setAttribute function works like this:
 
+<CodeGroup title="Setting Custom Attributes">
+
 ```javascript
 formbricks.setAttribute("attribute_key", "attribute_value");
 ```
 
-Where `attributeName` is the name of the attribute you want to set, and `attributeValue` is the value of the attribute you want to set.
+</CodeGroup>
 
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
+Where `attributeName` is the name of the attribute you want to set, and `attributeValue` is the value of the attribute you want to set.

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

@@ -1,11 +1,13 @@
-import { Layout } from "@/components/docs/Layout";
-
 export const meta = {
   title: "Identifying Users",
   description:
     "Identify users with Formbricks by setting User ID, email, and custom attributes. Enhance survey targeting and recontacting while maintaining user privacy.",
 };
 
+#### 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!
@@ -14,32 +16,46 @@ Once the Formbricks widget is loaded on your web app, our SDK exposes methods fo
 
 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).
 
+<CodeGroup title="Setting User ID">
+
 ```javascript
 formbricks.setUserId("USER_ID");
 ```
 
+</CodeGroup>
+
 ## Setting User Email
 
 You can use the setEmail function to set the user's email:
 
+<CodeGroup title="Setting Email">
+
 ```javascript
 formbricks.setEmail("user@example.com");
 ```
 
+</CodeGroup>
+
 ### Setting Custom User Attributes
 
 You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
 
+<CodeGroup title="Setting Custom Attributes">
+
 ```javascript
 formbricks.setAttribute("attribute_key", "attribute_value");
 ```
 
+</CodeGroup>
+
 ### 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:
 
+<CodeGroup title="Logging out User">
+
 ```javascript
 formbricks.logout();
 ```
 
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
+</CodeGroup>

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

@@ -1,11 +1,13 @@
-import { Layout } from "@/components/docs/Layout";
-
 export const meta = {
   title: "What are attributes and why are they useful?",
   description:
     "How to use attributes for user segmentation, enhancing survey targeting & results. Improve feedback quality and make data-driven decisions.",
 };
 
+#### 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?
@@ -19,5 +21,3 @@ Attributes are sent from your application to Formbricks and are associated with
 ## 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".
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

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

@@ -1,23 +1,24 @@
-import { Layout } from "@/components/docs/Layout";
-import { Fence } from "@/components/shared/Fence";
-import { Callout } from "@/components/shared/Callout";
 import Image from "next/image";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 
-import CreateChurnFlow from "./create-cancel-flow.png";
-import ChangeText from "./change-text.png";
-import TriggerInnerText from "./trigger-inner-text.png";
-import TriggerCSS from "./trigger-css-selector.png";
-import TriggerPageUrl from "./trigger-page-url.png";
-import RecontactOptions from "./recontact-options.png";
-import PublishSurvey from "./publish-survey.png";
-import SelectAction from "./select-action.png";
+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: "Learn from Churn",
   description: "To know how to decrease churn, you have to understand it. Use a micro-survey.",
 };
 
+#### 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
@@ -43,11 +44,11 @@ To run the Churn Survey in your app you want to proceed as follows:
 3. Choose correct recontact options to never miss a feedback
 4. Prevent that churn!
 
-<Callout title="Formbricks Widget running?" type="note">
-  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)
-</Callout>
+<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
 
@@ -55,13 +56,23 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app
 
 Click on "Create Survey" and choose the template “Churn Survey”:
 
-<Image src={CreateChurnFlow} alt="Create churn survey by template" quality="100" className="rounded-lg" />
+<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" />
+<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._
 
@@ -77,49 +88,79 @@ 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" />
+<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" />
+<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" />
+<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.
 
-<Callout title="Pre-churn flow coming soon" type="note">
-
-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 🤷
-
-</Callout>
+<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" />
+<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" />
+<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" />
+<Image
+  src={PublishSurvey}
+  alt="Publish survey"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
-<Callout title="Formbricks Widget running?" type="warning">
-  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) to install the widget.
-</Callout>
+<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! 🎉
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

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

@@ -1,23 +1,24 @@
-import { Layout } from "@/components/docs/Layout";
-import { Fence } from "@/components/shared/Fence";
-import { Callout } from "@/components/shared/Callout";
 import Image from "next/image";
 
 import DocsFeedback from "@/components/docs/DocsFeedback";
-import AddAction from "./add-action.png";
-import ChangeId from "./change-id.png";
-import DocsNavi from "./docs-navi.png";
-import DocsTemplate from "./docs-template.png";
-import SelectNonevent from "./select-nonevent.png";
-import SwitchToDev from "./switch-to-dev.png";
-import WhenToAsk from "./when-to-ask.png";
-import CopyIds from "./copy-ids.png";
+import AddAction from "./add-action.webp";
+import ChangeId from "./change-id.webp";
+import DocsNavi from "./docs-navi.webp";
+import DocsTemplate from "./docs-template.webp";
+import SelectNonevent from "./select-nonevent.webp";
+import SwitchToDev from "./switch-to-dev.webp";
+import WhenToAsk from "./when-to-ask.webp";
+import CopyIds from "./copy-ids.webp";
 
 export const meta = {
   title: "Docs Feedback",
   description: "Docs Feedback allows you to measure how clear your documentation is.",
 };
 
+#### Best Practices
+
+# Docs Feedback
+
 Docs Feedback allows you to measure how clear your documentation is.
 
 ## Purpose
@@ -47,8 +48,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={SwitchToDev}
   alt="switch to dev environment"
   quality="100"
-  className="rounded-lg"
-  className="rounded"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />
 
 3. Then, create a survey using the template “Docs Feedback”:
@@ -57,8 +57,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={DocsTemplate}
   alt="select docs template"
   quality="100"
-  className="rounded-lg"
-  className="rounded"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />
 
 4. Change the Internal Question ID of the first question to **“isHelpful”** to make your life easier 😉
@@ -67,16 +66,16 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={ChangeId}
   alt="switch to dev environment"
   quality="100"
-  className="rounded-lg"
-  className="rounded"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />
 
 5. In the same way, you can change the Internal Question ID of the _Please elaborate_ question to **“additionalFeedback”** and the one of the _Page URL_ question to **“pageUrl”**.
 
-<Callout title="Answers need to be identical" type="note">
-  If you want different answers than “Yes 👍” and “No 👎” you need update the choices accordingly. They have
-  to be identical to the frontend we're building in the next step.
-</Callout>
+<Note>
+  ## Answers need to be identical 
+  If you want different answers than “Yes 👍” and “No 👎” you need update the choices accordingly. They have to
+  be identical to the frontend we're building in the next step.
+</Note>
 
 6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “When to ask” and create a new Action:
 
@@ -84,26 +83,37 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={WhenToAsk}
   alt="set up when to ask card"
   quality="100"
-  className="rounded-lg"
-  className="rounded"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />
 
 7. Our goal is to create an event that never fires. This is a bit nonsensical because it is a workaround. Stick with me 😃 Fill the action out like on the screenshot:
 
-<Image src={AddAction} alt="add action" quality="100" className="rounded-lg" className="rounded" />
+<Image
+  src={AddAction}
+  alt="add action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="rounded"
+/>
 
 8. Select the Non-Event in the dropdown. Now you see that the “Publish survey” button is active. Publish your survey 🤝
 
-<Image src={SelectNonevent} alt="select nonevent" quality="100" className="rounded-lg" className="rounded" />
+<Image
+  src={SelectNonevent}
+  alt="select nonevent"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 **You’re all setup in Formbricks Cloud for now 👍**
 
 ### 2. Build the frontend
 
-<Callout title="Your frontend might work differently" type="note">
-  Your frontend likely looks and works differently. This is an example specific to our tech stack. We want to
-  illustrate what you should consider building yours 😊
-</Callout>
+<Note>
+  ## Your frontend might work differently 
+  Your frontend likely looks and works differently. This is an example specific to our tech stack. We want to illustrate
+  what you should consider building yours 😊
+</Note>
 
 Before we start, lets talk about the widget. It works like this:
 
@@ -118,12 +128,20 @@ This allows us to capture and analyze partial feedback where the user is not wil
 
 2. Likely, you have a template file or similar which renders the navigation at the bottom of the page:
 
-<Image src={DocsNavi} alt="doc navigation" quality="100" className="rounded-lg" className="rounded" />
+<Image
+  src={DocsNavi}
+  alt="doc navigation"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="rounded"
+/>
 
 Locate that file. We are using the [Tailwind Template “Syntax”](https://tailwindui.com/templates/syntax) for our docs. Here is our [Layout.tsx](https://github.com/formbricks/formbricks/blob/main/apps/formbricks-com/components/docs/Layout.tsx) file.
 
 3. Write the frontend code for the widget. Here is the full component (we break it down right below):
 
+<CodeGroup title="Entire Widget">
+
 ```tsx
 import { useState } from "react";
 import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
@@ -197,10 +215,14 @@ export default function DocsFeedback() {
 }
 ```
 
+</CodeGroup>
+
 **Let’s break it down!**
 
 Setting the local states and getting the current URL:
 
+<CodeGroup title="State Management">
+
 ```tsx
 const router = useRouter(); // to get the URL of the current docs page
 const [isOpen, setIsOpen] = useState(false); // to close Popover after
@@ -209,11 +231,13 @@ const [responseId, setResponseId] = useState(null); // to store responseID (will
 const [freeText, setFreeText] = useState(""); // to locally store the additional info provided by user
 ```
 
+</CodeGroup>
+
 Disabling feedback if config environment variables are not set properly:
 
-```tsx
-// Disables feedback if key info like survey ID, API Host, or Formbricks environment ID are missing
+<CodeGroup title="Disable feedback if incorrect config env vars">
 
+```tsx
 if (
   !process.env.NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID ||
   !process.env.NEXT_PUBLIC_FORMBRICKS_COM_API_HOST ||
@@ -223,8 +247,12 @@ if (
 }
 ```
 
+</CodeGroup>
+
 The actual frontend (read comments):
 
+<CodeGroup title="Actual Frontend">
+
 ```tsx
 return (
     <div className="mt-6 inline-flex cursor-default items-center rounded-md border border-slate-200 bg-white p-4 text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
@@ -278,12 +306,16 @@ return (
 }
 ```
 
+</CodeGroup>
+
 ## 3. Connecting to the Formbricks API
 
-The last step is to hook up your sparkling new frontend to the Formbricks API. To do so, we followed the “[Create Response](https://formbricks.com/docs/api/create-response)” and “[Update Response](https://formbricks.com/docs/api/update-response)” pages in our docs.
+The last step is to hook up your sparkling new frontend to the Formbricks API. To do so, we followed the “[Create Response](/docs/client-api/create-response)” and “[Update Response](/docs/client-api/update-response)” pages in our docs.
 
 Here is the code for the `handleFeedbackSubmit` function with comments:
 
+<CodeGroup title="handleFeedbackSubmit() function definition">
+
 ```tsx
 export const handleFeedbackSubmit = async (YesNo, pageUrl) => {
   const response_data = {
@@ -323,8 +355,12 @@ export const handleFeedbackSubmit = async (YesNo, pageUrl) => {
 };
 ```
 
+</CodeGroup>
+
 And this is the `updateFeedback` function with comments:
 
+<CodeGroup title="updateFeedback() function definition">
+
 ```tsx
 export const updateFeedback = async (freeText, responseId) => {
   if (!responseId) {
@@ -362,6 +398,8 @@ export const updateFeedback = async (freeText, responseId) => {
 };
 ```
 
+</CodeGroup>
+
 That’s almost it! 🤸
 
 ## 4. Setting it up for testing
@@ -373,10 +411,12 @@ Before you roll it out in production, you want to test it. To do so, you need tw
 
 When you are on the survey detail page, you’ll find both of them in the URL:
 
-<Image src={CopyIds} alt="copy IDs" quality="100" className="rounded-lg" className="rounded" />
+<Image src={CopyIds} alt="copy IDs" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 Now, you have to replace the IDs and the API host accordingly in your `handleFeedbackSubmit`:
 
+<CodeGroup title="Replace the ID and API accordingly">
+
 ```tsx
   const payload = {
     response: response_data,
@@ -390,20 +430,23 @@ Now, you have to replace the IDs and the API host accordingly in your `handleFee
   };
 ```
 
+</CodeGroup>
+
 And lastly, in the `updateFeedback` function
 
+<CodeGroup title="Replace the ID and API here as well">
+
 ```tsx
   try {
     const res = await fetch(
-			// Note that we also updated the API host to 'https://app.formbricks.com/'
+		// Note that we also updated the API host to 'https://app.formbricks.com/'
       `https:app.formbricks.com/api/v1/client/environments/clgwcwp4z000lpf0hur7uxbuv/responses/${responseId}`, // Note that we also updated the API host to 'https://app.formbricks.com/'
 }
 ```
 
+</CodeGroup>
 ### You’re good to go! 🎉
 
 Something doesn’t work? Check your browser console for the error.
 
 Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

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

@@ -1,22 +1,23 @@
-import { Layout } from "@/components/docs/Layout";
-import { Fence } from "@/components/shared/Fence";
-import { Callout } from "@/components/shared/Callout";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import Image from "next/image";
 
-import ActionCSS from "./action-css.png";
-import ActionText from "./action-text.png";
-import ChangeText from "./change-text.png";
-import CreateSurvey from "./create-survey.png";
-import Publish from "./publish.png";
-import RecontactOptions from "./recontact-options.png";
-import SelectAction from "./select-action.png";
+import ActionCSS from "./action-css.webp";
+import ActionText from "./action-text.webp";
+import ChangeText from "./change-text.webp";
+import CreateSurvey from "./create-survey.webp";
+import Publish from "./publish.webp";
+import RecontactOptions from "./recontact-options.webp";
+import SelectAction from "./select-action.webp";
 
 export const meta = {
   title: "Feature Chaser",
   description: "Follow up with users who used a specific feature. Gather feedback and improve your product.",
 };
 
+#### Best Practices
+
+# Feature Chaser
+
 Following up on specific features only makes sense with very targeted surveys. Formbricks is built for that.
 
 ## Purpose
@@ -40,11 +41,11 @@ To run the Feature Chaser survey in your app you want to proceed as follows:
 1. Create new Feature Chaser survey at [app.formbricks.com](http://app.formbricks.com/)
 2. Setup a user action to display survey at the right point in time
 
-<Callout title="Formbricks Widget running?" type="note">
-  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)
-</Callout>
+<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 Feature Chaser
 
@@ -52,13 +53,23 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app
 
 Click on "Create Survey" and choose the template “Feature Chaser”:
 
-<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
+<Image
+  src={CreateSurvey}
+  alt="Create survey by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 ### 2. Update questions
 
 The questions you want to ask are dependent on your feature and can be very specific. In the template, we suggest a high-level check on how easy it was for the user to achieve their goal. We also add an opportunity to provide context:
 
-<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ChangeText}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 Save, and move over to where the magic happens: The “Audience” tab.
 
@@ -72,35 +83,54 @@ There are two ways to track a button:
 
 1. **Trigger by innerText:** You might have a button with a unique text at the end of your feature e.g. "Export Report". You can setup a user Action with the according `innerText` to trigger the survey, like so:
 
-<Image src={ActionText} alt="Set the trigger by inner Text" quality="100" className="rounded-lg" />
+<Image
+  src={ActionText}
+  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 “Export Report” 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=“export-report-featurename”` and set your user action up like so:
 
-<Image src={ActionCSS} alt="Set the trigger by CSS Selector" quality="100" className="rounded-lg" />
+<Image
+  src={ActionCSS}
+  alt="Set the trigger by CSS Selector"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 Please follow our [Actions manual](/docs/actions/why) for an in-depth description of how Actions work.
 
 ### 4. Select Action in the “When to ask” card
 
-<Image src={SelectAction} alt="Select PMF trigger button action" quality="100" className="rounded-lg" />
+<Image
+  src={SelectAction}
+  alt="Select PMF trigger button action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 ### 5. Last step: Set Recontact Options correctly
 
 Lastly, scroll down to “Recontact Options”. Here you have full freedom to decide who you want to ask. Generally, you only want to ask every user once and prevent survey fatigue. It's up to you to decide if you want to ask again, when the user did not yet reply:
 
-<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
+<Image
+  src={RecontactOptions}
+  alt="Set recontact options"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 ### 7. Congrats! You’re ready to publish your survey 💃
 
-<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
+<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
-<Callout title="Formbricks Widget running?" type="warning">
-  You need to have the Formbricks Widget installed to display the Feature Chaser in your app. Please follow
-  [this tutorial (Step 4 onwards)](/docs/getting-started/quickstart) to install the widget.
-</Callout>
+<Note>
+  ## Formbricks Widget running? 
+  You need to have the Formbricks Widget installed to display the Feature Chaser 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! 🎉
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

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

@@ -1,24 +1,25 @@
-import { Layout } from "@/components/docs/Layout";
-import { Fence } from "@/components/shared/Fence";
 import Link from "next/link";
 import Image from "next/image";
-import { Callout } from "@/components/shared/Callout";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 
-import AddAction from "./add-action.png";
-import AddCSSAction from "./add-css-action.png";
-import AddHTMLAction from "./add-html-action.png";
-import ChangeTextContent from "./change-text-content.png";
-import CreateFeedbackBox from "./create-feedback-box-by-template.png";
-import PublishSurvey from "./publish-survey.png";
-import SelectAction from "./select-feedback-button-action.png";
-import RecontactOptions from "./set-recontact-options.png";
+import AddAction from "./add-action.webp";
+import AddCSSAction from "./add-css-action.webp";
+import AddHTMLAction from "./add-html-action.webp";
+import ChangeTextContent from "./change-text-content.webp";
+import CreateFeedbackBox from "./create-feedback-box-by-template.webp";
+import PublishSurvey from "./publish-survey.webp";
+import SelectAction from "./select-feedback-button-action.webp";
+import RecontactOptions from "./set-recontact-options.webp";
 
 export const meta = {
   title: "Feedback Box",
   description: "The Feedback Box gives your users a direct channel to share their feedback and feel heard.",
 };
 
+#### Best Practices
+
+# Feedback Box
+
 The Feedback Box gives your users a direct channel to share their feedback and feel heard.
 
 ## Purpose
@@ -48,58 +49,83 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app
 
 Then, create a new survey and look for the "Feedback Box" template:
 
-<Image src={CreateFeedbackBox} alt="Create feedback box by template" quality="100" className="rounded-lg" />
+<Image
+  src={CreateFeedbackBox}
+  alt="Create feedback box by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 ### 2. Update question content
 
 Change the questions and answer options according to your preference:
 
-<Image src={ChangeTextContent} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ChangeTextContent}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 ### 3. Create user action to trigger Feedback Box:
 
 Go to the “Audience” tab, find the “When to send” card and choose “Add Action”. We will now use our super cool No-Code User Action Tracker:
 
-<Image src={AddAction} alt="Add action" quality="100" className="rounded-lg" />
+<Image src={AddAction} alt="Add action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
-<Callout title="You can also add actions in your code" type="note">
-  You can also create [Code Actions](/docs/actions/code) using `formbricks.track("Eventname")` - they will
-  automatically appear in your Actions overview as long as the SDK is embedded.
-</Callout>
+<Note>
+  ## You can also add actions in your code 
+  You can also create [Code Actions](/docs/actions/code) using `formbricks.track("Eventname")` - they will automatically
+  appear in your Actions overview as long as the SDK is embedded.
+</Note>
 
 We have two options to track the Feedback Button in your application: innerText and CSS-Selector:
 
 1. **innerText:** This means that whenever a user clicks any HTML item in your app which has an `innerText` of `Feedback` the Feedback Box will be displayed.
 2. **CSS-Selector:** This means that when an element with a specific CSS-Selector like `#feedback-button` is clicked, your Feedback Box is triggered.
 
-<div className="grid grid-cols-2 space-x-2">
+<div className="grid grid-cols-2 space-x-2 max-w-full sm:max-w-3xl">
   <Image src={AddHTMLAction} alt="Add HTML action" quality="100" className="rounded-lg" />
   <Image src={AddCSSAction} alt="Add CSS action" quality="100" className="rounded-lg" />
 </div>
 
 ### 4. Select action in the “When to ask” card
 
-<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
+<Image
+  src={SelectAction}
+  alt="Select feedback button action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 ### 5. Set Recontact Options correctly
 
 Scroll down to “Recontact Options”. Here you have to choose the right settings so that the Feedback Box pops up every time the user action is performed. (Our default is that every user sees every survey only once):
 
-<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
+<Image
+  src={RecontactOptions}
+  alt="Set recontact options"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
-### 7. You’re ready publish your survey!
+### 6. You’re ready publish your survey!
 
-<Image src={PublishSurvey} alt="Publish survey" quality="100" className="rounded-lg" />
+<Image
+  src={PublishSurvey}
+  alt="Publish survey"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 ## Setting up the Widget
 
-<Callout title="Formbricks Widget running?" type="warning">
-  You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow
-  [this tutorial (Step 4 onwards)](/docs/getting-started/quickstart) to install the widget.
-</Callout>
+<Note>
+  ## Formbricks Widget running?
+  You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this
+  tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey) to install the widget.
+</Note>
 
 ### &nbsp;
 
 # That’s it! 🎉
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

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

@@ -1,22 +1,23 @@
-import { Layout } from "@/components/docs/Layout";
-import { Fence } from "@/components/shared/Fence";
-import { Callout } from "@/components/shared/Callout";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import Image from "next/image";
 
-import ActionText from "./action-innertext.png";
-import ActionPageurl from "./action-pageurl.png";
-import ChangeText from "./change-text.png";
-import CreateSurvey from "./create-survey.png";
-import Publish from "./publish.png";
-import RecontactOptions from "./recontact-options.png";
-import SelectAction from "./select-action.png";
+import ActionText from "./action-innertext.webp";
+import ActionPageurl from "./action-pageurl.webp";
+import ChangeText from "./change-text.webp";
+import CreateSurvey from "./create-survey.webp";
+import Publish from "./publish.webp";
+import RecontactOptions from "./recontact-options.webp";
+import SelectAction from "./select-action.webp";
 
 export const meta = {
   title: "Improve Trial Conversion",
   description: "Understand how to improve the trial conversions to get more paying customers.",
 };
 
+#### Best Practices
+
+# Improve Trial Conversion
+
 When a user doesn't convert, you want to know why. A micro-survey displayed at exactly the right time gives you a window into understanding the most relevant question: To pay or not to pay?
 
 ## Purpose
@@ -40,11 +41,11 @@ To display the Trial Conversion Survey in your app you want to proceed as follow
 2. Set up the user action to display survey at right point in time
 3. Print that 💸
 
-<Callout title="Formbricks Widget running?" type="note">
-  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)
-</Callout>
+<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 Trial Conversion Survey
 
@@ -52,13 +53,23 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app
 
 Click on "Create Survey" and choose the template “Improve Trial Conversion”:
 
-<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
+<Image
+  src={CreateSurvey}
+  alt="Create 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 questions 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" />
+<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!_
 
@@ -66,9 +77,10 @@ Save, and move over to the “Audience” tab.
 
 ### 3. Pre-segment your audience (coming soon)
 
-<Callout title="Filter by attribute coming soon" type="note">
+<Note>
+  ## Filter by attribute coming soon 
   We're working on pre-segmenting users by attributes. We will update this manual in the next days.
-</Callout>
+</Note>
 
 Pre-segmentation isn't relevant for this survey because you likely want to solve all people who cancel their trial. You probably have a specific user action e.g. clicking on "Cancel Trial" you can use to only display the survey to users trialing your product.
 
@@ -78,37 +90,56 @@ How you trigger your survey depends on your product. There are two options:
 
 1. **Trigger by pageURL:** Let’s say you have a page under “/trial-cancelled” where you forward users once they cancelled the trial subscription. You can then create an user Action with the type `pageURL` with the following settings:
 
-<Image src={ActionPageurl} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ActionPageurl}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 Whenever a user visits this page, the survey will be displayed ✅
 
 2. **Trigger by Button Click:** In a different case, you have a “Cancel Trial button in your app. You can setup a user Action with the according `innerText` like so:
 
-<Image src={ActionText} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ActionText}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 Please have a look at our complete [Actions manual](/docs/actions/why) if you have questions.
 
 ### 5. Select Action in the “When to ask” card
 
-<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
+<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 gather as many insights as possible. 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" />
+<Image
+  src={RecontactOptions}
+  alt="Set recontact options"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 ### 7. Congrats! You’re ready to publish your survey 💃
 
-<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
+<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
-<Callout title="Formbricks Widget running?" type="warning">
-  You need to have the Formbricks Widget installed to display the Improve Trial Conversion Survey in your app.
-  Please follow [this tutorial (Step 4 onwards)](/docs/getting-started/quickstart) to install the widget.
-</Callout>
+<Note>
+  ## Formbricks Widget running? 
+  You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this
+  tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey) to install the widget.
+</Note>
 
 ###
 
 # Go get 'em 🎉
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;