feat: formbricks/api package as per js package 1.2.2 (#1640)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

.env.example

@@ -10,18 +10,13 @@
 
 WEBAPP_URL=http://localhost:3000
 
-SURVEY_BASE_URL=http://localhost:3000/s
-
 # Set this if you want to have a shorter link for surveys
-SHORT_SURVEY_BASE_URL=
+SHORT_URL_BASE=
 
 # Encryption keys
 # Please set both for now, we will change this in the future
 
-# You can use: `openssl rand -base64 16` to generate one
-FORMBRICKS_ENCRYPTION_KEY=
-
-# You can use: `openssl rand -base64 24` to generate one
+# You can use: `openssl rand -hex 32` to generate one
 ENCRYPTION_KEY=
 
 ##############
@@ -35,7 +30,7 @@ DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=pu
 ###############
 
 # @see: https://next-auth.js.org/configuration/options#nextauth_secret
-# You can use: `openssl rand -base64 32` to generate one
+# You can use: `openssl rand -hex 32` to generate one
 NEXTAUTH_SECRET=RANDOM_STRING
 
 # Set this to your public-facing URL, e.g., https://example.com
@@ -99,6 +94,13 @@ GOOGLE_AUTH_ENABLED=0
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
+# Configure Azure Active Directory Login
+AZUREAD_AUTH_ENABLED=0
+AZUREAD_CLIENT_ID=
+AZUREAD_CLIENT_SECRET=
+AZUREAD_TENANT_ID=
+AZURE_DIRECT_REDIRECT=0
+
 # Cron Secret
 CRON_SECRET=
 
@@ -114,4 +116,15 @@ NEXT_PUBLIC_FORMBRICKS_API_HOST=
 NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
 NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
 
+# Oauth credentials for Google sheet integration 
+GOOGLE_SHEETS_CLIENT_ID=
+GOOGLE_SHEETS_CLIENT_SECRET=
+GOOGLE_SHEETS_REDIRECT_URL=
+
+# Oauth credentials for Airtable integration 
+AIRTABLE_CLIENT_ID=
+
+# Enterprise License Key
+ENTERPRISE_LICENSE_KEY=
+
 */

.github/PULL_REQUEST_TEMPLATE.md

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

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

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

.github/workflows/build-web.yml

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

.github/workflows/cron-reportUsageToStripe.yml

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

.github/workflows/lint.yml

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

.github/workflows/pr.yml

@@ -24,7 +24,7 @@ jobs:
 
   build:
     name: Build Formbricks-web
-    uses: ./.github/workflows/build.yml
+    uses: ./.github/workflows/build-web.yml
     secrets: inherit
 
   required:

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

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

.github/workflows/release-docker.yml

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

.gitpod.yml

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

.husky/pre-commit

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

.npmrc

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

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

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

README.md

@@ -1,3 +1,4 @@
+<div id="top"></div>
 <p align="center">
 <a href="https://formbricks.com">
     <img width="120" alt="Open Source Experience Management Solution Qualtrics Alternative Logo" src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
@@ -5,7 +6,7 @@
   <h3 align="center">Formbricks</h3>
 
   <p align="center">
-    The Open Source Survey & Experience Management solution for fast growing companies
+    The Open Source Survey Toolbox
     <br />
     <a href="https://formbricks.com/">Website</a>  |  <a href="https://formbricks.com/discord">Join Discord community</a>
   </p>
@@ -14,7 +15,7 @@
 <p align="center">
 <a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://formbricks.com/discord"><img src="https://img.shields.io/discord/979077669410979880?label=Discord&logo=discord&logoColor=%23fff" alt="Join Formbricks Discord"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
    <a href="https://news.ycombinator.com/item?id=32303986"><img src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600" alt="Hacker News"></a>
-   <a href="https://www.producthunt.com/products/snoopforms"><img src="https://img.shields.io/badge/Product%20Hunt-%232%20Product%20of%20the%20Day-orange?logo=producthunt&logoColor=%23fff" alt="Product Hunt"></a>
+   <a href="[https://www.producthunt.com/products/formbricks](https://www.producthunt.com/posts/formbricks)"><img src="https://img.shields.io/badge/Product%20Hunt-455-orange?logo=producthunt&logoColor=%23fff" alt="Product Hunt"></a>
    <a href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator" alt="Github Accelerator"></a>
 <a href="https://github.com/formbricks/formbricks/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
 </p>
@@ -29,13 +30,9 @@
 <a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/675065/72e5e37b-8ef7-4340-b06e-f1d12a05330f#gh-light-mode-only" height="20px"></a><a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/72809645/9d9711dc-75e5-4084-b7fa-bbaf621064a8#gh-dark-mode-only" height="20px">
 </p>
 
-<img width="1527" alt="formtribe hackathon" src="https://github.com/formbricks/formbricks/assets/72809645/addc3a5b-421c-4c8d-8be2-eedf087100ed">
-
-## 🔥 The FormTribe Hackathon is on!
-
-To celebrate Hacktoberfest, we've launched our FormTribe hackathon. Write code or perform non-code side quests to collect points and increase your chances of winning the MacBook Air M2!
-
-**Join lottery with a [single tweet!](https://formtribe.com). All info on [formtribe.com](https://formtribe.com)**
+<p align="center">
+  <a href="https://trendshift.io/repositories/2570" target="_blank"><img src="https://trendshift.io/api/badge/repositories/2570" alt="Trendshift Badge for formbricks/formbricks" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
 
 ## ✨ About Formbricks
 
@@ -47,11 +44,25 @@ Formbricks is your go-to solution for in-product micro-surveys that will superch
 
 ## 💪 Mission: Make customer-centric decisions based on data.
 
-Formbricks helps you apply best practices from data-driven work and experience management to make better business decisions. Ask users as they experience your product - and leverage a significantly higher conversion rate. Gather all insights you can - including partial submissions and build conviction for the next product decision. Better data, better business.
+Formbricks is a powerful tool for creating in-product micro-surveys - and leverage a significantly higher conversion rate. It allows you to gather valuable insights from your users, enabling you to make data-driven decisions that enhance your product's user experience. With Formbricks, you can create surveys with our no-code editor, choose from a variety of templates, target specific user groups, and much more.
+
+### Table of Contents
+
+- [Features](#features)
+- [Getting Started](#getting-started)
+  - [Cloud Version](#cloud-version)
+  - [Self-hosted Version](#self-hosted-version)
+  - [Development](#development)
+- [Contribution](#contribution)
+- [Contact](#contact-us)
+- [License](#license)
+- [Security](#security)
+
+<a id="features"></a>
 
 ### Features
 
-- 📲 Create **in-product surveys** with our no code editor with multiple question types.
+- 📲 Create **in-product surveys** with our no-code editor with multiple question types.
 - 📚 Choose from a variety of best-practice **templates**.
 - 👩🏻 Launch and **target your surveys to specific user groups** without changing your application code.
 - 🔗 Create shareable **link surveys**.
@@ -69,14 +80,20 @@ Formbricks helps you apply best practices from data-driven work and experience m
 - 🔒 [Auth.js](https://authjs.dev/)
 - 🧘‍♂️ [Zod](https://zod.dev/)
 
+<a id="getting-started"></a>
+
 ## 🚀 Getting started
 
 We've got several options depending on your need to help you quickly get started with Formbricks.
 
+<a id="cloud-version"></a>
+
 ### ☁️ Cloud Version
 
 Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://formbricks.com).
 
+<a id="self-hosted-version"></a>
+
 ### 🐳 Self-hosted version
 
 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
@@ -89,7 +106,7 @@ If you opt for self-hosting Formbricks, here are a few options to consider:
 
 To get started with self-hosting with Docker, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).
 
-#### Community managed One Click Hosting
+#### Community-managed One Click Hosting
 
 ##### Railway
 
@@ -97,6 +114,8 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel
 
 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
 
+<a id="development"></a>
+
 ### 👨‍💻 Development
 
 #### Prerequisites
@@ -119,6 +138,8 @@ To get started locally, we've got a [guide to help you](https://formbricks.com/d
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/formbricks/formbricks)
 
+<a id="contribution"></a>
+
 ## ✍️ Contribution
 
 We are very happy if you are interested in contributing to Formbricks 🤗
@@ -127,7 +148,7 @@ Here are a few options:
 
 - Star this repo.
 - Create issues every time you feel something is missing or goes wrong.
-- Upvote issues with 👍 reaction so we know what's the demand for a particular issue to prioritize it within the roadmap.
+- Upvote issues with 👍 reaction so we know what the demand for a particular issue is to prioritize it within the roadmap.
 
 Please check out [our contribution guide](https://formbricks.com/docs/contributing/introduction) and our [list of open issues](https://github.com/formbricks/formbricks/issues) for more information.
 
@@ -137,16 +158,24 @@ Please check out [our contribution guide](https://formbricks.com/docs/contributi
   <img src="https://contrib.rocks/image?repo=formbricks/formbricks" />
 </a>
 
+<a id="contact-us"></a>
+
 ## 📆 Contact us
 
 Let's have a chat about your survey needs and get you started.
 
 <a href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
 
+<a id="license"></a>
+
 ## ⚖️ License
 
-Distributed under the AGPLv3 License. See `LICENSE` for more information.
+Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.
+
+<a id="security"></a>
 
 ## 🔒 Security
 
-We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See `SECURITY.md` for more information.
+We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See [`SECURITY.md`](./SECURITY.md) for more information.
+
+<p align="right"><a href="#top">🔼 Back to top</a></p>

apps/demo/.env.example

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

apps/demo/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@heroicons/react": "^2.0.18",
-    "next": "13.5.4",
+    "next": "14.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/demo/pages/_app.tsx

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

apps/demo/pages/app/index.tsx

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

apps/demo/pages/signin/index.tsx

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

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

@@ -1,202 +0,0 @@
-import formbricks from "@formbricks/js";
-import Image from "next/image";
-import { useEffect, useState } from "react";
-import fbsetup from "../../public/fb-setup.png";
-
-export default function AppPage({}) {
-  const [darkMode, setDarkMode] = useState(false);
-
-  useEffect(() => {
-    if (darkMode) {
-      document.body.classList.add("dark");
-    } else {
-      document.body.classList.remove("dark");
-    }
-  }, [darkMode]);
-
-  return (
-    <div className="h-full bg-white px-12 py-6 dark:bg-slate-800">
-      <div className="flex flex-col justify-between md:flex-row">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
-            Formbricks In-product Survey Demo App
-          </h1>
-          <p className="text-slate-700 dark:text-slate-300">
-            This app helps you test your in-app surveys. You can create and test user actions, create and
-            update user attributes, etc.
-          </p>
-        </div>
-        <button
-          className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
-          onClick={() => setDarkMode(!darkMode)}>
-          Toggle Dark Mode
-        </button>
-      </div>
-
-      <div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
-        <div>
-          <div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
-            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">1. Setup .env</h3>
-            <p className="text-slate-700 dark:text-slate-300">
-              Copy the environment ID of your Formbricks app to the env variable in demo/.env
-            </p>
-            <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
-
-            <div className="mt-4 flex-col items-start text-sm text-slate-700 dark:text-slate-300 sm:flex sm:items-center sm:text-base">
-              <p className="mb-1 sm:mb-0 sm:mr-2">You&apos;re connected with env:</p>
-              <div className="flex items-center">
-                <strong className="w-32 truncate sm:w-auto">
-                  {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}
-                </strong>
-                <span className="relative ml-2 flex h-3 w-3">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
-                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
-                </span>
-              </div>
-            </div>
-          </div>
-          <div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
-            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">2. Widget Logs</h3>
-            <p className="text-slate-700 dark:text-slate-300">
-              Look at the logs to understand how the widget works.{" "}
-              <strong className="dark:text-white">Open your browser console</strong> to see the logs.
-            </p>
-            {/* <div className="max-h-[40vh] overflow-y-auto py-4">
-              <LogsContainer />
-            </div> */}
-          </div>
-        </div>
-
-        <div className="md:grid md:grid-cols-3">
-          <div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-gray-600 dark:bg-gray-800">
-            <h3 className="text-lg font-semibold dark:text-white">
-              Reset person / pull data from Formbricks app
-            </h3>
-            <p className="text-slate-700 dark:text-gray-300">
-              On formbricks.reset() a few things happen: <strong>New person is created</strong> and{" "}
-              <strong>surveys & no-code actions are pulled from Formbricks:</strong>.
-            </p>
-            <button
-              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-              onClick={() => {
-                formbricks.reset();
-              }}>
-              Reset
-            </button>
-            <p className="text-xs text-slate-700 dark:text-gray-300">
-              If you made a change in Formbricks app and it does not seem to work, hit &apos;Reset&apos; and
-              try again.
-            </p>
-          </div>
-          <div className="p-6">
-            <div>
-              <button
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("Inner Text");
-                }}>
-                Inner Text
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">Inner Text only</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                id="css-id"
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("Inner Text + CSS ID");
-                }}>
-                Inner Text
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">Inner Text + Css ID</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                className="css-class mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("Inner Text + CSS Class");
-                }}>
-                Inner Text
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">Inner Text + CSS Class</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                id="css-id"
-                className="css-class mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("ID + Class");
-                }}>
-                ID and Class
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">ID + Class</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                id="css-id"
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("ID + Class");
-                }}>
-                ID only
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">ID only</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                className="css-class mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("Class only");
-                }}>
-                Class only
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">Class only</p>
-            </div>
-          </div>
-
-          <div className="p-6">
-            <div>
-              <button
-                className="css-1 css-2 mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
-                onClick={() => {
-                  console.log("Class + Class");
-                }}>
-                Class + Class
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-slate-700 dark:text-gray-300">Class + Class</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/demo/styles/globals.css

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Public Client API Guide: Manage Survey Displays & Responses",
   description:
     "Dive deep into Formbricks' Public Client API designed for customisation. This comprehensive guide provides detailed instructions on how to mark surveys as displayed as well as responded for individual persons, ensuring seamless client-side interactions without compromising data security.",

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

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Formbricks API Overview: Public Client & Management API Breakdown",
   description:
     "Get a detailed understanding of Formbricks' dual API offerings: the unauthenticated Public Client API optimized for client-side tasks and the secured Management API for advanced account operations. Choose the perfect fit for your integration needs and ensure robust data handling",

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

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly",
   description:
     "Unlock the full potential of Formbricks' Responses API. From fetching to updating survey responses, our comprehensive guide helps you integrate and manage survey data efficiently without compromising security. Ideal for client-side interactions.",

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly",
   description:
     "Unlock the full potential of Formbricks' Responses API. From fetching to updating survey responses, our comprehensive guide helps you integrate and manage survey data efficiently without compromising security. Ideal for client-side interactions.",

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

@@ -1,6 +1,6 @@
 import { Fence } from "@/components/shared/Fence";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Surveys API Documentation - How to Retrieve All Surveys",
   description:
     "Explore the comprehensive guide to the Formbricks Surveys API. Learn how to effectively retrieve all the surveys in your environment with the necessary headers and API key setup. Includes sample request and response formats.",
@@ -412,7 +412,7 @@ This set of API can be used to
     <CodeGroup title="Request" tag="POST" label="/api/v1/management/surveys">
 
     ```bash {{ title: 'cURL' }}
-    curl -X DELETE \
+    curl -X POST \
     'https://app.formbricks.com/api/v1/management/surveys' \
     --header \
     'x-api-key: <your-api-key>'

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

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

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

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Guide for Setting Custom Attributes | Formbricks Documentation",
   description:
     "Learn how to set attributes in code using setAttribute function. Enhance user segmentation, target surveys effectively, and gather valuable insights for better decisions. Easily send user-specific details for better survey segmentation and gain deeper insights.",

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

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

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

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

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

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

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

@@ -10,7 +10,7 @@ import SwitchToDev from "./switch-to-dev.webp";
 import WhenToAsk from "./when-to-ask.webp";
 import CopyIds from "./copy-ids.webp";
 
-export const meta = {
+export const metadata = {
   title:
     "Integrate Docs Feedback in Your Website: A Step-by-Step Guide on getting feedback on your Documentation with Formbricks",
   description:
@@ -74,7 +74,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 5. In the same way, you can change the Internal Question ID of the _Please elaborate_ question to **“additionalFeedback”** and the one of the _Page URL_ question to **“pageUrl”**.
 
 <Note>
-  ## Answers need to be identical If you want different answers than “Yes 👍” and “No 👎” you need update the
+  ## Answers need to be identical If you want different answers than “Yes 👍” and “No 👎” you need to update the
   choices accordingly. They have to be identical to the frontend we're building in the next step.
 </Note>
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import GitpodNewWorkspace from "./gitpod-new-workspace.webp";
 import GitpodPreparing from "./gitpod-preparing.webp";
 import GitpodRunning from "./gitpod-running.webp";
 
-export const meta = {
+export const metadata = {
   title: "Gitpod Setup",
   description:
     "With one click, you can setup the Formbricks developer environment in your browser using Gitpod",
@@ -35,7 +35,7 @@ export const meta = {
         3. Installing Docker images by extracting them from the `packages/database/docker-compose.yml` file.
         4. Building the @formbricks/js component.
      - When the workspace starts:
-        1. Waiting for web and demo apps to start and openening the `apps/demo/.env` file automatically such that users can start playing around with the demo app by configuring `NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID` straight away!
+        1. Wait for the web and demo apps to launch on Gitpod. This automatically opens the `apps/demo/.env` file. Utilize dynamic localhost URLs (e.g., `localhost:3000` for signup and `localhost:8025` for email confirmation) to configure `NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID`. After creating your account and finding the `ID` in the URL at `localhost:3000`, replace `YOUR_ENVIRONMENT_ID` in the `.env` file located in `app/demo`. 
 
     **Web Component Initialization:** 
      - we initialize the @formbricks/web component during prebuilds. This involves:
@@ -74,7 +74,7 @@ After clicking the one-click setup button, Gitpod will open a new tab or window.
 - This is the Gitpod Authentication Page. It appears when you click the "Open in GitPod" button and Gitpod needs to authenticate your access to the workspace. Click on 'Continue With Github' to authorize your GitPod session.
 
 ### 3. Creating a New Workspace
-<Image src={GitpodNewWorkspace} alt="Gitpod New Worskpace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+<Image src={GitpodNewWorkspace} alt="Gitpod New workspace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 - After authentication, Gitpod asks to create a new workspace for you. This page displays the configurations of your workspace. 
 - You can use either choose either VS Code Browser or  VS Code Desktop editor with the 'Standard Class' for your workspace class.
 - If you opt for the VS Code Desktop, follow the following steps
@@ -83,7 +83,7 @@ After clicking the one-click setup button, Gitpod will open a new tab or window.
 
 
 ### 4. Gitpod preparing the created Workspace
-<Image src={GitpodPreparing} alt="Gitpod Preparing Worskpace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+<Image src={GitpodPreparing} alt="Gitpod Preparing workspace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 - Gitpod is preparing your workspace with all the necessary dependencies and configurations. You will see this page while Gitpod sets up your development environment.
 
 ### 5. Gitpod running the Workspace

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

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

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

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

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

@@ -1,6 +1,7 @@
-export const meta = {
+export const metadata = {
   title: "Formbricks Development Setup: Complete Guide to Local Environment Configuration for Dev",
-  description: "Step-by-step guide to setting up your local development environment for Formbricks. Includes installing essential tools like Node.JS, pnpm, and Docker, and accessing the entire Formbricks stack including the Demo app and the main website",
+  description:
+    "Step-by-step guide to setting up your local development environment for Formbricks. Includes installing essential tools like Node.JS, pnpm, and Docker, and accessing the entire Formbricks stack including the Demo app and the main website",
 };
 
 #### Contributing
@@ -14,6 +15,7 @@ To get the project running locally on your machine you need to have the followin
 - [Docker](https://www.docker.com/) (to run PostgreSQL / MailHog)
 
 1. Clone the project:
+
 <Col>
    <CodeGroup title="Git clone Formbricks monorepo">
 
@@ -33,7 +35,9 @@ To get the project running locally on your machine you need to have the followin
 
    </CodeGroup>
 </Col>
+
 1. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
+
 <Col>
    <CodeGroup title="Install dependencies via pnpm">
 
@@ -43,7 +47,9 @@ To get the project running locally on your machine you need to have the followin
 
    </CodeGroup>
 </Col>
+
 1. Create a `.env` file based on `.env.example`. It's already preset to work with the docker-compose setup but you can also change values if needed.
+
 <Col>
    <CodeGroup title="Define environment variables">
 
@@ -53,18 +59,21 @@ To get the project running locally on your machine you need to have the followin
 
    </CodeGroup>
 </Col>
+
 1. Generate a secret value mandatory to be set for the key ENCRYPTION_KEY in the .env file. You can use the following command to generate the random string of required length:
+
 <Col>
    <CodeGroup title="Set value of ENCRYPTION_KEY">
 
    ```bash
-   openssl rand -base64 24
+   openssl rand -hex 32
    ```
 
    </CodeGroup>
 </Col>
 
 1. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the formbricks dev setup:
+
 <Col>
    <CodeGroup title="Start Formbricks Dev Setup">
 
@@ -81,11 +90,14 @@ To get the project running locally on your machine you need to have the followin
 
    **You can now access the Formbricks app on [http://localhost:3000](http://localhost:3000)**. You will be automatically redirected to the login. To use your local installation of formbricks, create a new account.
 
+   <Note>A fresh setup does not have a default account. Please create a new account and proceed accordingly.</Note>
+
    For viewing the confirmation email and other emails the system sends you, you can access mailhog at [http://localhost:8025](http://localhost:8025)
 
 ### Build
 
 To build all apps and packages and check for build errors, run the following command:
+
 <Col>
 <CodeGroup title="Build Formbricks stack">
 
@@ -98,6 +110,7 @@ pnpm build
 ### Access Demo app
 
 To run the [Demo app](/docs/contributing/demo), run the following command in a separate terminal window:
+
 <Col>
 <CodeGroup title="Start Formbricks Demo App">
 
@@ -112,6 +125,7 @@ You can now access the Demo app on [http://localhost:3002](http://localhost:3002
 ### Access Formbricks website
 
 If you want to make changes to the Formbricks website, e.g. to update the documentation, run the following command in a separate terminal window:
+
 <Col>
 <CodeGroup title="Start Formbricks Website">
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -9,7 +9,7 @@ import ListLinkedSurveys from "./list-linked-surveys.webp";
 import DeleteConnection from "./delete-connection.webp";
 import Image from "next/image";
 
-export const meta = {
+export const metadata = {
   title: "n8n Setup",
   description: "Wire up Formbricks with n8n and 350+ other apps",
 };

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

@@ -14,7 +14,7 @@ import SelectFields from "./select-fields.webp";
 import Result from "./result.webp";
 import SelectAction from "./select-action.webp";
 
-export const meta = {
+export const metadata = {
   title: "Formbricks Integration with Make.com: A Step-by-Step Guide",
   description: "Discover how to seamlessly integrate Formbricks with Make.com. Dive into our comprehensive guide to set up scenarios, connect with a plethora of apps, and send your survey data to more than 1000 platforms.",
 };

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

@@ -18,7 +18,7 @@ import SubmitTestResponse from "./submit-test-response.png";
 import SuccessConnection from "./success-connection.png";
 import UpdateQuestionId from "./update-question-id.png";
 
-export const meta = {
+export const metadata = {
   title: "Comprehensive Guide to Integrating Formbricks with n8n",
   description: "Unlock the potential of combining Formbricks with n8n for a streamlined workflow experience. Dive into our step-by-step guide and send your survey data effortlessly to 350+ applications. Streamline your data processes now!",
 };

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

@@ -14,7 +14,7 @@ import TestSubmission from "./test-submission.webp";
 import UpdateQuestionId from "./update-question-id.webp";
 import ZapierMessage from "./zapier-message.webp";
 
-export const meta = {
+export const metadata = {
   title: "Step-by-Step Guide to Integrating Formbricks with Zapier",
   description: "Master the integration of Formbricks with Zapier using our detailed guide. Seamlessly connect your surveys to 5000+ apps, automate data transfers, and enhance feedback management. Start optimizing your workflow today.",
 };

apps/formbricks-com/app/docs/introduction/how-it-works/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Inside Look: Formbricks In-Product Micro-Surveys",
   description:
     "Unlock the full potential of Formbricks: From intuitive form-building and event-based triggers to effortless integrations and deep analytics. Master the art of in-product surveys for your SaaS or digital platform.",

apps/formbricks-com/app/docs/introduction/why-is-it-better/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Formbricks vs. Generic Survey Tools: A Comparative Insight",
   description:
     "Discover how Formbricks excels as a specialized in-product micro-survey platform for SaaS. Get unmatched targeting, seamless integrations, and make informed decisions with our open-source advantage.",

apps/formbricks-com/app/docs/layout.tsx

@@ -8,7 +8,7 @@ import { type Metadata } from "next";
 
 export const metadata: Metadata = {
   title: {
-    template: "Formbricks – Open Source Experience Management",
+    template: "%s - Formbricks Docs",
     default: "Formbricks Docs",
   },
 };

apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 import QuestionId from "./question-id.webp";
 
-export const meta = {
+export const metadata = {
   title: "URL Data Prefilling for Link Surveys in Formbricks",
   description: "Master the art of data prefilling in Formbricks link surveys. Dive into our guide on how to use URL parameters to prepopulate answers, boosting conversion rates and enhancing user experience. Learn through examples and ensure correct validation for each question type.",
 };

apps/formbricks-com/app/docs/link-surveys/single-use-links/page.mdx

@@ -6,7 +6,7 @@ import Settings from "./single-use-setting.webp";
 import Message from "./used-message.webp";
 import Metadata from "./metadata.webp";
 
-export const meta = {
+export const metadata = {
   title: "Single Use Links",
   description: "Make sure that each respondent only replies once with single use links.",
 };
@@ -59,7 +59,7 @@ You can encrypt single use URLs to assure information to be protected. To enable
 
 ## Check suId of a submission
 
-You can find the suId of each submission in the submission meta data. To view it, simplte hover over the Avatar:
+You can find the suId of each submission in the submission meta data. To view it, simple hover over the Avatar:
 
 <Image
   src={Metadata}

apps/formbricks-com/app/docs/link-surveys/user-identification/page.mdx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 import PeopleView from "./people-view.webp";
 
-export const meta = {
+export const metadata = {
   title: "Effective User Identification in Formbricks Link Surveys",
   description:
     "Discover how to seamlessly connect responses from Formbricks link surveys to existing users in your database. Learn the intricacies of the userId URL parameter to enhance user tracking, profiling, and segmentation, ensuring more personalized interactions and data-driven decisions.",

apps/formbricks-com/app/docs/self-hosting/deployment/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Comprehensive Guide to Self-Hosting Formbricks",
   description:
     "Discover versatile options to deploy Formbricks tailored to your expertise level. From Ubuntu setups using shell scripts, swift Docker deployments, to manual source configurations, harness the flexibility and power of Formbricks to fit your unique hosting needs. Dive in today!",
@@ -8,14 +8,14 @@ export const meta = {
 
 # Self Hosting Formbricks
 
-At Formbricks, we understand that different users have different needs, and we strive to cater to a wide variety of situations. This is why we currently provide three ways of running our application:
+At Formbricks, we understand that different users have different needs, and we strive to cater to a wide variety of situations. This is why we currently provide two ways of running our application:
 
 1. **Production Instance Setup with Shell Script on Ubuntu**: If you want to quickly set up a production instance of Formbricks on a server running Ubuntu, we've got you covered! This method utilizes a convenient shell script that takes care of everything, including Docker, Postgres DB, and SSL certificate configuration. The shell script will automatically install all the required dependencies and configure your server, making the process a breeze. Visit the [Production Instance Setup with a Bash Script Documentation](/docs/self-hosting/production).
 
 2. **Fast Setup with a Pre-built Docker Image:** This method is designed for those who want to quickly set up and start using Formbricks without getting into the technicalities of Docker or the build process. When you choose this method, you're using an image that we've already built for you. The pre-built image is ready-to-run, and it only requires minimal configuration on your part. This approach is perfect for getting a functional instance of Formbricks up and running with minimal hassle. It's as easy as downloading the Docker image and firing up the container. Visit the [Docker Setup Documentation](/docs/self-hosting/docker).
 
-3. **Manual Setup by Building the Docker Image from Source:** This approach provides the flexibility to configure every aspect of your Formbricks instance, including environment variables that need to be set at build time. While we don't recommend changing the source code of Formbricks, this method allows you to set your own configuration that might be necessary for specific deployment needs. Keep in mind that this method requires a more in-depth understanding of Docker and the build process. However, the trade-off is the additional control and flexibility you gain, making it worth considering if you're a more advanced user or have very specific configuration needs. Visit the [Advanced Setup from Source Documentation](/docs/self-hosting/from-source).
-
 Please note that regardless of the method you choose, Formbricks is designed to be easy-to-use and flexible. So choose the method that best fits your comfort level and requirements, and start leveraging the **power of Formbricks** today!
 
+<Note>Running Formbricks requires at least **1 vCPU**, **2 GBs of RAM**, **8 GBs of SSD**</Note>
+
 Looking for something not mentioned here? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/formbricks-com/app/docs/self-hosting/docker/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Guide to Deploying Formbricks Using Docker",
   description:
     "Step-by-step tutorial on how to effortlessly set up and run Formbricks via Docker. Explore the quick deployment process with Docker-Compose, learn how to update Formbricks, and troubleshoot common issues. Ideal for those looking for a hassle-free Formbricks experience",
@@ -21,98 +21,131 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
   Docker documentation.
 </Note>
 
-1. **Create a New Directory for Formbricks**
+1.  **Create a New Directory for Formbricks**
+
+Open a terminal and create a new directory for Formbricks, then navigate into this new directory:
 
-   Open a terminal and create a new directory for Formbricks, then navigate into this new directory:
 <Col>
    <CodeGroup title="Create and cd into the new directory">
 
-   ```bash
-   mkdir formbricks-quickstart && cd formbricks-quickstart
-   ```
+    ```bash
+    mkdir formbricks-quickstart && cd formbricks-quickstart
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
-2. **Download the Docker-Compose File**
 
-   Download the docker-compose file directly from the Formbricks repository:
+2.  **Download the Docker-Compose File**
+
+Download the docker-compose file directly from the Formbricks repository:
+
 <Col>
    <CodeGroup title="Download docker compose file">
 
-   ```bash
-   curl -o docker-compose.yml https://raw.githubusercontent.com/formbricks/formbricks/main/docker/docker-compose.yml
-   ```
+    ```bash
+    curl -o docker-compose.yml https://raw.githubusercontent.com/formbricks/formbricks/main/docker/docker-compose.yml
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
-3. **Generate NextAuth Secret**
 
-   Next, you need to generate a NextAuth secret. This will be used for session signing and encryption. The `sed` command below generates a random string using `openssl`, then replaces the `NEXTAUTH_SECRET:` placeholder in the `docker-compose.yml` file with this generated secret:
+3.  **Generate NextAuth Secret**
+
+Next, you need to generate a NextAuth secret. This will be used for session signing and encryption. The `sed` command below generates a random string using `openssl`, then replaces the `NEXTAUTH_SECRET:` placeholder in the `docker-compose.yml` file with this generated secret:
+
 <Col>
    <CodeGroup title="Generate NextAuth Secret">
 
-   ```bash
-   sed -i "/NEXTAUTH_SECRET:$/s/NEXTAUTH_SECRET:.*/NEXTAUTH_SECRET: $(openssl rand -base64 32 | tr -dc 'a-zA-Z0-9' | head -c 32)/" docker-compose.yml
-   ```
+    ```bash
+    sed -i "/NEXTAUTH_SECRET:$/s/NEXTAUTH_SECRET:.*/NEXTAUTH_SECRET: $(openssl rand -hex 32)/" docker-compose.yml
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
-4. **Start the Docker Setup**
 
-   You're now ready to start the Formbricks Docker setup. The following command will start Formbricks together with a postgreSQL database using Docker Compose:
+4.  **Generate Encryption Key**
+
+Next, you need to generate an Encryption Key. This will be used for authenticating and verifying 2 Factor Authentication. The `sed` command below generates a random string using `openssl`, then replaces the `ENCRYPTION_KEY:` placeholder in the `docker-compose.yml` file with this generated secret:
+
+<Col>
+   <CodeGroup title="Generate Encryption Key">
+
+    ```bash
+    sed -i "/ENCRYPTION_KEY:$/s/ENCRYPTION_KEY:.*/ENCRYPTION_KEY: $(openssl rand -hex 32)/" docker-compose.yml
+    ```
+
+    </CodeGroup>
+
+</Col>
+
+5.  **Start the Docker Setup**
+
+You're now ready to start the Formbricks Docker setup. The following command will start Formbricks together with a postgreSQL database using Docker Compose:
 
-   We pass the `--env-file /dev/null` flag to docker-compose to prevent it from reading the .env file. This is because we're using environment variables directly in the docker-compose.yml file as the env file is currently in a format not well recognised by docker systems.
 <Col>
    <CodeGroup title="Launch Docker Instance">
 
-   ```bash
-    docker compose --env-file /dev/null up -d
-   ```
+```bash
+ docker compose up -d
+```
 
    </CodeGroup>
 </Col>
    The `-d` flag will run the containers in detached mode, meaning they'll run in the background.
 
-5. **Visit Formbricks in Your Browser**
+6. **Visit Formbricks in Your Browser**
 
    After starting the Docker setup, visit http://localhost:3000 in your browser to interact with the Formbricks application. The first time you access this page, you'll be greeted by a setup wizard. Follow the prompts to define your first user and get started.
 
 ## Updating Formbricks
 
-1. Stop the Formbricks stack
+1.  Stop the Formbricks stack
+
 <Col>
    <CodeGroup title="Stop the docker instance">
 
-   ```bash
-   docker compose down
-   ```
+    ```bash
+    docker compose down
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
-2. Pull the latest changes
+
+2.  Pull the latest changes
+
 <Col>
    <CodeGroup title="Pull the changes into docker">
 
-   ```bash
-   docker compose pull
-   ```
+    ```bash
+    docker compose pull
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
-3. Update env vars as necessary in the docker-compose file.
-4. Re-start the Formbricks stack
+
+3.  Update env vars as necessary in the docker-compose file.
+4.  Re-start the Formbricks stack
+
 <Col>
    <CodeGroup title="Relaunch the Docker Instance">
 
-   ```bash
-   docker compose --env-file /dev/null up -d
-   ```
+    ```bash
+    docker compose up -d
+    ```
+
+    </CodeGroup>
 
-   </CodeGroup>
 </Col>
+
 ## Debugging
 
 If you encounter any issues, you can check the logs of the container with:
+
 <Col>
 <CodeGroup title="Look into docker logs">
 
@@ -170,9 +203,65 @@ You can close the logs again with `CTRL + C`.
 <Note>
 ## Customizing the Build Time variables
 
-To edit any of the variables that start with `NEXT_PUBLIC_`, you need to rebuild the Formbricks Docker from source! It is just one
-more added step and is not as much of a hassle as you think! Please check the [Building from Source](/docs/self-hosting/from-source) section!
+To edit any of the variables that start with `NEXT_PUBLIC_`, you need to rebuild the Formbricks Docker Image!
 
 </Note>
 
+## Important Run-time Variables
+
+These variables can be provided at the runtime i.e. in your docker-compose file.
+
+| Variable                    | Description                                                                             | Required                                                | Default                                                                 |
+| --------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------- |
+| WEBAPP_URL                  | Base URL of the site.                                                                   | required                                                | `http://localhost:3000`                                                 |
+| DATABASE_URL                | Database URL with credentials.                                                          | required                                                | `postgresql://postgres:postgres@postgres:5432/formbricks?schema=public` |
+| NEXTAUTH_SECRET             | Secret for NextAuth, used for session signing and encryption.                           | required                                                | (Generated by the user)                                                 |
+| NEXTAUTH_URL                | Location of the auth server. By default, this is the Formbricks docker instance itself. | required                                                | `http://localhost:3000`                                                 |
+| PRIVACY_URL                 | URL for privacy policy.                                                                 | optional                                                |                                                                         |
+| TERMS_URL                   | URL for terms of service.                                                               | optional                                                |                                                                         |
+| IMPRINT_URL                 | URL for imprint.                                                                        | optional                                                |                                                                         |
+| SIGNUP_DISABLED             | Disables the ability for new users to create an account if set to `1`.                  | optional                                                |                                                                         |
+| PASSWORD_RESET_DISABLED     | Disables password reset functionality if set to `1`.                                    | optional                                                |                                                                         |
+| EMAIL_VERIFICATION_DISABLED | Disables email verification if set to `1`.                                              | optional                                                |                                                                         |
+| INVITE_DISABLED             | Disables the ability for invited users to create an account if set to `1`.              | optional                                                |                                                                         |
+| MAIL_FROM                   | Email address to send emails from.                                                      | optional (required if email services are to be enabled) |                                                                         |
+| SMTP_HOST                   | Host URL of your SMTP server.                                                           | optional (required if email services are to be enabled) |                                                                         |
+| SMTP_PORT                   | Host Port of your SMTP server.                                                          | optional (required if email services are to be enabled) |                                                                         |
+| SMTP_USER                   | Username for your SMTP Server.                                                          | optional (required if email services are to be enabled) |                                                                         |
+| SMTP_PASSWORD               | Password for your SMTP Server.                                                          | optional (required if email services are to be enabled) |                                                                         |
+| SMTP_SECURE_ENABLED         | SMTP secure connection. For using TLS, set to `1` else to `0`.                          | optional (required if email services are to be enabled) |                                                                         |
+| GITHUB_AUTH_ENABLED         | Enables GitHub login if set to `1`.                                                     | optional                                                |                                                                         |
+| GOOGLE_AUTH_ENABLED         | Enables Google login if set to `1`.                                                     | optional                                                |                                                                         |
+| GITHUB_ID                   | Client ID for GitHub.                                                                   | optional (required if GitHub auth is enabled)           |                                                                         |
+| GITHUB_SECRET               | Secret for GitHub.                                                                      | optional (required if GitHub auth is enabled)           |                                                                         |
+| GOOGLE_CLIENT_ID            | Client ID for Google.                                                                   | optional (required if Google auth is enabled)           |                                                                         |
+| GOOGLE_CLIENT_SECRET        | Secret for Google.                                                                      | optional (required if Google auth is enabled)           |                                                                         |
+| CRON_SECRET                 | API Secret for running cron jobs.                                                       | optional                                                |                                                                         |
+| STRIPE_SECRET_KEY           | Secret key for Stripe integration.                                                      | optional                                                |                                                                         |
+| STRIPE_WEBHOOK_SECRET       | Webhook secret for Stripe integration.                                                  | optional                                                |                                                                         |
+| TELEMETRY_DISABLED          | Disables telemetry if set to `1`.                                                       | optional                                                |                                                                         |
+| INSTANCE_ID                 | Instance ID for Formbricks Cloud to be sent to Telemetry.                               | optional                                                |                                                                         |
+| INTERNAL_SECRET             | Internal Secret (Currently we overwrite the value with a random value).                 | optional                                                |                                                                         |
+| IS_FORMBRICKS_CLOUD         | Uses Formbricks Cloud if set to `1`                                                     | optional                                                |                                                                         |
+| DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).              | optional                                                | `#64748b`                                                               |
+
+## Build-time Variables
+
+These variables must be provided at the time of the docker build and would require rebuilding the image.
+
+| Variable                                           | Description                                                     | Required | Default |
+| -------------------------------------------------- | --------------------------------------------------------------- | -------- | ------- |
+| NEXT_PUBLIC_FORMBRICKS_API_HOST                    | Host for the Formbricks API.                                    | optional |         |
+| NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID              | If you already have a preset environment ID of the environment. | optional |         |
+| NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID        | If you already have an onboarding survey ID to show new users.  | optional |         |
+| NEXT_PUBLIC_POSTHOG_API_KEY                        | API key for PostHog analytics.                                  | optional |         |
+| NEXT_PUBLIC_POSTHOG_API_HOST                       | Host for PostHog analytics.                                     | optional |         |
+| NEXT_PUBLIC_SENTRY_DSN                             | DSN for Sentry error tracking.                                  | optional |         |
+| NEXT_PUBLIC_DOCSEARCH_APP_ID                       | ID of the DocSearch application.                                | optional |         |
+| NEXT_PUBLIC_DOCSEARCH_API_KEY                      | API key of the DocSearch application.                           | optional |         |
+| NEXT_PUBLIC_DOCSEARCH_INDEX_NAME                   | Name of the DocSearch index.                                    | optional |         |
+| NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID          | Environment ID for Formbricks (if you already have one)         | optional |         |
+| NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID | Survey ID for the feedback survey on the docs site.             | optional |         |
+| NEXT_PUBLIC_FORMBRICKS_COM_API_HOST                | Host for the Formbricks API.                                    | optional |         |
+
 Still facing issues? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/formbricks-com/app/docs/self-hosting/external-auth-providers/page.mdx

@@ -0,0 +1,66 @@
+export const metadata = {
+  title: "External auth providers",
+  description:
+    "Set up and integrate multiple external authentication providers with Formbricks. Our step-by-step guide covers Google OAuth and more, ensuring a seamless login experience for your users.",
+};
+
+## Google OAuth Authentication
+
+Integrating Google OAuth with your Formbricks instance allows users to log in using their Google credentials, ensuring a secure and streamlined user experience. This guide will walk you through the process of setting up Google OAuth for your Formbricks instance.
+
+### Requirements
+
+- A Google Cloud Platform (GCP) account.
+- A Formbricks instance running and accessible.
+
+### Steps
+
+1. **Create a GCP Project**:
+
+   - Navigate to the [GCP Console](https://console.cloud.google.com/).
+   - From the projects list, select a project or create a new one.
+
+2. **Setting up OAuth 2.0**:
+
+   - If the **APIs & services** page isn't already open, open the console left side menu and select **APIs & services**.
+   - On the left, click **Credentials**.
+   - Click **Create Credentials**, then select **OAuth client ID**.
+
+3. **Configure OAuth Consent Screen**:
+
+   - If this is your first time creating a client ID, configure your consent screen by clicking **Consent Screen**.
+   - Fill in the necessary details and under **Authorized domains**, add the domain where your Formbricks instance is hosted.
+
+4. **Create OAuth 2.0 Client IDs**:
+   - Select the application type **Web application** for your project and enter any additional information required.
+   - Ensure to specify authorized JavaScript origins and authorized redirect URIs.
+
+```
+Authorized JavaScript origins: {WEBAPP_URL}
+Authorized redirect URIs: {WEBAPP_URL}/api/auth/callback/google
+```
+
+5. **Update Environment Variables in Docker**:
+   - To integrate the Google OAuth, you have two options: either update the environment variables in the docker-compose file or directly add them to the running container.
+   - In your Docker setup directory, open the `.env` file, and add or update the following lines with the `Client ID` and `Client Secret` obtained from Google Cloud Platform:
+   - Alternatively, you can add the environment variables directly to the running container using the following commands (replace `container_id` with your actual Docker container ID):
+
+```
+docker exec -it container_id /bin/bash
+export GOOGLE_AUTH_ENABLED=1
+export GOOGLE_CLIENT_ID=your-client-id-here
+export GOOGLE_CLIENT_SECRET=your-client-secret-here
+exit
+```
+
+```
+GOOGLE_AUTH_ENABLED=1
+GOOGLE_CLIENT_ID=your-client-id-here
+GOOGLE_CLIENT_SECRET=your-client-secret-here
+```
+
+6. **Restart Your Formbricks Instance**:
+   - **Note:** Restarting your Docker containers may cause a brief period of downtime. Plan accordingly.
+   - Once the environment variables have been updated, it's crucial to restart your Docker containers to apply the changes. This ensures that your Formbricks instance can utilize the new Google OAuth configuration for user authentication. Here's how you can do it:
+   - Navigate to your Docker setup directory where your `docker-compose.yml` file is located.
+   - Run the following command to bring down your current Docker containers and then bring them back up with the updated environment configuration:

apps/formbricks-com/app/docs/self-hosting/from-source/page.mdx

@@ -1,139 +0,0 @@
-export const meta = {
-  title: "Formbricks Self-Hosting Guide: Deploy from Source Code for Complete Customization",
-  description:
-    "Build the Formbricks Image right from the open-sourced codebase and make changes however needed. Deploy it then with the freedom of customizing even the compile-time environment variables. Gain more control and flexibility by customizing compile-time environment variables and configuring your instance. Dive into our comprehensive guide for building and running Formbricks with Docker.",
-};
-
-#### Self-Hosting
-
-# Building and Running Formbricks from Source
-
-This approach provides the flexibility to configure every aspect of your Formbricks instance, including environment variables that need to be set at build time. While we don't recommend changing the source code of Formbricks, this method allows you to set your own configuration that might be necessary for specific deployment needs. Keep in mind that this method requires a more in-depth understanding of Docker and the build process. However, the trade-off is the additional control and flexibility you gain, making it worth considering if you're a more advanced user or have very specific configuration needs.
-
-### Requirements
-
-Ensure `docker` & `docker compose` are installed on your server/system. Both are typically included with Docker utilities, like Docker Desktop and Rancher Desktop.
-
-<Note>
-  `docker compose` without the hyphen is now the primary method of using docker-compose, according to the
-  Docker documentation.
-</Note>
-
-1.  **Clone the repository**:
-<Col>
-   <CodeGroup title="Clone and cd into the Formbricks directory">
-
-    ```bash
-    git clone https://github.com/formbricks/formbricks.git && cd formbricks
-    ```
-
-   </CodeGroup>
-</Col>
-2.  **Modify the environment variables in your `docker-compose.yml` file as required by your setup.** <br/> This file comes with a basic setup and Formbricks works without making any changes to the file. To enable email sending functionality you need to configure the SMTP settings. If you configured your email credentials, you can also comment the following lines to enable email verification (`# NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED=1`) and password reset (`# NEXT_PUBLIC_PASSWORD_RESET_DISABLED=1`)
-
-        <Note>
-           ## Editing a NEXT_PUBLIC_* variable?
-          Note: All environment variables starting with `NEXT_PUBLIC_` are used at build time. When you change
-          environment variables later, you need to rebuild the image with `docker compose build` for the changes
-          to take effect.
-        </Note>
-
-3. **Generate NextAuth Secret**
-
-   Next, you need to generate a NextAuth secret. This will be used for session signing and encryption. The `sed` command below generates a random string using `openssl`, then replaces the `NEXTAUTH_SECRET:` placeholder in the `docker-compose.yml` file with this generated secret:
-<Col>
-   <CodeGroup title="Generate NextAuth Secret">
-
-   ```bash
-   sed -i "/x-nextauth-secret: &nextauth_secret/s/RANDOM_STRING/$(openssl rand -base64 32 | tr -dc 'a-zA-Z0-9' | head -c 32)/" docker-compose.yml
-   ```
-
-   </CodeGroup>
-</Col>
-4.  **Start the docker compose process.** <br/> Finally start the docker compose process to build and spin up the Formbricks container as well as the PostgreSQL database. <br/> _Use docker-compose if you are on an older docker version_
-
-   We pass the `--env-file /dev/null` flag to docker-compose to prevent it from reading the .env file. This is because we're using environment variables directly in the docker-compose.yml file as the env file is currently in a format not well recognised by docker systems.
-<Col>
-   <CodeGroup title="Launch docker instances">
-
-    ```bash
-    docker compose --env-file /dev/null up
-    ```
-
-    </CodeGroup>
-</Col>
-    You can now access the app on [http://localhost:3000](http://localhost:3000). You will be automatically redirected to the login. To use your local installation of Formbricks, create a new account.
-
-## Important Run-time Variables
-
-These variables must also be provided at runtime.
-
-| Variable                    | Description                                                                                  | Required                                                | Default                                                                 |
-| --------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------- |
-| WEBAPP_URL                  | Base URL of the site.                                                                        | required                                                | `http://localhost:3000`                                                 |
-| SURVEY_BASE_URL             | Base URL of the link surveys.                                                                | required                                                | `http://localhost:3000/s/`                                              |
-| DATABASE_URL                | Database URL with credentials.                                                               | required                                                | `postgresql://postgres:postgres@postgres:5432/formbricks?schema=public` |
-| NEXTAUTH_SECRET             | Secret for NextAuth, used for session signing and encryption.                                | required                                                | (Generated by the user)                                                 |
-| NEXTAUTH_URL                | Location of the auth server. By default, this is the Formbricks docker instance itself.      | required                                                | `http://localhost:3000`                                                 |
-| PRIVACY_URL                 | URL for privacy policy.                                                                      | optional                                                |                                                                         |
-| TERMS_URL                   | URL for terms of service.                                                                    | optional                                                |                                                                         |
-| IMPRINT_URL                 | URL for imprint.                                                                             | optional                                                |                                                                         |
-| SIGNUP_DISABLED             | Disables the ability for new users to create an account if set to `1`.                       | optional                                                |                                                                         |
-| PASSWORD_RESET_DISABLED     | Disables password reset functionality if set to `1`.                                         | optional                                                |                                                                         |
-| EMAIL_VERIFICATION_DISABLED | Disables email verification if set to `1`.                                                   | optional                                                |                                                                         |
-| INVITE_DISABLED             | Disables the ability for invited users to create an account if set to `1`.                   | optional                                                |                                                                         |
-| MAIL_FROM                   | Email address to send emails from.                                                           | optional (required if email services are to be enabled) |                                                                         |
-| SMTP_HOST                   | Host URL of your SMTP server.                                                                | optional (required if email services are to be enabled) |                                                                         |
-| SMTP_PORT                   | Host Port of your SMTP server.                                                               | optional (required if email services are to be enabled) |                                                                         |
-| SMTP_USER                   | Username for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                                                                         |
-| SMTP_PASSWORD               | Password for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                                                                         |
-| SMTP_SECURE_ENABLED         | SMTP secure connection. For using TLS, set to `1` else to `0`.                               | optional (required if email services are to be enabled) |                                                                         |
-| GITHUB_AUTH_ENABLED         | Enables GitHub login if set to `1`.                                                          | optional                                                |                                                                         |
-| GOOGLE_AUTH_ENABLED         | Enables Google login if set to `1`.                                                          | optional                                                |                                                                         |
-| GITHUB_ID                   | Client ID for GitHub.                                                                        | optional (required if GitHub auth is enabled)           |                                                                         |
-| GITHUB_SECRET               | Secret for GitHub.                                                                           | optional (required if GitHub auth is enabled)           |                                                                         |
-| GOOGLE_CLIENT_ID            | Client ID for Google.                                                                        | optional (required if Google auth is enabled)           |                                                                         |
-| GOOGLE_CLIENT_SECRET        | Secret for Google.                                                                           | optional (required if Google auth is enabled)           |                                                                         |
-| CRON_SECRET                 | API Secret for running cron jobs.                                                            | optional                                                |                                                                         |
-| STRIPE_SECRET_KEY           | Secret key for Stripe integration.                                                           | optional                                                |                                                                         |
-| STRIPE_WEBHOOK_SECRET       | Webhook secret for Stripe integration.                                                       | optional                                                |                                                                         |
-| TELEMETRY_DISABLED          | Disables telemetry if set to `1`.                                                            | optional                                                |                                                                         |
-| INSTANCE_ID                 | Instance ID for Formbricks Cloud to be sent to Telemetry.                                    | optional                                                |                                                                         |
-| INTERNAL_SECRET             | Internal Secret (Currently we overwrite the value with a random value).                      | optional                                                |                                                                         |
-| IS_FORMBRICKS_CLOUD         | Uses Formbricks Cloud if set to `1`                                                          | optional                                                |                                                                         |
-| DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).                   | optional                                                | `#64748b`                                                               |
-
-## Build-time Variables
-
-These variables must be provided at the time of the docker build and can be provided by updating the `.env` file.
-
-| Variable                                           | Description                                                     | Required | Default |
-| -------------------------------------------------- | --------------------------------------------------------------- | -------- | ------- |
-| NEXT_PUBLIC_FORMBRICKS_API_HOST                    | Host for the Formbricks API.                                    | optional |         |
-| NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID              | If you already have a preset environment ID of the environment. | optional |         |
-| NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID        | If you already have an onboarding survey ID to show new users.  | optional |         |
-| NEXT_PUBLIC_POSTHOG_API_KEY                        | API key for PostHog analytics.                                  | optional |         |
-| NEXT_PUBLIC_POSTHOG_API_HOST                       | Host for PostHog analytics.                                     | optional |         |
-| NEXT_PUBLIC_SENTRY_DSN                             | DSN for Sentry error tracking.                                  | optional |         |
-| NEXT_PUBLIC_DOCSEARCH_APP_ID                       | ID of the DocSearch application.                                | optional |         |
-| NEXT_PUBLIC_DOCSEARCH_API_KEY                      | API key of the DocSearch application.                           | optional |         |
-| NEXT_PUBLIC_DOCSEARCH_INDEX_NAME                   | Name of the DocSearch index.                                    | optional |         |
-| NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID          | Environment ID for Formbricks (if you already have one)         | optional |         |
-| NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID | Survey ID for the feedback survey on the docs site.             | optional |         |
-| NEXT_PUBLIC_FORMBRICKS_COM_API_HOST                | Host for the Formbricks API.                                    | optional |         |
-
-## Debugging
-
-If you encounter any issues, you can check the logs of the container with:
-<Col>
-<CodeGroup title="Docker container logs">
-
-```bash
-docker compose logs -f
-```
-
-</CodeGroup>
-</Col>
-You can close the logs again with `CTRL + C`.
-
-Still facing issues? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/formbricks-com/app/docs/self-hosting/migration-guide/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Migrating Formbricks to v1.1",
   description:
     "Formbricks v1.1 comes with an amazing set of features including the ability to define most environment variables at runtime itself! No need to build the image again! This guide will help you migrate your existing Formbricks instance to v1.1",
@@ -6,33 +6,53 @@ export const meta = {
 
 #### Self-Hosting
 
-# Migrating to v1.1
+# Migration Guide
+
+## v1.1 -> v1.2
+
+Formbricks v1.2 ships a lot of features targeting our Link Surveys. We have also improved our security posture to be as robust as ever. However, it also comes with a few breaking changes specifically with the environment variables. This guide will help you migrate your existing Formbricks instance to v1.2 without any hassles or build errors.
+
+### New Environment Variables
+
+| Environment Variable | Required | Recommended Generation         | Comments                                                    |
+| -------------------- | -------- | ------------------------------ | ----------------------------------------------------------- |
+| ENCRYPTION_KEY       | true     | `openssl rand -hex 32`         | Needed for 2 Factor Authentication                          |
+| SHORT_URL_BASE       | false    | `<your-short-base-url>`        | Needed if you want to enable shorter links for Link Surveys |
+| ASSET_PREFIX_URL     | false    | `<your-asset-hosted-base-url>` | Needed if you have a separate URL for hosted assets         |
+
+### Deprecated / Removed Environment Variables
+
+| Environment Variable | Comments                                                                  |
+| -------------------- | ------------------------------------------------------------------------- |
+| SURVEY_BASE_URL      | The WEBAPP_URL is now used to determine the survey base url in all places |
+
+## v1.0 -> v1.1
 
 Formbricks v1.1 includes a lot of new features and improvements. However, it also comes with a few breaking changes specifically with the environment variables. This guide will help you migrate your existing Formbricks instance to v1.1 without losing any data.
 
-## Changes in .env
-
 ### Renamed Environment Variables
+
 This was introduced because we got a lot of requests from our users for the ability to define some common environment variables at runtime itself i.e. without having to rebuild the image for the changes to take effect.
-This is now possible with v1.1. However, due to Next.JS best practices, we had to deprecate the prefix **NEXT_PUBLIC_** in the following environment variables:
+This is now possible with v1.1. However, due to Next.JS best practices, we had to deprecate the prefix **NEXT*PUBLIC*** in the following environment variables:
 
 | till v1.0                                   | v1.1                        |
 | ------------------------------------------- | --------------------------- |
-| **NEXT_PUBLIC_**EMAIL_VERIFICATION_DISABLED | EMAIL_VERIFICATION_DISABLED |
-| **NEXT_PUBLIC_**PASSWORD_RESET_DISABLED     | PASSWORD_RESET_DISABLED     |
-| **NEXT_PUBLIC_**SIGNUP_DISABLED             | SIGNUP_DISABLED             |
-| **NEXT_PUBLIC_**INVITE_DISABLED             | INVITE_DISABLED             |
-| **NEXT_PUBLIC_**PRIVACY_URL                 | PRIVACY_URL                 |
-| **NEXT_PUBLIC_**TERMS_URL                   | TERMS_URL                   |
-| **NEXT_PUBLIC_**IMPRINT_URL                 | IMPRINT_URL                 |
-| **NEXT_PUBLIC_**GITHUB_AUTH_ENABLED         | GITHUB_AUTH_ENABLED         |
-| **NEXT_PUBLIC_**GOOGLE_AUTH_ENABLED         | GOOGLE_AUTH_ENABLED         |
-| **NEXT_PUBLIC_**WEBAPP_URL                  | WEBAPP_URL                  |
-| **NEXT_PUBLIC_**IS_FORMBRICKS_CLOUD         | IS_FORMBRICKS_CLOUD         |
-| **NEXT_PUBLIC_**SURVEY_BASE_URL             | SURVEY_BASE_URL             |
+| **NEXT*PUBLIC***EMAIL_VERIFICATION_DISABLED | EMAIL_VERIFICATION_DISABLED |
+| **NEXT*PUBLIC***PASSWORD_RESET_DISABLED     | PASSWORD_RESET_DISABLED     |
+| **NEXT*PUBLIC***SIGNUP_DISABLED             | SIGNUP_DISABLED             |
+| **NEXT*PUBLIC***INVITE_DISABLED             | INVITE_DISABLED             |
+| **NEXT*PUBLIC***PRIVACY_URL                 | PRIVACY_URL                 |
+| **NEXT*PUBLIC***TERMS_URL                   | TERMS_URL                   |
+| **NEXT*PUBLIC***IMPRINT_URL                 | IMPRINT_URL                 |
+| **NEXT*PUBLIC***GITHUB_AUTH_ENABLED         | GITHUB_AUTH_ENABLED         |
+| **NEXT*PUBLIC***GOOGLE_AUTH_ENABLED         | GOOGLE_AUTH_ENABLED         |
+| **NEXT*PUBLIC***WEBAPP_URL                  | WEBAPP_URL                  |
+| **NEXT*PUBLIC***IS_FORMBRICKS_CLOUD         | IS_FORMBRICKS_CLOUD         |
+| **NEXT*PUBLIC***SURVEY_BASE_URL             | SURVEY_BASE_URL             |
 
 <Note>
-Please note that their values and the logic remains exactly the same. Only the prefix has been deprecated. The other environment variables remain the same as well.
+  Please note that their values and the logic remains exactly the same. Only the prefix has been deprecated.
+  The other environment variables remain the same as well.
 </Note>
 
 ### Deprecated Environment Variables
@@ -44,25 +64,15 @@ Please note that their values and the logic remains exactly the same. Only the p
 - **NEXT_PUBLIC_WEBAPP_URL**: Was used for the same purpose as WEBAPP_URL, but from v1.1, you can just set the WEBAPP_URL environment variable.
 - **PRISMA_GENERATE_DATAPROXY**: Was used to tell Prisma that it should generate the runtime for Dataproxy usage. But its officially deprecated now.
 
-## Helper Shell Script
-For a seamless migration, below is a shell script for your self-hosted instance that will automatically update your environment variables to be compliant with the new naming conventions.
+### Helper Shell Script
 
-### Building From Source
-The below script will:
-1. Create a backup of your existing .env file as `.env.old`
-2. Update the .env file to be compliant with the new naming conventions
-<Col>
-<CodeGroup title="Run the below in your terminal in the directory of your .env">
-```shell {{ title: '.env file' }}
-for var in NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED NEXT_PUBLIC_PASSWORD_RESET_DISABLED NEXT_PUBLIC_SIGNUP_DISABLED NEXT_PUBLIC_INVITE_DISABLED NEXT_PUBLIC_PRIVACY_URL NEXT_PUBLIC_TERMS_URL NEXT_PUBLIC_IMPRINT_URL NEXT_PUBLIC_GITHUB_AUTH_ENABLED NEXT_PUBLIC_GOOGLE_AUTH_ENABLED NEXT_PUBLIC_WEBAPP_URL NEXT_PUBLIC_IS_FORMBRICKS_CLOUD NEXT_PUBLIC_SURVEY_BASE_URL; do sed -i.old "s/^$var=/$(echo $var | sed 's/NEXT_PUBLIC_//')=/" .env; done; echo "Formbricks environment variables have been migrated as per v1.1! You are good to go."
-```
-</CodeGroup>
-</Col>
+For a seamless migration, below is a shell script for your self-hosted instance that will automatically update your environment variables to be compliant with the new naming conventions.
 
 ### Docker & Single Script Setup
 
 Now that these variables can be defined at runtime, you can append them inside your `x-environment` in the `docker-compose.yml` itself.
-For a more detailed guide on these environment variables, please refer to the [Important Runtime Variables](/docs/self-hosting/from-source#important-run-time-variables) section.
+For a more detailed guide on these environment variables, please refer to the [Important Runtime Variables](/docs/self-hosting/docker#important-run-time-variables) section.
+
 <Col>
 <CodeGroup title="docker-compose.yml">
 ```yaml {{ title: 'docker-compose.yml' }}
@@ -77,7 +87,7 @@ x-environment: &environment
 
     # NextJS Auth
     # @see: https://next-auth.js.org/configuration/options#nextauth_secret
-    # You can use: `openssl rand -base64 32` to generate one
+    # You can use: `openssl rand -hex 32` to generate one
     NEXTAUTH_SECRET:
 
     # Set this to your public-facing URL, e.g., https://example.com
@@ -118,7 +128,7 @@ x-environment: &environment
 
     # Uncomment the below and set to 1 if you want to enable GitHub OAuth
     # GITHUB_AUTH_ENABLED:
-    # GITHUB_ID: 
+    # GITHUB_ID:
     # GITHUB_SECRET:
 
     # Uncomment the below and set to 1 if you want to enable Google OAuth
@@ -129,4 +139,4 @@ x-environment: &environment
 ```
 </CodeGroup>
 </Col>
-Did we miss something? Are you still facing issues migrating your app? [Join our Discord!](https://formbricks.com/discord) We'd be happy to help!
+Did we miss something? Are you still facing issues migrating your app? [Join our Discord!](https://formbricks.com/discord) We'd be happy to help!

apps/formbricks-com/app/docs/self-hosting/production/page.mdx

@@ -1,4 +1,4 @@
-export const meta = {
+export const metadata = {
   title: "Step by Step Guide on Deploying Formbricks to Production on Ubuntu",
   description:
     "Master the swift deployment of Formbricks on an Ubuntu server with our step-by-step guide. Use a single command to automate Docker, Postgres DB, SSL certificate configuration, and more. Encounter issues? Dive into our troubleshooting steps or join our community on Discord for assistance.",
@@ -168,14 +168,6 @@ cd formbricks && docker compose logs -f
 </Col>
 You can close the logs again with `CTRL + C`.
 
-<Note>
-## Customizing the Build Time variables
-
-To edit any of the variables that start with `NEXT_PUBLIC_`, you need to rebuild the Formbricks Docker from source! It is just one
-more added step and is not as much of a hassle as you think! Please check the [Building from Source](/docs/self-hosting/from-source) section!
-
-</Note>
-
 ## Troubleshooting
 
 If you encounter any issues, consider the following steps:

apps/formbricks-com/components/docs/Button.tsx

@@ -36,15 +36,16 @@ type ButtonProps = {
 
 export function Button({ variant = "primary", className, children, arrow, ...props }: ButtonProps) {
   className = clsx(
-    "inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition",
+    "inline-flex gap-0.5 justify-center items-center overflow-hidden font-medium transition text-center",
     variantStyles[variant],
-    className
+    className,
+    "px-5 py-2.5 text-xs"
   );
 
   let arrowIcon = (
     <ArrowIcon
       className={clsx(
-        "mt-0.5 h-5 w-5",
+        "mt-0.5 h-4 w-4",
         variant === "text" && "relative top-px",
         arrow === "left" && "-ml-1 rotate-180",
         arrow === "right" && "-mr-1"

apps/formbricks-com/components/docs/Footer.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-
+import { FaGithub, FaXTwitter, FaDiscord } from "react-icons/fa6";
 import { Button } from "./Button";
 import { navigation } from "./Navigation";
 
@@ -67,34 +67,6 @@ function PageNavigation() {
   );
 }
 
-function TwitterIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path d="M16.712 6.652c.01.146.01.29.01.436 0 4.449-3.267 9.579-9.242 9.579v-.003a8.963 8.963 0 0 1-4.98-1.509 6.379 6.379 0 0 0 4.807-1.396c-1.39-.027-2.608-.966-3.035-2.337.487.097.99.077 1.467-.059-1.514-.316-2.606-1.696-2.606-3.3v-.041c.45.26.956.404 1.475.42C3.18 7.454 2.74 5.486 3.602 3.947c1.65 2.104 4.083 3.382 6.695 3.517a3.446 3.446 0 0 1 .94-3.217 3.172 3.172 0 0 1 4.596.148 6.38 6.38 0 0 0 2.063-.817 3.357 3.357 0 0 1-1.428 1.861 6.283 6.283 0 0 0 1.865-.53 6.735 6.735 0 0 1-1.62 1.744Z" />
-    </svg>
-  );
-}
-
-function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10 1.667c-4.605 0-8.334 3.823-8.334 8.544 0 3.78 2.385 6.974 5.698 8.106.417.075.573-.182.573-.406 0-.203-.011-.875-.011-1.592-2.093.397-2.635-.522-2.802-1.002-.094-.246-.5-1.005-.854-1.207-.291-.16-.708-.556-.01-.567.656-.01 1.124.62 1.281.876.75 1.292 1.948.93 2.427.705.073-.555.291-.93.531-1.143-1.854-.213-3.791-.95-3.791-4.218 0-.929.322-1.698.854-2.296-.083-.214-.375-1.09.083-2.265 0 0 .698-.224 2.292.876a7.576 7.576 0 0 1 2.083-.288c.709 0 1.417.096 2.084.288 1.593-1.11 2.291-.875 2.291-.875.459 1.174.167 2.05.084 2.263.53.599.854 1.357.854 2.297 0 3.278-1.948 4.005-3.802 4.219.302.266.563.78.563 1.58 0 1.143-.011 2.061-.011 2.35 0 .224.156.491.573.405a8.365 8.365 0 0 0 4.11-3.116 8.707 8.707 0 0 0 1.567-4.99c0-4.721-3.73-8.545-8.334-8.545Z"
-      />
-    </svg>
-  );
-}
-
-function DiscordIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path d="M16.238 4.515a14.842 14.842 0 0 0-3.664-1.136.055.055 0 0 0-.059.027 10.35 10.35 0 0 0-.456.938 13.702 13.702 0 0 0-4.115 0 9.479 9.479 0 0 0-.464-.938.058.058 0 0 0-.058-.027c-1.266.218-2.497.6-3.664 1.136a.052.052 0 0 0-.024.02C1.4 8.023.76 11.424 1.074 14.782a.062.062 0 0 0 .024.042 14.923 14.923 0 0 0 4.494 2.272.058.058 0 0 0 .064-.02c.346-.473.654-.972.92-1.496a.057.057 0 0 0-.032-.08 9.83 9.83 0 0 1-1.404-.669.058.058 0 0 1-.029-.046.058.058 0 0 1 .023-.05c.094-.07.189-.144.279-.218a.056.056 0 0 1 .058-.008c2.946 1.345 6.135 1.345 9.046 0a.056.056 0 0 1 .059.007c.09.074.184.149.28.22a.058.058 0 0 1 .023.049.059.059 0 0 1-.028.046 9.224 9.224 0 0 1-1.405.669.058.058 0 0 0-.033.033.056.056 0 0 0 .002.047c.27.523.58 1.022.92 1.495a.056.056 0 0 0 .062.021 14.878 14.878 0 0 0 4.502-2.272.055.055 0 0 0 .016-.018.056.056 0 0 0 .008-.023c.375-3.883-.63-7.256-2.662-10.246a.046.046 0 0 0-.023-.021Zm-9.223 8.221c-.887 0-1.618-.814-1.618-1.814s.717-1.814 1.618-1.814c.908 0 1.632.821 1.618 1.814 0 1-.717 1.814-1.618 1.814Zm5.981 0c-.887 0-1.618-.814-1.618-1.814s.717-1.814 1.618-1.814c.908 0 1.632.821 1.618 1.814 0 1-.71 1.814-1.618 1.814Z" />
-    </svg>
-  );
-}
-
 function SocialLink({
   href,
   icon: Icon,
@@ -113,19 +85,21 @@ function SocialLink({
 }
 
 function SmallPrint() {
+  const currentYear = new Date().getFullYear();
+
   return (
     <div className="flex flex-col items-center justify-between gap-5 border-t border-slate-900/5 pt-8 dark:border-white/5 sm:flex-row">
       <p className="text-xs text-slate-600 dark:text-slate-400">
-        Formbricks GmbH &copy; 2023. All rights reserved.
+        Formbricks GmbH &copy; {currentYear}. All rights reserved.
       </p>
       <div className="flex gap-4">
-        <SocialLink href="https://twitter.com/formbricks" icon={TwitterIcon}>
+        <SocialLink href="https://twitter.com/formbricks" icon={FaXTwitter}>
           Follow us on Twitter
         </SocialLink>
-        <SocialLink href="https://github.com/formbricks/formbricks" icon={GitHubIcon}>
+        <SocialLink href="https://github.com/formbricks/formbricks" icon={FaGithub}>
           Follow us on GitHub
         </SocialLink>
-        <SocialLink href="https://formbricks.com/discord" icon={DiscordIcon}>
+        <SocialLink href="https://formbricks.com/discord" icon={FaDiscord}>
           Join our Discord server
         </SocialLink>
       </div>

apps/formbricks-com/components/docs/Header.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { forwardRef } from "react";
-import Link from "next/link";
 import clsx from "clsx";
 import { motion, useScroll, useTransform } from "framer-motion";
+import Link from "next/link";
+import { forwardRef } from "react";
 
+import { FooterLogo } from "@/components/shared/Logo";
 import { Button } from "./Button";
+import { MobileNavigation, useIsInsideMobileNavigation, useMobileNavigationStore } from "./MobileNavigation";
 import { MobileSearch, Search } from "./Search";
 import { ThemeToggle } from "./ThemeToggle";
-import { FooterLogo } from "@/components/shared/Logo";
-import { useMobileNavigationStore, useIsInsideMobileNavigation, MobileNavigation } from "./MobileNavigation";
 
 function TopLevelNavItem({ href, children }: { href: string; children: React.ReactNode }) {
   return (
@@ -39,7 +39,7 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
       ref={ref}
       className={clsx(
         className,
-        "fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
+        "fixed inset-x-0 top-0 z-50 flex h-20 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
         !isInsideMobileNavigation && "backdrop-blur-sm dark:backdrop-blur lg:left-72 xl:left-80",
         isInsideMobileNavigation
           ? "bg-white dark:bg-slate-900"
@@ -64,10 +64,9 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
           <FooterLogo className="h-8" />
         </Link>
       </div>
-      <div className="flex items-center gap-5">
-        <nav className="hidden md:block">
+      <div className="flex items-center gap-6">
+        <nav className="hidden lg:block">
           <ul role="list" className="flex items-center gap-8">
-            <TopLevelNavItem href="/docs/introduction/what-is-formbricks">Documentation</TopLevelNavItem>
             <TopLevelNavItem href="https://github.com/formbricks/formbricks">
               Star us on GitHub
             </TopLevelNavItem>

apps/formbricks-com/components/docs/Navigation.tsx

@@ -193,6 +193,7 @@ export const navigation: Array<NavGroup> = [
     links: [
       { title: "Quickstart: In app", href: "/docs/getting-started/quickstart-in-app-survey" },
       { title: "Framework Guides", href: "/docs/getting-started/framework-guides" },
+      { title: "Troubleshooting", href: "/docs/getting-started/troubleshooting" },
     ],
   },
   {
@@ -226,10 +227,11 @@ export const navigation: Array<NavGroup> = [
   {
     title: "Integrations",
     links: [
-      { title: "Zapier", href: "/docs/integrations/zapier" },
-      { title: "n8n", href: "/docs/integrations/n8n" },
-      { title: "Make.com", href: "/docs/integrations/make" },
+      { title: "Airtable", href: "/docs/integrations/airtable" },
       { title: "Google Sheets", href: "/docs/integrations/google-sheets" },
+      { title: "Make.com", href: "/docs/integrations/make" },
+      { title: "n8n", href: "/docs/integrations/n8n" },
+      { title: "Zapier", href: "/docs/integrations/zapier" },
     ],
   },
   {
@@ -246,18 +248,19 @@ export const navigation: Array<NavGroup> = [
       { title: "Deployment", href: "/docs/self-hosting/deployment" },
       { title: "Production", href: "/docs/self-hosting/production" },
       { title: "Docker", href: "/docs/self-hosting/docker" },
-      { title: "From Source", href: "/docs/self-hosting/from-source" },
-      { title: "Migration to v1.1", href: "/docs/self-hosting/migrating-to-1.1" },
+      { title: "Migration Guide", href: "/docs/self-hosting/migration-guide" },
+      { title: "External auth providers", href: "/docs/self-hosting/external-auth-providers" },
     ],
   },
   {
     title: "Contributing",
     links: [
       { title: "Introduction", href: "/docs/contributing/introduction" },
-      { title: "How we code at Formbricks", href: "/docs/contributing/how-we-code" },
+      { title: "Demo App", href: "/docs/contributing/demo" },
       { title: "Setup Dev Environment", href: "/docs/contributing/setup" },
       { title: "Gitpod", href: "/docs/contributing/gitpod" },
-      { title: "Demo App", href: "/docs/contributing/demo" },
+      { title: "How we code at Formbricks", href: "/docs/contributing/how-we-code" },
+      { title: "How to create a service", href: "/docs/contributing/creating-a-service" },
       { title: "Troubleshooting", href: "/docs/contributing/troubleshooting" },
       { title: "FAQ", href: "/docs/faq" },
     ],

apps/formbricks-com/components/dummyUI/AddEventDummy.tsx

@@ -1,16 +1,16 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 import { Button } from "@formbricks/ui/Button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 
 const DummyUI: React.FC = () => {
-  const eventClasses = [
+  const actionClasses = [
     { id: "1", name: "View Dashboard" },
     { id: "2", name: "Upgrade to Pro" },
     { id: "3", name: "Cancel Plan" },
   ];
 
-  const [triggers, setTriggers] = useState<string[]>([eventClasses[0].id]);
+  const [triggers, setTriggers] = useState<string[]>([actionClasses[0].id]);
 
   const setTriggerEvent = (index: number, eventClassId: string) => {
     setTriggers((prevTriggers) =>
@@ -19,7 +19,7 @@ const DummyUI: React.FC = () => {
   };
 
   const addTriggerEvent = () => {
-    setTriggers((prevTriggers) => [...prevTriggers, eventClasses[0].id]);
+    setTriggers((prevTriggers) => [...prevTriggers, actionClasses[0].id]);
   };
 
   const removeTriggerEvent = (index: number) => {
@@ -31,7 +31,7 @@ const DummyUI: React.FC = () => {
       {triggers.map((triggerEventClassId, idx) => (
         <div className="mt-2" key={idx}>
           <div className="flex items-center gap-2">
-            <p className="mr-2 w-14 text-right text-sm text-slate-800 dark:text-slate-300">
+            <p className="mr-2 w-10 text-right text-sm text-slate-800 dark:text-slate-300">
               {idx === 0 ? "When" : "or"}
             </p>
             <Select
@@ -41,12 +41,12 @@ const DummyUI: React.FC = () => {
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                {eventClasses.map((eventClass) => (
+                {actionClasses.map((actionClass) => (
                   <SelectItem
-                    key={eventClass.id}
+                    key={actionClass.id}
                     className="xs:text-base px-0.5 py-1 text-xs text-slate-800 dark:bg-slate-700 dark:text-slate-300 dark:ring-slate-700"
-                    value={eventClass.id}>
-                    {eventClass.name}
+                    value={actionClass.id}>
+                    {actionClass.name}
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -57,7 +57,7 @@ const DummyUI: React.FC = () => {
           </div>
         </div>
       ))}
-      <div className="w-fit p-3">
+      <div className="ml-4 w-fit p-3">
         <Button
           variant="secondary"
           className="xs:text-base w-fit text-xs dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600"

apps/formbricks-com/components/dummyUI/AddNoCodeEventModalDummy.tsx

@@ -14,15 +14,15 @@ interface EventDetailModalProps {
 export const AddNoCodeEventModalDummy: React.FC<EventDetailModalProps> = ({ open, setOpen }) => {
   return (
     <Modal open={open} setOpen={setOpen} noPadding>
-      <div className="flex h-full flex-col rounded-lg bg-slate-50 dark:bg-slate-800">
-        <div className="rounded-t-lg bg-slate-100 dark:bg-slate-700">
-          <div className="flex items-center justify-between p-6">
+      <div className="flex flex-col rounded-lg bg-slate-50 dark:bg-slate-800">
+        <div className="bg-slate-90 dark:bg-slate-700">
+          <div className="p-4 sm:p-6">
             <div className="flex items-center space-x-2">
-              <div className="mr-1.5 h-6 w-6 text-slate-500">
+              <div className="h-6 w-6 text-slate-500">
                 <CursorArrowRaysIcon />
               </div>
               <div>
-                <div className="text-xl font-medium text-slate-700 dark:text-slate-300">Add Action</div>
+                <div className="text-lg font-medium text-slate-700 dark:text-slate-300">Add Action</div>
                 <div className="text-sm text-slate-500">
                   Create a new user action to display surveys when it&apos;s triggered.
                 </div>
@@ -31,74 +31,76 @@ export const AddNoCodeEventModalDummy: React.FC<EventDetailModalProps> = ({ open
           </div>
         </div>
         <form>
-          <div className="flex justify-between rounded-lg p-6">
-            <div className="space-y-4">
-              <div>
-                <Label>Select By</Label>
-                <RadioGroup className="grid grid-cols-2 gap-1 md:grid-cols-3" defaultValue="pageUrl">
-                  <div className="flex items-center space-x-2 rounded-lg border border-slate-200 p-3 dark:border-slate-500">
-                    <RadioGroupItem value="pageUrl" id="pageUrl" className="bg-slate-50" />
-                    <Label htmlFor="pageUrl" className="cursor-pointer dark:text-slate-200">
-                      Page URL
-                    </Label>
-                  </div>
-                  <div className="flex items-center space-x-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-600">
-                    <RadioGroupItem disabled value="innerHtml" id="innerHtml" className="bg-slate-50" />
-                    <Label
-                      htmlFor="innerHtml"
-                      className="flex cursor-not-allowed items-center text-slate-500 dark:text-slate-400">
-                      Inner Text
-                    </Label>
-                  </div>
-                  <div className="hidden items-center space-x-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-600 md:flex">
-                    <RadioGroupItem disabled value="cssSelector" id="cssSelector" className="bg-slate-50" />
-                    <Label
-                      htmlFor="cssSelector"
-                      className="flex cursor-not-allowed items-center text-slate-500">
-                      CSS Selector
-                    </Label>
-                  </div>
-                </RadioGroup>
+          <div className="space-y-4 p-4 sm:p-6">
+            <div>
+              <Label>Select By</Label>
+              <RadioGroup className="grid grid-cols-1 gap-2 sm:grid-cols-2" defaultValue="pageUrl">
+                <div className="flex items-center space-x-2 rounded-lg border border-slate-200 p-3 dark:border-slate-500">
+                  <RadioGroupItem
+                    value="pageUrl"
+                    id="pageUrl"
+                    className="flex items-center justify-center bg-slate-50">
+                    <div className="h-2 w-2 rounded-full bg-black dark:bg-white" />
+                  </RadioGroupItem>
+                  <Label htmlFor="pageUrl" className="cursor-pointer dark:text-slate-200">
+                    Page URL
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-600">
+                  <RadioGroupItem disabled value="innerHtml" id="innerHtml" className="bg-slate-50" />
+                  <Label
+                    htmlFor="innerHtml"
+                    className="flex cursor-not-allowed items-center text-slate-500 dark:text-slate-400">
+                    Inner Text
+                  </Label>
+                </div>
+                <div className="hidden items-center space-x-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-600 md:flex">
+                  <RadioGroupItem disabled value="cssSelector" id="cssSelector" className="bg-slate-50" />
+                  <Label
+                    htmlFor="cssSelector"
+                    className="flex cursor-not-allowed items-center text-slate-500">
+                    CSS Selector
+                  </Label>
+                </div>
+              </RadioGroup>
+            </div>
+            <div className="space-y-2 sm:flex sm:justify-between sm:gap-x-4 sm:space-y-0">
+              <div className="sm:w-1/2">
+                <Label>Name</Label>
+                <Input placeholder="e.g. Dashboard Page View" defaultValue="Dashboard view" />
               </div>
-              <div className="grid grid-cols-2 gap-x-2">
-                <div>
-                  <Label>Name</Label>
-                  <Input placeholder="e.g. Dashboard Page View" defaultValue="Dashboard view" />
-                </div>
-                <div>
-                  <Label>Description</Label>
-                  <Input placeholder="e.g. User visited dashboard" defaultValue="User visited dashboard" />
-                </div>
+              <div className="sm:w-1/2">
+                <Label>Description</Label>
+                <Input placeholder="e.g. User visited dashboard" defaultValue="User visited dashboard" />
               </div>
-              <div className="grid w-full grid-cols-3 gap-x-8">
-                <div className="col-span-1">
-                  <Label>URL</Label>
-                  <Select defaultValue="endsWith">
-                    <SelectTrigger
-                      className="w-[110px] dark:text-slate-200 md:w-[180px]"
-                      onClick={(e) => e.preventDefault()}
-                      disabled>
-                      <SelectValue placeholder="Select match type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="exactMatch">Exactly matches</SelectItem>
-                      <SelectItem value="contains">Contains</SelectItem>
-                      <SelectItem value="startsWith">Starts with</SelectItem>
-                      <SelectItem value="endsWith">Ends with</SelectItem>
-                      <SelectItem value="notMatch">Does not exactly match</SelectItem>
-                      <SelectItem value="notContains">Does not contain</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="col-span-2 flex w-full items-end">
-                  <Input type="text" defaultValue="/dashboard" />
-                </div>
+            </div>
+            <div className="space-y-2 sm:flex sm:justify-between sm:gap-x-4">
+              <div className="w-full">
+                <Label>URL</Label>
+                <Select defaultValue="endsWith">
+                  <SelectTrigger
+                    className="w-[110px] dark:text-slate-200 md:w-[180px]"
+                    onClick={(e) => e.preventDefault()}
+                    disabled>
+                    <SelectValue placeholder="Select match type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="exactMatch">Exactly matches</SelectItem>
+                    <SelectItem value="contains">Contains</SelectItem>
+                    <SelectItem value="startsWith">Starts with</SelectItem>
+                    <SelectItem value="endsWith">Ends with</SelectItem>
+                    <SelectItem value="notMatch">Does not exactly match</SelectItem>
+                    <SelectItem value="notContains">Does not contain</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="mt-2 w-full sm:mt-0">
+                <Input type="text" defaultValue="/dashboard" />
               </div>
             </div>
           </div>
-          <div className="flex justify-end border-t border-slate-200 p-6 dark:border-slate-700">
-            <div className="flex space-x-2">
+          <div className="mt-6 flex justify-center pb-8 sm:mt-8 sm:justify-end">
+            <div className="flex space-x-4">
               <Button
                 variant="minimal"
                 onClick={(e) => {

apps/formbricks-com/components/dummyUI/CTAQuestion.tsx

@@ -1,9 +1,9 @@
-import type { CTAQuestion } from "@formbricks/types/questions";
+import { TSurveyCTAQuestion } from "@formbricks/types/surveys";
 import Headline from "./Headline";
 import HtmlBody from "./HtmlBody";
 
 interface CTAQuestionProps {
-  question: CTAQuestion;
+  question: TSurveyCTAQuestion;
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;

apps/formbricks-com/components/dummyUI/DemoPreview.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 import PreviewSurvey from "./PreviewSurvey";
 import { findTemplateByName } from "./templates";
-import type { Template } from "@formbricks/types/templates";
+import { TTemplate } from "@formbricks/types/templates";
 
 interface DemoPreviewProps {
   template: string;
@@ -10,7 +10,7 @@ interface DemoPreviewProps {
 
 const DemoPreview: React.FC<DemoPreviewProps> = ({ template }) => {
   const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
-  const selectedTemplate: Template | undefined = findTemplateByName(template);
+  const selectedTemplate: TTemplate | undefined = findTemplateByName(template);
 
   useEffect(() => {
     if (selectedTemplate) {

apps/formbricks-com/components/dummyUI/DemoView.tsx

@@ -1,11 +1,11 @@
-import type { Template } from "@formbricks/types/templates";
+import { TTemplate } from "@formbricks/types/templates";
 import { useEffect, useState } from "react";
 import PreviewSurvey from "./PreviewSurvey";
 import TemplateList from "./TemplateList";
 import { templates } from "./templates";
 
 export default function SurveyTemplatesPage({}) {
-  const [activeTemplate, setActiveTemplate] = useState<Template | null>(null);
+  const [activeTemplate, setActiveTemplate] = useState<TTemplate | null>(null);
   const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
 
   useEffect(() => {

apps/formbricks-com/components/dummyUI/MultipleChoiceMultiQuestion.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
 import { cn } from "@formbricks/lib/cn";
-import type { MultipleChoiceMultiQuestion } from "@formbricks/types/questions";
+import { TSurveyMultipleChoiceMultiQuestion } from "@formbricks/types/surveys";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 
 interface MultipleChoiceMultiProps {
-  question: MultipleChoiceMultiQuestion;
+  question: TSurveyMultipleChoiceMultiQuestion;
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;