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

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@formbricks/formbricks-com", "@formbricks/demo"]
+  "ignore": ["@formbricks/formbricks-com", "@formbricks/demo", "@formbricks/web"]
 }

.env.docker

@@ -47,7 +47,7 @@ NEXTAUTH_URL=http://localhost:3000
 # SMTP_HOST=localhost
 # SMTP_PORT=1025
 # Enable SMTP_SECURE_ENABLED for TLS (port 465)
-# SMTP_SECURE_ENABLED=0 # Enable for TLS (port 465)
+# SMTP_SECURE_ENABLED=0
 # SMTP_USER=smtpUser
 # SMTP_PASSWORD=smtpPassword
 
@@ -100,4 +100,4 @@ GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
 # Cron Secret
-CRON_SECRET=
+CRON_SECRET=

.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/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

@@ -0,0 +1,30 @@
+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 }}
+      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: Lint
+        run: pnpm lint

.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 }}

.github/workflows/release-docker.yml

@@ -1,4 +1,4 @@
-name: Release Formbricks Image on Dockerhub
+name: Release on Dockerhub
 
 on:
   push:
@@ -7,8 +7,11 @@ on:
 
 jobs:
   release-image-on-dockerhub:
-    name: Release
+    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

.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

@@ -1,9 +1,11 @@
-name: Checks
-on: [push]
+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 }}
@@ -24,14 +26,11 @@ jobs:
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
 
-      - name: Build formbricks-js dependencies
-        run: pnpm build --filter=js
-
       - name: create .env
         run: cp .env.example .env
 
-      - name: Lint
-        run: pnpm lint
+      - name: Build formbricks-js dependencies
+        run: pnpm build --filter=js
 
-      #- name: Test
-      #  run: pnpm test
+      - 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. 😊

.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

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>
 
@@ -48,7 +48,7 @@ Formbricks helps you apply best practices from data-driven work and experience m
 - 👩🏻 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**
+- 🔌 Integrate Formbricks with **Slack, Posthog, Zapier, n8n and more**
 - 🔒 All **open source**, transparent and self-hostable
 
 ### Built on Open Source

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/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "clean": "rimraf .turbo node_modules .next",
     "dev": "next dev -p 3002 --turbo",
-    "go": "next dev -p 3002 --turbo",
+    "go": "next dev -p 3002",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

apps/demo/pages/app/index.tsx

@@ -15,8 +15,8 @@ export default function AppPage({}) {
   }, [darkMode]);
 
   return (
-    <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
-      <div className="flex justify-between">
+    <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
@@ -27,7 +27,7 @@ export default function AppPage({}) {
           </p>
         </div>
         <button
-          className="rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
+          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>
@@ -36,14 +36,27 @@ export default function AppPage({}) {
       <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">Setup .env</h3>
+            <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">Widget Logs</h3>
+            <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.
@@ -60,18 +73,18 @@ export default function AppPage({}) {
               Reset person / pull data from Formbricks app
             </h3>
             <p className="text-slate-700 dark:text-gray-300">
-              On formbricks.logout() a few things happen: <strong>New person is created</strong> and{" "}
+              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.logout();
+                formbricks.reset();
               }}>
-              Logout
+              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;Logout&apos; and
+              If you made a change in Formbricks app and it does not seem to work, hit &apos;Reset&apos; and
               try again.
             </p>
           </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/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/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
@@ -43,43 +44,76 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 
 2. In the Menu (top right) you see that you can switch between a “Development” and a “Production” environment. These are two separate environments so your test data doesn’t mess up the insights from prod. Switch to “Development”:
 
-<Image src={SwitchToDev} alt="switch to dev environment" quality="100" className="rounded-lg" />
+<Image
+  src={SwitchToDev}
+  alt="switch to dev environment"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 3. Then, create a survey using the template “Docs Feedback”:
 
-<Image src={DocsTemplate} alt="select docs template" quality="100" className="rounded-lg" />
+<Image
+  src={DocsTemplate}
+  alt="select docs template"
+  quality="100"
+  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 😉
 
-<Image src={ChangeId} alt="switch to dev environment" quality="100" className="rounded-lg" />
+<Image
+  src={ChangeId}
+  alt="switch to dev environment"
+  quality="100"
+  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:
 
-<Image src={WhenToAsk} alt="set up when to ask card" quality="100" className="rounded-lg" />
+<Image
+  src={WhenToAsk}
+  alt="set up when to ask card"
+  quality="100"
+  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" />
+<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:
 
@@ -94,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";
@@ -173,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
@@ -185,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 ||
@@ -199,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">
@@ -254,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](/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 = {
@@ -299,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) {
@@ -338,6 +398,8 @@ export const updateFeedback = async (freeText, responseId) => {
 };
 ```
 
+</CodeGroup>
+
 That’s almost it! 🤸
 
 ## 4. Setting it up for testing
@@ -349,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" />
+<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,
@@ -366,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>;

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

@@ -1,25 +1,26 @@
-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 ActionInner from "./action-innertext.png";
-import ActionPageurl from "./action-pageurl.png";
-import AddAction from "./add-action.png";
-import ChangeText from "./change-text.png";
-import CreatePrompt from "./create-prompt.png";
-import InterviewExample from "./interview-example.png";
-import Publish from "./publish-survey.png";
-import RecontactOptions from "./recontact-options.png";
-import SelectAction from "./select-action.png";
+import ActionCSS from "./action-css.webp";
+import ActionInner from "./action-innertext.webp";
+import ActionPageurl from "./action-pageurl.webp";
+import AddAction from "./add-action.webp";
+import ChangeText from "./change-text.webp";
+import CreatePrompt from "./create-prompt.webp";
+import InterviewExample from "./interview-example.webp";
+import Publish from "./publish-survey.webp";
+import RecontactOptions from "./recontact-options.webp";
+import SelectAction from "./select-action.webp";
 
 export const meta = {
   title: "In-app Interview Prompt",
   description: "Invite only power users to schedule an interview with your product team.",
 };
 
+#### Best Practices
+
+# In-app Interview Prompt
+
 The Interview Prompt allows you to pick a specific user segment (e.g. Power Users) and invite them to a user interview. Bye, bye spammy email invites, benefit from up to 6x more respondents.
 
 ## Purpose
@@ -45,11 +46,11 @@ To display an Interview Prompt in your app you want to proceed as follows:
 2. Adjust content and settings
 3. That’s it! 🎉
 
-<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
-  (15mins).](/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 (15mins).](/docs/getting-started/quickstart-in-app-survey)
+</Note>
 
 ### 1. Create new Interview Prompt
 
@@ -57,25 +58,41 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app
 
 Click on "Create Survey" and choose the template “Interview Prompt”:
 
-<Image src={CreatePrompt} alt="Create interview prompt by template" quality="100" className="rounded-lg" />
+<Image
+  src={CreatePrompt}
+  alt="Create interview prompt by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 ### 2. Update prompt and CTA
 
 Update the prompt, description and button text to match your products tonality. You can also update the button color in the Product Settings.
 
-<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"
+/>
 
 In the button settings you have to make sure it is set to “External URL”. In the URL field, copy your booking link (e.g. https://cal.com/company/user-interview). If you don’t have a booking link yet, head over to [cal.com](http://cal.com) and get one - they have the best free plan out there!
 
-<Image src={InterviewExample} alt="Add CSS action" quality="100" className="rounded-lg" />
+<Image
+  src={InterviewExample}
+  alt="Add CSS action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 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 few days.
-</Callout>
+</Note>
 
 Once you clicked over to the “Audience” tab you can change the settings. In the **Who To Send** card, select “Filter audience by attribute”. This allows you to only show the prompt to a specific segment of your user base.
 
@@ -87,47 +104,67 @@ Great, now only the “Power User” segment will see our Interview Prompt. But
 
 To create the trigger to show your Interview Prompt, 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>
 
 Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display on a page visit since you already filter who sees the prompt by attributes.
 
 1. **pageURL:** Whenever a user visits a page the survey will be displayed, as long as the other conditions match. Other conditions are pre-segmentation, if this user has seen a survey in the past 2 weeks, etc.
 
-<Image src={ActionPageurl} alt="Add page URL action" quality="100" className="rounded-lg" />
+<Image
+  src={ActionPageurl}
+  alt="Add page URL action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 
 2. **innerText & CSS-Selector:** When a user clicks an element (like a button) with a specific text content or CSS selector, the prompt will be displayed as long as the other conditions also match.
 
 <div className="grid grid-cols-2 space-x-2">
-  <Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
-  <Image src={ActionInner} alt="Add inner text action" quality="100" className="rounded-lg" />
+  <Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+  <Image
+    src={ActionInner}
+    alt="Add inner text action"
+    quality="100"
+    className="rounded-lg max-w-full sm:max-w-3xl"
+  />
 </div>
 
 ### 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. Set Recontact Options correctly
 
 Scroll down to “Recontact Options”. Here you have to choose the correct settings to strike the right balance between asking for user feedback and preventing survey fatigue. Your settings also depend on the size of your user base or segment. If you e.g. have thousands of “Power Users” you can easily afford to only display the prompt once. If you have a smaller user base you might want to ask twice to get a sufficient amount of bookings:
 
-<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="note">
-  You need to have the Formbricks Widget installed to display the Interview Prompt 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>
 
 ###
 
 # Learn about them users! 🎉
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;