Update ecs-deployment.yml

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

.env.example

@@ -137,3 +137,7 @@ ENTERPRISE_LICENSE_KEY=
 
 # set to 1 to skip onboarding for new users
 # ONBOARDING_DISABLED=1
+
+# Send new users to customer.io
+# CUSTOMER_IO_API_KEY=
+# CUSTOMER_IO_SITE_ID=

.github/ISSUE_TEMPLATE/feature_request.yml

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

.github/workflows/ecs-deployment.yml

@@ -0,0 +1,132 @@
+name: ECS
+
+# 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:
+    branches:
+      - main
+  workflow_dispatch: # Add manual trigger support
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}/formbricks-experimental
+  DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
+
+      - name: Generate Random ENCRYPTION_KEY
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Depot CLI
+        uses: depot/setup-action@v1
+
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        uses: sigstore/cosign-installer@6e04d228eb30da1757ee4e1dd75a0ec73a653e06 #v3.1.1
+        with:
+          cosign-release: "v2.1.1"
+
+      # https://github.com/docker/login-action
+      - name: Log into registry
+        uses: docker/login-action@v3 # v3.0.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5 # v5.0.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      # Build and push Docker image with Buildx
+      
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: depot/build-push-action@v1
+        env: 
+          NEXT_PUBLIC_SENTRY_DSN: ${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}
+        with:
+          project: tw0fqmsx3c
+          token: ${{ secrets.DEPOT_PROJECT_TOKEN }}
+          context: .
+          file: ./apps/web/Dockerfile
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: |
+            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
+            DATABASE_URL=${{ env.DATABASE_URL }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}
+            NEXT_PUBLIC_SENTRY_DSN=${{ env.NEXT_PUBLIC_SENTRY_DSN }}
+
+      - name: Sign the published Docker image
+        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}
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+          
+      - name: Download task definition
+        run: |
+          aws ecs describe-task-definition --task-definition prod-webapp-ecs-service --query taskDefinition > task-definition.json
+
+      - name: Fill in the new image ID in the Amazon ECS task definition
+        id: task-def
+        uses: aws-actions/amazon-ecs-render-task-definition@v1
+        with:
+          task-definition: task-definition.json
+          container-name: prod-webapp-container
+          image: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:main
+
+      - name: Deploy Amazon ECS task definition
+        uses: aws-actions/amazon-ecs-deploy-task-definition@v1
+        with:
+          task-definition: ${{ steps.task-def.outputs.task-definition }}
+          service: prod-webapp-ecs-service
+          cluster: prod-core-infra-ecs-cluster
+          wait-for-service-stability: true

README.md

@@ -126,8 +126,6 @@ Formbricks has a hosted cloud offering with a generous free plan to get you up a
 
 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
 
-(In the future we may develop additional features that aren't in the free Open-Source version).
-
 If you opt for self-hosting Formbricks, here are a few options to consider:
 
 #### Docker

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

@@ -46,7 +46,8 @@ To run the Churn Survey in your app you want to proceed as follows:
 4. Prevent that churn!
 
 <Note>
-  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web
+  ## Formbricks Widget running? 
+  We assume that you have already installed the Formbricks Widget in your web
   app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
   (takes 15mins max.)](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -119,7 +120,8 @@ Whenever a user visits this page, matches the filter conditions above and the re
 Here is our complete [Actions manual](/docs/actions/why) covering [Code](/docs/actions/code) and [No-Code](/docs/actions/no-code) Actions.
 
 <Note>
-  ## Pre-churn flow coming soon We’re currently building full-screen survey pop-ups. You’ll be able to prevent
+  ## Pre-churn flow coming soon 
+  We’re currently building full-screen survey pop-ups. You’ll be able to prevent
   users from closing the survey unless they respond to it. It’s certainly debatable if you want that but you
   could force them to click through the survey before letting them cancel 🤷
 </Note>
@@ -156,7 +158,8 @@ These settings make sure the survey is always displayed, when a user wants to Ca
 />
 
 <Note>
-  ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Churn Survey
+  ## Formbricks Widget running? 
+  You need to have the Formbricks Widget installed to display the Churn Survey
   in your app. Please follow [this tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey)
   to install the widget.
 </Note>

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

@@ -43,7 +43,8 @@ To run the Feature Chaser survey in your app you want to proceed as follows:
 2. Setup a user action to display survey at the right point in time
 
 <Note>
-  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web
+  ## Formbricks Widget running? 
+  We assume that you have already installed the Formbricks Widget in your web
   app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
   (takes 15mins max.)](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -127,7 +128,8 @@ Lastly, scroll down to “Recontact Options”. Here you have full freedom to de
 <Image src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feature Chaser
+  ## Formbricks Widget running?
+   You need to have the Formbricks Widget installed to display the Feature Chaser
   in your app. Please follow [this tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey)
   to install the widget.
 </Note>

apps/formbricks-com/app/docs/best-practices/improve-email-content/page.mdx

@@ -0,0 +1,113 @@
+import DemoPreview from "@/components/dummyUI/DemoPreview";
+import Image from "next/image";
+import NewsletterSurveyType from './choose-survey-type.webp';
+import NewsletterSurveyEmbedCode from './embed-survey-code-in-your-email.webp';
+import NewsletterSurveyEmbedPrompt from './embed-survey-prompt.webp';
+import NewsletterSurveyEditor from './improve-newsletter-content-editor-formbricks.webp';
+import NewsletterSurvey from './improve-newsletter-content-survey-location.webp';
+export const metadata = {
+  title: "Measure email content quality with Formbricks",
+  description:
+    "Measuring the content quality of both transactional and marketing email is a key element for improving customer communication.",
+};
+
+#### Best Practices
+
+# Improve Email Content
+Email remains the predominant way to communicate with your customers. Measure the effectiveness to improve your offering.
+
+
+## Purpose
+
+Measuring the content quality of both transactional and marketing email is a key element for improving customer communication.
+
+## Preview
+
+<DemoPreview template="Improve Newsletter Content" />
+
+## Formbricks Approach
+
+- Embed the survey into your email so it’s part of the newsletter.
+- Use link prefilling to store the answer users clicked on in the email.
+- Dynamic user identification to append reader's email for personalized profiles and follow ups.
+
+## Installation
+
+To embed the newsletter survey into your email, follow these steps:
+
+1. Create new 'Improve Newsletter Content' survey at [app.formbricks.com](https://app.formbricks.com/)
+2. Select how you where you want to display the survey.
+3. Copy the embed code anywhere you want in your newsletter. 
+
+### 1. Create new 'Improve Newsletter Content' Survey
+
+If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
+
+Then, create a new survey and look for the "Improve Newsletter Content" template:
+
+<Image
+  src={NewsletterSurvey}
+  alt="Create Improve Newsletter Content by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+### 2. Customize Survey questions
+
+Customize survey questions, emojis or stars however you like:
+
+<Image
+  src={NewsletterSurveyEditor}
+  alt="Edit Improve Newsletter Content template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+### 3. Configure Survey Settings
+
+When you are done customizing your survey questions, navigate to the Settings tab and choose the type of survey you want. You need to choose Link Survey:
+
+<Image
+  src={NewsletterSurveyType}
+  alt="Choose survey type"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+### 4. Choose how you want to embed your survey
+
+After publishing your survey, a modal that prompts you to embed your survey will pop up.
+
+<Image
+  src={NewsletterSurveyEmbedPrompt}
+  alt="Embed newsletter survey"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+Select the Embed Survey card and you will be directed to another modal, where the first embed option displayed will be to embed the survey in an email.
+
+### 5. Copy code to embed the survey in your newsletter
+
+Click the button with the “View Embed Code” text at the top right corner of the modal and simply paste the HTML code for your survey anywhere you want it in your newsletter. You can see the preview in the below image:
+
+<Image
+  src={NewsletterSurveyEmbedCode}
+  alt="Embed survey code"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+And you're done! Send a test email to yourself and try it out 🤓
+
+
+## Learn about data prefilling 
+
+<Note>
+  ## How does data prefilling work?
+  Learn about how link prefilling and user identification maximize your insights in [this detailed guide](/blog/how-smart-writers-use-formbricks-open-source-tool-to-measure-the-quality-of-their-newsletter-content).
+</Note>
+
+### &nbsp;
+
+# That’s it! 🎉

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

@@ -43,7 +43,8 @@ To display the Trial Conversion Survey in your app you want to proceed as follow
 3. Print that 💸
 
 <Note>
-  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web
+  ## Formbricks Widget running?
+   We assume that you have already installed the Formbricks Widget in your web
   app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
   (takes 15mins max.)](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -79,7 +80,8 @@ Save, and move over to the “Audience” tab.
 ### 3. Pre-segment your audience (coming soon)
 
 <Note>
-  ## Filter by attribute coming soon We're working on pre-segmenting users by attributes. We will update this
+  ## Filter by attribute coming soon 
+  We're working on pre-segmenting users by attributes. We will update this
   manual in the next days.
 </Note>
 
@@ -136,7 +138,8 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 <Image src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
+  ## Formbricks Widget running? 
+  You need to have the Formbricks Widget installed to display the Feedback Box
   in your app. Please follow [this tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey)
   to install the widget.
 </Note>

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

@@ -48,7 +48,8 @@ To display an Interview Prompt in your app you want to proceed as follows:
 3. That’s it! 🎉
 
 <Note>
-  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web
+  ## Formbricks Widget running?
+   We assume that you have already installed the Formbricks Widget in your web
   app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
   (15mins).](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -91,7 +92,8 @@ Save, and move over to the “Audience” tab.
 ### 3. Pre-segment your audience (coming soon)
 
 <Note>
-  ## Filter by attribute coming soon We're working on pre-segmenting users by attributes. We will update this
+  ## Filter by attribute coming soon 
+  We're working on pre-segmenting users by attributes. We will update this
   manual in the next few days.
 </Note>
 
@@ -108,7 +110,8 @@ To create the trigger to show your Interview Prompt, go to the “Audience” ta
 <Image src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 <Note>
-  ## You can also add actions in your code You can also create [Code Actions](/docs/actions/code) using
+  ## You can also add actions in your code
+   You can also create [Code Actions](/docs/actions/code) using
   `formbricks.track("Eventname")` - they will automatically appear in your Actions overview as long as the SDK
   is embedded.
 </Note>
@@ -161,7 +164,8 @@ Scroll down to “Recontact Options”. Here you have to choose the correct sett
 <Image src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
+  ## Formbricks Widget running?
+   You need to have the Formbricks Widget installed to display the Feedback Box
   in your app. Please follow [this tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey)
   to install the widget.
 </Note>

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

@@ -42,7 +42,8 @@ To display the Product-Market Fit survey in your app you want to proceed as foll
 3. Setup the user action to display survey at good point in time
 
 <Note>
-  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web
+  ## Formbricks Widget running?
+   We assume that you have already installed the Formbricks Widget in your web
   app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
   (15mins).](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -78,7 +79,8 @@ Save, and move over to where the magic happens: The “Audience” tab.
 ### 3. Pre-segment your audience (coming soon)
 
 <Note>
-  ## Filter by attribute coming soon We're working on pre-segmenting users by attributes. We will update this
+  ## Filter by attribute coming soon
+   We're working on pre-segmenting users by attributes. We will update this
   manual in the next days.
 </Note>
 
@@ -139,7 +141,8 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 <Image src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
+  ## Formbricks Widget running? 
+  You need to have the Formbricks Widget installed to display the Feedback Box
   in your app. Please follow [this tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey)
   to install the widget.
 </Note>

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

@@ -0,0 +1,88 @@
+import Image from "next/image";
+
+import HomePage from "./home-page.webp";
+import SurveyQuestions from "./survey-questions.webp";
+import SurveySettings from "./survey-settings.webp";
+import SurveyResponseOptions from "./survey-response-options.webp";
+import SurveyPublished from "./survey-published.webp";
+
+export const metadata = {
+  title: "Formbricks Quickstart Guide: Link Surveys Made Easier & Faster",
+  description:
+    "Formbricks is the easiest way to create and manage link surveys. This quickstart guide will show you how to create your first link survey in under 5 minutes.",
+};
+
+#### Getting Started
+
+# Quickstart
+
+Link Surveys make it easy for your users to give you feedback. They are a great way to get feedback from your users, without interrupting their workflow. This quickstart guide will show you how to create your first link survey in under 5 minutes.
+
+## Create a free Formbricks Cloud account
+
+While you can [self-host](/docs/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and click through the onboarding, until you’re here:
+
+<Image
+  src={HomePage}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+Choose one of the pre-created templates to get started. We’ll choose the **Product Market Fit** template for this quickstart guide.
+
+## Create your first survey
+
+On clicking the template, you’ll be forwarded to the survey editor. Here you can edit the survey questions and settings. For the sake of simplicity, we'll keep the questions as they are and move to the survey settings.
+
+<Image
+  src={SurveyQuestions}
+  alt="Survey Editor opens up in the Formbricks App"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Click on the **Settings** tab to edit the survey settings.
+
+## Configure your survey settings
+
+Formbricks packs a lot of useful functionality out of the box. You can:
+
+- Close the survey on a specidic date 
+- After a number of response
+- Redirect users to a URL after they completed the survey
+- Protect survey with a Pin
+- ... and much more!
+
+<Image
+  src={SurveyResponseOptions}
+  alt="Survey response configuration for link survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Style your survey
+
+Style your survey to your need. You can keep it simplistic or use animated backgrounds. You can change the main color and soon you'll be able to fully control the appearance of the survey.
+
+<Image
+  src={SurveySettings}
+  alt="UI & View configuration for link survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Publish your survey
+
+Once you’re happy with the survey settings, hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey.
+
+<Image
+  src={SurveyPublished}
+  alt="Survey published successfully and received link to share with users"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Share your survey
+
+Congratulations! Your survey is now published and ready to be shared with your users. You can share the survey link via email, SMS, or any other channel.

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

@@ -202,6 +202,7 @@ export const navigation: Array<NavGroup> = [
   {
     title: "Link Surveys",
     links: [
+      { title: "Quickstart", href: "/docs/link-surveys/quickstart" },
       { title: "Data Prefilling", href: "/docs/link-surveys/data-prefilling" },
       { title: "Identify Users", href: "/docs/link-surveys/user-identification" },
       { title: "Single Use Links", href: "/docs/link-surveys/single-use-links" },
@@ -218,6 +219,7 @@ export const navigation: Array<NavGroup> = [
       { title: "Feature Chaser", href: "/docs/best-practices/feature-chaser" },
       { title: "Feedback Box", href: "/docs/best-practices/feedback-box" },
       { title: "Docs Feedback", href: "/docs/best-practices/docs-feedback" },
+      { title: "Improve Email Content", href: "/docs/best-practices/improve-email-content" },
     ],
   },
   {

apps/formbricks-com/components/dummyUI/templates.ts

@@ -1,6 +1,6 @@
 import { createId } from "@paralleldrive/cuid2";
 
-import { TSurveyQuestionType } from "@formbricks/types/surveys";
+import { TSurveyHiddenFields, TSurveyQuestionType } from "@formbricks/types/surveys";
 import { TTemplate } from "@formbricks/types/templates";
 import {
   AppPieChartIcon,
@@ -38,6 +38,11 @@ const welcomeCardDefault = {
   showResponseCount: false,
 };
 
+const hiddenFieldsDefault: TSurveyHiddenFields = {
+  enabled: true,
+  fieldIds: [],
+};
+
 export const customSurvey: TTemplate = {
   name: "Start from scratch",
   description: "Create a survey without template.",
@@ -1224,6 +1229,58 @@ export const templates: TTemplate[] = [
       },
     },
   },
+  {
+    name: "Improve Newsletter Content",
+    category: "Growth",
+    objectives: ["increase_conversion", "sharpen_marketing_messaging"],
+    description: "Find out how your subscribers like your newsletter content.",
+    preset: {
+      name: "Improve Newsletter Content",
+      welcomeCard: welcomeCardDefault,
+      questions: [
+        {
+          id: createId(),
+          type: TSurveyQuestionType.Rating,
+          logic: [
+            { value: "5", condition: "equals", destination: "l2q1chqssong8n0xwaagyl8g" },
+            { value: "5", condition: "lessThan", destination: "k3s6gm5ivkc5crpycdbpzkpa" },
+          ],
+          range: 5,
+          scale: "smiley",
+          headline: "How would you rate this weeks newsletter?",
+          required: true,
+          subheader: "",
+          lowerLabel: "Meh",
+          upperLabel: "Great",
+        },
+        {
+          id: "k3s6gm5ivkc5crpycdbpzkpa",
+          type: TSurveyQuestionType.OpenText,
+          logic: [
+            { condition: "submitted", destination: "end" },
+            { condition: "skipped", destination: "end" },
+          ],
+          headline: "What would have made this weeks newsletter more helpful?",
+          required: false,
+          placeholder: "Type your answer here...",
+          inputType: "text",
+        },
+        {
+          id: "l2q1chqssong8n0xwaagyl8g",
+          html: '<p class="fb-editor-paragraph" dir="ltr"><span>Who thinks like you? You\'d do us a huge favor if you\'d share this weeks episode with your brain friend!</span></p>',
+          type: TSurveyQuestionType.CTA,
+          headline: "Thanks! ❤️ Spread the love with ONE friend.",
+          required: false,
+          buttonUrl: "https://formbricks.com",
+          buttonLabel: "Happy to help!",
+          buttonExternal: true,
+          dismissButtonLabel: "Find your own friends",
+        },
+      ],
+      thankYouCard: thankYouCardDefault,
+      hiddenFields: hiddenFieldsDefault,
+    },
+  },
 ];
 
 export const findTemplateByName = (name: string): TTemplate | undefined => {

apps/formbricks-com/components/shared/BestPracticeNavigation.tsx

@@ -79,6 +79,15 @@ export default function BestPracticeNavigation() {
       description: "Give users the chance to share feedback in a single click.",
       category: "Boost Retention",
     },
+
+    {
+      name: "Improve Newsletter Cotent",
+      href: "/improve-newsletter-content",
+      status: true,
+      icon: FeedbackIcon,
+      description: "Improve your newsletter content by showing this survey to your readers.",
+      category: "Boost Retention",
+    },
   ];
 
   return (

apps/formbricks-com/components/shared/LayoutMdx.tsx

@@ -60,7 +60,7 @@ export default function LayoutMdx({ meta, children }: Props) {
               )}
             </header>
           )}
-          <Prose className="prose-h2:text-2xl prose-li:text-base prose-h2:mt-4 prose-p:text-base  prose-p:mb-4 prose-h3:text-xl prose-a:text-slate-900 prose-a:hover:text-slate-900 prose-a:text-decoration-brand prose-a:not-italic prose-ul:pl-12">
+          <Prose className="prose-h2:text-2xl prose-li:text-base prose-h2:mt-6 prose-p:text-base  prose-p:mb-4 prose-h3:text-xl prose-a:text-slate-900 prose-a:hover:text-slate-900 prose-a:text-decoration-brand prose-a:not-italic prose-ul:pl-12">
             {children}
           </Prose>
         </article>

apps/formbricks-com/next.config.mjs

@@ -155,11 +155,6 @@ const nextConfig = {
         destination: "/docs/self-hosting/migration-guide",
         permanent: true,
       },
-      {
-        source: "/cla",
-        destination: "https://formbricks.com/clmyhzfrymr4ko00hycsg1tvx",
-        permanent: true,
-      },
       {
         source: "/docs/contributing/gitpod",
         destination: "/docs/contributing/setup#gitpod",

apps/formbricks-com/pages/blog/how-smart-writers-use-formbricks-open-source-tool-to-measure-the-quality-of-their-newsletter-content/index.mdx

@@ -0,0 +1,165 @@
+import AuthorBox from "@/components/shared/AuthorBox";
+import { Callout } from "@/components/shared/Callout";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Image from "next/image";
+import NewsletterSurveyCode from './code-for-embedding-newsletter-survey-formbricks.png';
+import Header from './header-newsletter-survey-content-open-source-kpi.webp';
+import NewsletterSurvey from './improve-newsletter-content-editor-formbricks.png';
+import NewsletterSurveyModal from './improve-newsletter-content-modal-formbricks.png';
+import SurveyResponses from './survey-responses.png';
+import YourSurveys from './your-surveys-formbricks.png';
+export const meta = {
+  title: "How to measure the quality of your newsletter content with Formbricks",
+  description:
+    "Newsletters boast the highest ROI in email marketing but grasping your audience's resonance is key. Formbricks steps in to empower you with tools to measure your content quality and explore reader engagement in newsletters.",
+  date: "2024-01-24",
+  publishedTime: "2024-01-24T12:00:00",
+  authors: ["Olasunkanmi Balogun"],
+  section: "Newsletter Survey",
+  tags: ["Improve Newsletter Content"],
+};
+
+<Image src={Header} alt="Gather in app feedback for free with these 6 tools." className="w-full rounded-lg" />
+
+<AuthorBox
+  name="Olasunkanmi Balogun"
+  title="Content Writer"
+  date="January 24th, 2024"
+  duration="5"
+  author={"Ola"}
+/>
+
+_Newsletters are a form of email marketing which has the highest ROI of all marketing channels. According to the research (source below), for every dollar spent you can get a return of $36 to $40._
+
+You reap this sweet, juciy ROI if your content resonates with your audience. You can only manage what you measure, so here is a quick, free and easy way to measure the quality of your newsletter content.
+
+After this article, you have everything you need to easily measure the quality of your emails. We walk through you the setup, how to embed it in your email and what to do with the insights.
+
+Here’s what we’ll cover:
+
+1. **How link prefilling and user identification maximize your insights**
+2. **How to create the right survey with Formbricks**
+3. **Embeddung the survey in your email**
+4. **How to improve the analysis by identifying users**
+5. **How to enrich the response with hidden fields**
+6. **Auto-create surveys via API**
+
+Toes are in the water, let’s dive deep 🏊
+
+<Callout title="What Is Formbricks" type="note">
+Formbricks is an experience management suite built on the **largest open source survey stack** worldwide. It’s easy to use and packs all integrations you'd need.
+When you communicate via email, Formbricks bridges the gap between you and your readers. It packs everything you need to measure how happy users are with your newsletter content.
+</Callout>
+
+## How link prefilling and user identification maximize your insights
+
+To effectively measure the quality of your newsletter, you need:
+
+- **Survey Embed Code:** A code snippet to embed the survey in the email (provided by Formbricks)
+- **Link Prefilling**: So that if a reader clicks on one of the stars or smileys in your rating survey, the data is stored and the first question is skipped (more on this later).
+- **Dynamic User Identification:** You can append the email of the reader dynamically to the survey to automatically create a personal profile for the reader. Hence, if this person provides any other feedback in their customer lifetime, it is gathered in the person's view.
+
+Let's see how to stack these features to get what you're looking for 🤓
+
+## How to create the right survey with Formbricks
+
+1. After signing up on the Formbricks platform, you’ll be navigated to your dashboard. To create a survey for your newsletter, select the **Growth** filter and choose the “**Improve Newsletter Content**” survey template.
+
+<Image
+  src={YourSurveys}
+  alt="Formbricks growth survey templates"
+  className="w-full rounded-lg"
+/>
+
+2. You’ll be directed to a page that will be your canvas for customizing your survey questions. For your survey’s first question, you can display smileys, stars, or even numbers for your survey rating; in the image below, we used a smiley. 
+
+<Callout title="Dynamic Follow-up Questions with Logic Jumps" type="note">
+You want to ask different follow up questions based on the rating? No problem with Logic Jumps!
+</Callout>
+
+<Image
+  src={NewsletterSurvey}
+  alt="Formbricks newsletter survey editor"
+  className="w-full rounded-lg"
+/>
+
+3. When you are done customizing your survey questions, navigate to the **Settings** tab and choose the type of survey you want. Here, you have to pick Link Survey.
+
+4. After configuring the survey settings however you like, click the **Publish** button on the top right corner of the page, and a modal should pop up once this is successful.
+
+
+## Embedding the survey in your email
+<Image
+  src={NewsletterSurveyModal}
+  alt="Formbricks newsletter survey modal"
+  className="w-full rounded-lg"
+/>
+
+Since you would traditionally want to embed this survey in your email, select the **Embed Survey** card. You will be directed to another window, where you'll find **Embed in Email**.
+
+<Image
+  src={NewsletterSurveyCode}
+  alt="Formbricks newsletter survey embed code"
+  className="w-full rounded-lg"
+/>
+
+5. Finally, click the button with the “**View Embed Code**” text at the top right corner of the modal and simply copy the HTML code for your survey anywhere you want it in your newsletter. You can see the preview in the above image.
+
+So, how does this work under the hood? In the next section, we’ll see how Formbricks utilizes link prefilling to create personalized responses for you.
+
+## How to improve the analysis by identifying users
+
+Apart from the [data prefilling](https://formbricks.com/docs/link-surveys/data-prefilling) needed to store which rating a user clicked on in an email, we use Formbricks link identification.
+
+Link identification lets you link a response to a person. Whenever you set a `userId` in the URL, the Formbricks backend will create a new person profile.
+
+This is what the link looks like: 
+
+`https://formbricks.com/s/clrgp68g2569g1225h3f5ayql?rating=5&userId=johannes@formbricks.com`
+
+### When do I need identified users?
+
+This is mostly useful if you know that you will collect more feedback from this one person. For example, if you run an in-app or website survey, you can also pass the userId to Formbricks and both responses will be attributed to the same user.
+
+This obiously also works for surveys sent to the same user over the customer lifetime.
+
+In your dashboard on Formbricks, here’s how it will look:
+
+<Image
+  src={SurveyResponses}
+  alt="Formbricks personalized survey responses"
+  className="w-full rounded-lg"
+/>
+
+As Johannes completes the survey, you'll see a personalized, full response from him.
+
+## How to use Hidden Fields to attach more info to responses
+
+There might be more information you already have and want to use in the analysis of your survey results. A good way to facilitate that is using Hidden Fields.
+
+Hidden Fields - as you can tell from the name - do not appear in the survey flow. They can be filled via URL as follows:
+
+`?fieldId=Content`
+
+So for example: `?job=Founder`. Or combinbed with the rating and identification parameters:
+
+`https://formbricks.com/s/clrgp68g2569g1225h3f5ayql?rating=5&userId=johannes@formbricks.com&fieldId=Founder`
+
+As you see, the survey URL is powerful ally when it comes to getting the most out of your survey respondents 😎 
+
+<Callout title="Auto-create surveys via API" type="note">
+If you send out a lot of emails periodically, it might be worth creating your surveys automatically. Formbricks has an API for it!
+
+Going through that in detail would lead to far, but here is all the [documentation you need.](https://formbricks.com/docs/api/management/surveys#create-survey) We're also more than happy helping you set it up in our [Discord](https://formbricks.com/discord)
+</Callout>
+
+## In Conclusion
+
+Understanding what resonates with your readers is the compass that points toward growth, and so far, we’ve seen how Formbricks can help you achieve this. Formbricks not only provides actionable insights but also serves as a bridge, closing the gap between your content and reader satisfaction.
+
+Formbricks is free and easy to get started with. All you have to do is [create an account](http://formbricks.com/) and you are good to go 🚀
+
+Source for ROI figure: 
+[Omnisend Blog](https://www.omnisend.com/blog/email-marketing-roi/#:~:text=What's%20an%20average%20email%20marketing,%2440%20for%20every%20dollar%20spent.) 
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;

apps/formbricks-com/pages/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software/index.mdx

@@ -1,14 +1,11 @@
-import Image from "next/image";
-import LayoutMdx from "@/components/shared/LayoutMdx";
+import AuthorBox from "@/components/shared/AuthorBox";
 import { Callout } from "@/components/shared/Callout";
-import { Logo } from "@/components/shared/Logo";
-import TitleImage from "./title-image.png";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Image from "next/image";
+import ResponsiveEmbed from "react-responsive-embed";
 import HeaderImage from "./formbricks-logo.svg";
 import ProprietaryDependence from "./propietary-dependence.jpeg";
-import ResponsiveEmbed from "react-responsive-embed";
-import AuthorBox from "@/components/shared/AuthorBox";
-
-
+import TitleImage from "./title-image.png";
 export const meta = {
   title: "Why Open-Source + No-Code is the Future of Enterprise & Goverment Software",
   description:

apps/web/Dockerfile

@@ -23,6 +23,8 @@ ENV NEXTAUTH_SECRET=$NEXTAUTH_SECRET
 ARG ENCRYPTION_KEY
 ENV ENCRYPTION_KEY=$ENCRYPTION_KEY
 
+ARG NEXT_PUBLIC_SENTRY_DSN
+
 # Set the working directory
 WORKDIR /app
 
@@ -76,4 +78,4 @@ CMD supercronic -quiet /app/docker/cronjobs & \
     else \
         echo "ERROR: Please set a value for NEXTAUTH_SECRET in your docker compose variables!" >&2; \
         exit 1; \
-    fi
+    fi

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx

@@ -184,8 +184,8 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu
           "Response ID": response.id,
           Timestamp: response.createdAt,
           Finished: response.finished,
+          "User ID": response.person?.userId,
           "Survey ID": response.surveyId,
-          "Formbricks User ID": response.person?.id ?? "",
         };
         const metaDataKeys = extracMetadataKeys(response.meta);
         let metaData = {};
@@ -207,7 +207,19 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu
             hiddenFieldResponse[hiddenFieldId] = response.data[hiddenFieldId] ?? "";
           });
         }
-        const fileResponse = { ...basicInfo, ...metaData, ...personAttributes, ...hiddenFieldResponse };
+        const tags = { Tags: response.tags.map((tag) => tag.name).join(", ") };
+        const notes = {
+          Notes: response.notes.map((note) => `${note.user.name}: ${note.text}`).join("\n"),
+        };
+
+        const fileResponse = {
+          ...basicInfo,
+          ...metaData,
+          ...personAttributes,
+          ...hiddenFieldResponse,
+          ...tags,
+          ...notes,
+        };
         // Map each question name to its corresponding answer
         questionNames.forEach((questionName: string) => {
           const matchingQuestion = response.responses.find((question) => question.question === questionName);
@@ -232,7 +244,9 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu
         "Timestamp",
         "Finished",
         "Survey ID",
-        "Formbricks User ID",
+        "User ID",
+        "Notes",
+        "Tags",
         ...metaDataFields,
         ...questionNames,
         ...(hiddenFieldIds ?? []),

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceMultiForm.tsx

@@ -217,29 +217,44 @@ export default function MultipleChoiceMultiForm({
           {question.choices &&
             question.choices.map((choice, choiceIdx) => (
               <div key={choiceIdx} className="inline-flex w-full items-center">
-                <Input
-                  ref={choiceIdx === question.choices.length - 1 ? lastChoiceRef : null}
-                  id={choice.id}
-                  name={choice.id}
-                  value={choice.label}
-                  className={cn(choice.id === "other" && "border-dashed")}
-                  placeholder={choice.id === "other" ? "Other" : `Option ${choiceIdx + 1}`}
-                  onChange={(e) => updateChoice(choiceIdx, { label: e.target.value })}
-                  onBlur={() => {
-                    const duplicateLabel = findDuplicateLabel();
-                    if (duplicateLabel) {
-                      setisInvalidValue(duplicateLabel);
-                    } else if (findEmptyLabel()) {
-                      setisInvalidValue("");
-                    } else {
-                      setisInvalidValue(null);
+                <div className="flex w-full space-x-2">
+                  <Input
+                    ref={choiceIdx === question.choices.length - 1 ? lastChoiceRef : null}
+                    id={choice.id}
+                    name={choice.id}
+                    value={choice.label}
+                    className={cn(choice.id === "other" && "border-dashed")}
+                    placeholder={choice.id === "other" ? "Other" : `Option ${choiceIdx + 1}`}
+                    onChange={(e) => updateChoice(choiceIdx, { label: e.target.value })}
+                    onBlur={() => {
+                      const duplicateLabel = findDuplicateLabel();
+                      if (duplicateLabel) {
+                        setisInvalidValue(duplicateLabel);
+                      } else if (findEmptyLabel()) {
+                        setisInvalidValue("");
+                      } else {
+                        setisInvalidValue(null);
+                      }
+                    }}
+                    isInvalid={
+                      (isInvalidValue === "" && choice.label.trim() === "") ||
+                      (isInvalidValue !== null && choice.label.trim() === isInvalidValue.trim())
                     }
-                  }}
-                  isInvalid={
-                    (isInvalidValue === "" && choice.label.trim() === "") ||
-                    (isInvalidValue !== null && choice.label.trim() === isInvalidValue.trim())
-                  }
-                />
+                  />
+                  {choice.id === "other" && (
+                    <Input
+                      id="otherInputLabel"
+                      name="otherInputLabel"
+                      value={question.otherOptionPlaceholder ?? "Please specify"}
+                      placeholder={question.otherOptionPlaceholder ?? "Please specify"}
+                      className={cn(choice.id === "other" && "border-dashed")}
+                      onChange={(e) => {
+                        if (e.target.value.trim() == "") e.target.value = "";
+                        updateQuestion(questionIdx, { otherOptionPlaceholder: e.target.value });
+                      }}
+                    />
+                  )}
+                </div>
                 {question.choices && question.choices.length > 2 && (
                   <TrashIcon
                     className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceSingleForm.tsx

@@ -216,30 +216,45 @@ export default function MultipleChoiceSingleForm({
         <div className="mt-2 space-y-2" id="choices">
           {question.choices &&
             question.choices.map((choice, choiceIdx) => (
-              <div key={choiceIdx} className="inline-flex w-full items-center">
-                <Input
-                  ref={choiceIdx === question.choices.length - 1 ? lastChoiceRef : null}
-                  id={choice.id}
-                  name={choice.id}
-                  value={choice.label}
-                  className={cn(choice.id === "other" && "border-dashed")}
-                  placeholder={choice.id === "other" ? "Other" : `Option ${choiceIdx + 1}`}
-                  onBlur={() => {
-                    const duplicateLabel = findDuplicateLabel();
-                    if (duplicateLabel) {
-                      setisInvalidValue(duplicateLabel);
-                    } else if (findEmptyLabel()) {
-                      setisInvalidValue("");
-                    } else {
-                      setisInvalidValue(null);
+              <div key={choiceIdx} className="flex w-full items-center">
+                <div className="flex w-full space-x-2">
+                  <Input
+                    ref={choiceIdx === question.choices.length - 1 ? lastChoiceRef : null}
+                    id={choice.id}
+                    name={choice.id}
+                    value={choice.label}
+                    className={cn(choice.id === "other" && "border-dashed")}
+                    placeholder={choice.id === "other" ? "Other" : `Option ${choiceIdx + 1}`}
+                    onBlur={() => {
+                      const duplicateLabel = findDuplicateLabel();
+                      if (duplicateLabel) {
+                        setisInvalidValue(duplicateLabel);
+                      } else if (findEmptyLabel()) {
+                        setisInvalidValue("");
+                      } else {
+                        setisInvalidValue(null);
+                      }
+                    }}
+                    onChange={(e) => updateChoice(choiceIdx, { label: e.target.value })}
+                    isInvalid={
+                      (isInvalidValue === "" && choice.label.trim() === "") ||
+                      (isInvalidValue !== null && choice.label.trim() === isInvalidValue.trim())
                     }
-                  }}
-                  onChange={(e) => updateChoice(choiceIdx, { label: e.target.value })}
-                  isInvalid={
-                    (isInvalidValue === "" && choice.label.trim() === "") ||
-                    (isInvalidValue !== null && choice.label.trim() === isInvalidValue.trim())
-                  }
-                />
+                  />
+                  {choice.id === "other" && (
+                    <Input
+                      id="otherInputLabel"
+                      name="otherInputLabel"
+                      value={question.otherOptionPlaceholder ?? "Please specify"}
+                      placeholder={question.otherOptionPlaceholder ?? "Please specify"}
+                      className={cn(choice.id === "other" && "border-dashed")}
+                      onChange={(e) => {
+                        if (e.target.value.trim() == "") e.target.value = "";
+                        updateQuestion(questionIdx, { otherOptionPlaceholder: e.target.value });
+                      }}
+                    />
+                  )}
+                </div>
                 {question.choices && question.choices.length > 2 && (
                   <TrashIcon
                     className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/WhenToSendCard.tsx

@@ -40,9 +40,11 @@ export default function WhenToSendCard({
   const [isAddEventModalOpen, setAddEventModalOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
   const [actionClasses, setActionClasses] = useState<TActionClass[]>(propActionClasses);
+  const [randomizerToggle, setRandomizerToggle] = useState(localSurvey.displayPercentage ? true : false);
   const { isViewer } = getAccessFlags(membershipRole);
 
   const autoClose = localSurvey.autoClose !== null;
+  const delay = localSurvey.delay !== 0;
 
   const addTriggerEvent = useCallback(() => {
     const updatedSurvey = { ...localSurvey };
@@ -71,7 +73,7 @@ export default function WhenToSendCard({
     setLocalSurvey(updatedSurvey);
   };
 
-  const handleCheckMark = () => {
+  const handleAutoCloseToggle = () => {
     if (autoClose) {
       const updatedSurvey = { ...localSurvey, autoClose: null };
       setLocalSurvey(updatedSurvey);
@@ -81,6 +83,27 @@ export default function WhenToSendCard({
     }
   };
 
+  const handleDelayToggle = () => {
+    if (delay) {
+      const updatedSurvey = { ...localSurvey, delay: 0 };
+      setLocalSurvey(updatedSurvey);
+    } else {
+      const updatedSurvey = { ...localSurvey, delay: 5 };
+      setLocalSurvey(updatedSurvey);
+    }
+  };
+
+  const handleDisplayPercentageToggle = () => {
+    if (localSurvey.displayPercentage) {
+      const updatedSurvey = { ...localSurvey, displayPercentage: null };
+      setLocalSurvey(updatedSurvey);
+    } else {
+      const updatedSurvey = { ...localSurvey, displayPercentage: 50 };
+      setLocalSurvey(updatedSurvey);
+    }
+    setRandomizerToggle(!randomizerToggle);
+  };
+
   const handleInputSeconds = (e: any) => {
     let value = parseInt(e.target.value);
 
@@ -96,6 +119,11 @@ export default function WhenToSendCard({
     setLocalSurvey(updatedSurvey);
   };
 
+  const handleRandomizerInput = (e) => {
+    const updatedSurvey = { ...localSurvey, displayPercentage: parseInt(e.target.value) };
+    setLocalSurvey(updatedSurvey);
+  };
+
   useEffect(() => {
     if (isAddEventModalOpen) return;
     if (activeIndex !== null) {
@@ -155,8 +183,9 @@ export default function WhenToSendCard({
             </div>
           </div>
         </Collapsible.CollapsibleTrigger>
-        <Collapsible.CollapsibleContent className="">
-          <hr className="py-1 text-slate-600" />
+        <hr className="py-1 text-slate-600" />
+
+        <Collapsible.CollapsibleContent className="p-3">
           {!isAddEventModalOpen &&
             localSurvey.triggers?.map((triggerEventClass, idx) => (
               <div className="mt-2" key={idx}>
@@ -209,7 +238,14 @@ export default function WhenToSendCard({
             </Button>
           </div>
 
-          <div className="ml-2 flex items-center space-x-1 px-4 pb-4">
+          <div className="ml-2 flex items-center space-x-1 px-4 pb-4"></div>
+          <AdvancedOptionToggle
+            htmlId="delay"
+            isChecked={delay}
+            onToggle={handleDelayToggle}
+            title="Add delay before showing survey"
+            description="Wait a few seconds after the trigger before showing the survey"
+            childBorder={true}>
             <label
               htmlFor="triggerDelay"
               className="flex w-full cursor-pointer items-center rounded-lg  border bg-slate-50 p-4">
@@ -228,12 +264,11 @@ export default function WhenToSendCard({
                 </p>
               </div>
             </label>
-          </div>
-
+          </AdvancedOptionToggle>
           <AdvancedOptionToggle
             htmlId="autoClose"
             isChecked={autoClose}
-            onToggle={handleCheckMark}
+            onToggle={handleAutoCloseToggle}
             title="Auto close on inactivity"
             description="Automatically close the survey if the user does not respond after certain number of seconds"
             childBorder={true}>
@@ -252,6 +287,30 @@ export default function WhenToSendCard({
               </p>
             </label>
           </AdvancedOptionToggle>
+          <AdvancedOptionToggle
+            htmlId="randomizer"
+            isChecked={randomizerToggle}
+            onToggle={handleDisplayPercentageToggle}
+            title="Show survey to % of users"
+            description="Only display the survey to a subset of the users"
+            childBorder={true}>
+            <div className="w-full">
+              <div className="flex flex-col justify-center rounded-lg border bg-slate-50 p-6">
+                <h3 className="mb-4 text-sm font-semibold text-slate-700">
+                  Show to {localSurvey.displayPercentage}% of targeted users
+                </h3>
+                <input
+                  id="small-range"
+                  type="range"
+                  min="1"
+                  max="100"
+                  value={localSurvey.displayPercentage ?? 50}
+                  onChange={handleRandomizerInput}
+                  className="range-sm mb-6 h-1 w-full cursor-pointer appearance-none rounded-lg bg-slate-200 dark:bg-slate-700"
+                />
+              </div>
+            </div>
+          </AdvancedOptionToggle>
         </Collapsible.CollapsibleContent>
       </Collapsible.Root>
       <AddNoCodeActionModal

apps/web/app/(app)/environments/[environmentId]/surveys/templates/templates.ts

@@ -2200,7 +2200,6 @@ export const templates: TTemplate[] = [
   },
   {
     name: "Improve Newsletter Content",
-
     category: "Growth",
     objectives: ["increase_conversion", "sharpen_marketing_messaging"],
     description: "Find out how your subscribers like your newsletter content.",
@@ -2522,6 +2521,7 @@ export const minimalSurvey: TSurvey = {
     enabled: false,
   },
   delay: 0, // No delay
+  displayPercentage: null,
   autoComplete: null,
   closeOnDate: null,
   surveyClosedMessage: {

apps/web/app/(app)/share/[sharingKey]/(analysis)/responses/components/ResponsePage.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
-import CustomFilter from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
 import SurveyResultsTabs from "@/app/(app)/share/[sharingKey]/(analysis)/components/SurveyResultsTabs";
 import ResponseTimeline from "@/app/(app)/share/[sharingKey]/(analysis)/responses/components/ResponseTimeline";
+import CustomFilter from "@/app/(app)/share/[sharingKey]/components/CustomFilter";
 import SummaryHeader from "@/app/(app)/share/[sharingKey]/components/SummaryHeader";
 import { getFilterResponses } from "@/app/lib/surveys/surveys";
 import { useSearchParams } from "next/navigation";

apps/web/app/(app)/share/[sharingKey]/(analysis)/summary/components/SummaryPage.tsx

@@ -4,8 +4,8 @@ import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/comp
 import SummaryDropOffs from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs";
 import SummaryList from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList";
 import SummaryMetadata from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata";
-import CustomFilter from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
 import SurveyResultsTabs from "@/app/(app)/share/[sharingKey]/(analysis)/components/SurveyResultsTabs";
+import CustomFilter from "@/app/(app)/share/[sharingKey]/components/CustomFilter";
 import SummaryHeader from "@/app/(app)/share/[sharingKey]/components/SummaryHeader";
 import { getFilterResponses } from "@/app/lib/surveys/surveys";
 import { useSearchParams } from "next/navigation";

apps/web/app/(app)/share/[sharingKey]/components/CustomFilter.tsx

@@ -168,8 +168,8 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu
           "Response ID": response.id,
           Timestamp: response.createdAt,
           Finished: response.finished,
+          "User ID": response.person?.userId,
           "Survey ID": response.surveyId,
-          "Formbricks User ID": response.person?.id ?? "",
         };
         const metaDataKeys = extracMetadataKeys(response.meta);
         let metaData = {};
@@ -216,7 +216,7 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu
         "Timestamp",
         "Finished",
         "Survey ID",
-        "Formbricks User ID",
+        "User ID",
         ...metaDataFields,
         ...questionNames,
         ...(hiddenFieldIds ?? []),

apps/web/app/api/v1/users/route.ts

@@ -2,11 +2,7 @@ import { NextResponse } from "next/server";
 
 import { prisma } from "@formbricks/database";
 import { EMAIL_VERIFICATION_DISABLED, INVITE_DISABLED, SIGNUP_ENABLED } from "@formbricks/lib/constants";
-import {
-  sendGettingStartedEmail,
-  sendInviteAcceptedEmail,
-  sendVerificationEmail,
-} from "@formbricks/lib/emails/emails";
+import { sendInviteAcceptedEmail, sendVerificationEmail } from "@formbricks/lib/emails/emails";
 import { env } from "@formbricks/lib/env.mjs";
 import { deleteInvite } from "@formbricks/lib/invite/service";
 import { verifyInviteToken } from "@formbricks/lib/jwt";
@@ -54,8 +50,6 @@ export async function POST(request: Request) {
 
       if (!EMAIL_VERIFICATION_DISABLED) {
         await sendVerificationEmail(user);
-      } else {
-        await sendGettingStartedEmail(user);
       }
 
       await sendInviteAcceptedEmail(invite.creator.name, user.name, invite.creator.email);
@@ -87,9 +81,8 @@ export async function POST(request: Request) {
     // send verification email amd return user
     if (!EMAIL_VERIFICATION_DISABLED) {
       await sendVerificationEmail(user);
-    } else {
-      await sendGettingStartedEmail(user);
     }
+
     return NextResponse.json(user);
   } catch (e) {
     if (e.code === "P2002") {

apps/web/app/globals.css

@@ -111,3 +111,12 @@ input[type="search"]::-ms-clear {
 input[type="search"]::-ms-reveal {
   display: none;
 }
+
+
+input[type='range']::-webkit-slider-thumb {
+  background: #0f172a;
+  height: 20px;
+  width: 20px; 
+  border-radius: 50%;
+  -webkit-appearance: none;
+}

apps/web/app/page.tsx

@@ -15,7 +15,11 @@ export default async function Home() {
     redirect("/auth/login");
   }
 
-  if (!ONBOARDING_DISABLED && session?.user && !session?.user?.onboardingCompleted) {
+  if (!session?.user) {
+    return <ClientLogout />;
+  }
+
+  if (!ONBOARDING_DISABLED && !session.user.onboardingCompleted) {
     return redirect(`/onboarding`);
   }
 

apps/web/app/s/[surveyId]/components/LegalFooter.tsx

@@ -27,7 +27,7 @@ export default function LegalFooter({
 
   return (
     <div
-      className={`fixed bottom-0 h-12 w-full`}
+      className={`absolute bottom-0 h-12 w-full`}
       style={{
         backgroundColor: `${bgColor}`,
       }}>

apps/web/app/s/[surveyId]/components/LinkSurvey.tsx

@@ -135,7 +135,7 @@ export default function LinkSurvey({
 
   return (
     <>
-      <ContentWrapper className="h-full w-full p-0 md:max-w-md">
+      <ContentWrapper className="my-12 h-full w-full p-0 md:max-w-md">
         {isPreview && (
           <div className="fixed left-0 top-0 flex w-full items-center justify-between bg-slate-600 p-2 px-4 text-center text-sm text-white shadow-sm">
             <div />

apps/web/app/s/[surveyId]/page.tsx

@@ -195,7 +195,7 @@ export default async function LinkSurveyPage({ params, searchParams }: LinkSurve
   }
 
   return survey ? (
-    <div>
+    <div className="relative">
       <MediaBackground survey={survey}>
         <LinkSurvey
           survey={survey}

megaprompt.md

@@ -1,43 +0,0 @@
-Forget all previous instructions. You are the coding assistant "Formbricks Assistant".
-
-- You help programmers find a solution to their questions and coding challenges. You give very brief and concise answers unless I the user prompt you to elaborate.
-- Formbricks is the open-source go-to solution for in-product micro-surveys that is supercharging our users product experience!
-- Formbricks uses Typescript, Next.Js, Next-auth, Prisma, TailwindCss, Radix UI
-- When you are asked to generate documentation please have a playful but succinct writing style and return everything in escaped markdown.
-- This is the prisma schema:
-  enum PipelineTriggers { responseCreated, responseUpdated, responseFinished }
-  model Webhook { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), url String, environment Environment @relation(fields: [environmentId], references: [id], onDelete: Cascade), environmentId String, triggers PipelineTriggers[] }
-  model Attribute { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), attributeClass AttributeClass @relation(fields: [attributeClassId], references: [id], onDelete: Cascade), attributeClassId String, person Person @relation(fields: [personId], references: [id], onDelete: Cascade), personId String, value String, @@unique([attributeClassId, personId]) }
-  enum AttributeType { code, noCode, automatic }  
-  model AttributeClass { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), name String, description String?, type AttributeType, environment Environment @relation(fields: [environmentId], references: [id], onDelete: Cascade), environmentId String, attributes Attribute[], attributeFilters SurveyAttributeFilter[], @@unique([name, environmentId]) }
-  model Person { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), environment Environment @relation(fields: [environmentId], references: [id], onDelete: Cascade), environmentId String, responses Response[], sessions Session[], attributes Attribute[], displays Display[] }
-  model Response { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), finished Boolean @default(false), survey Survey @relation(fields: [surveyId], references: [id], onDelete: Cascade), surveyId String, person Person? @relation(fields: [personId], references: [id], onDelete: Cascade), personId String?, data Json @default("{}"), meta Json @default("{}") }
-  enum SurveyStatus { draft, inProgress, paused, completed, archived }
-  enum DisplayStatus { seen, responded }
-  model Display { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), survey Survey @relation(fields: [surveyId], references: [id], onDelete: Cascade), surveyId String, person Person? @relation(fields: [personId], references: [id], onDelete: Cascade), personId String?, status DisplayStatus @default(seen) }
-  model SurveyTrigger { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), survey Survey @relation(fields: [surveyId], references: [id], onDelete: Cascade), surveyId String, eventClass EventClass @relation(fields: [eventClassId], references: [id], onDelete: Cascade), eventClassId String, @@unique([surveyId, eventClassId]) }
-  enum SurveyAttributeFilterCondition { equals, notEquals }
-  model SurveyAttributeFilter { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), attributeClass AttributeClass @relation(fields: [attributeClassId], references: [id], onDelete: Cascade), attributeClassId String, survey Survey @relation(fields: [surveyId], references: [id], onDelete: Cascade), surveyId String, condition SurveyAttributeFilterCondition, value String, @@unique([surveyId, attributeClassId]) }
-  enum SurveyType { email, link, mobile, web }
-  enum displayOptions { displayOnce, displayMultiple, respondMultiple }
-  model Survey { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), name String, type SurveyType @default(web), environment Environment @relation(fields: [environmentId], references: [id], onDelete: Cascade), environmentId String, status SurveyStatus @default(draft), questions Json @default("[]"), thankYouCard Json @default("{"enabled": false}"), responses Response[], displayOption displayOptions @default(displayOnce), recontactDays Int?, triggers SurveyTrigger[], attributeFilters SurveyAttributeFilter[], displays Display[], autoClose Int?, delay Int @default(0) }
-  model Event { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), eventClass EventClass? @relation(fields: [eventClassId], references: [id]), eventClassId String?, session Session @relation(fields: [sessionId], references: [id], onDelete: Cascade), sessionId String, properties Json @default("{}") }
-  enum EventType { code, noCode, automatic }
-  model EventClass { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), name String, description String?, type EventType, events Event[], noCodeConfig Json?, environment Environment @relation(fields: [environmentId], references: [id], onDelete: Cascade), environmentId String, surveys SurveyTrigger[], @@unique([name, environmentId]) }
-  model Session { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), person Person @relation(fields: [personId], references: [id], onDelete: Cascade), personId String, events Event[] }
-  enum EnvironmentType { production, development }
-  model Environment { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), type EnvironmentType, product Product @relation(fields: [productId], references: [id], onDelete: Cascade), productId String, widgetSetupCompleted Boolean @default(false), surveys Survey[], people Person[], eventClasses EventClass[], attributeClasses AttributeClass[], apiKeys ApiKey[], webhooks Webhook[] }
-  model Product { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), name String, team Team @relation(fields: [teamId], references: [id], onDelete: Cascade), teamId String, environments Environment[], brandColor String @default("#64748b"), recontactDays Int @default(7), formbricksSignature Boolean @default(true) }
-  enum Plan { free, pro }
-  model Team { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), name String, memberships Membership[], products Product[], plan Plan @default(free), stripeCustomerId String?, invites Invite[] }
-  enum MembershipRole { owner, admin, editor, developer, viewer }
-  model Membership { team Team @relation(fields: [teamId], references: [id], onDelete: Cascade), teamId String, user User @relation(fields: [userId], references: [id], onDelete: Cascade), userId String, accepted Boolean @default(false), role MembershipRole, @@id([userId, teamId]) }
-  model Invite { id String @id @default(uuid()), email String, name String?, team Team @relation(fields: [teamId], references: [id], onDelete: Cascade), teamId String, creator User @relation("inviteCreatedBy", fields: [creatorId], references: [id]), creatorId String, acceptor User? @relation("inviteAcceptedBy", fields: [acceptorId], references: [id], onDelete: Cascade), acceptorId String?, accepted Boolean @default(false), createdAt DateTime @default(now()), expiresAt DateTime, role MembershipRole @default(admin), @@index([email, teamId], name: "email_teamId_unique") }
-  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 }
-  enum IdentityProvider { email, github, google }
-  model Account { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), user User? @relation(fields: [userId], references: [id], onDelete: Cascade), userId String, type String, provider String, providerAccountId String, access_token String? @db.Text, refresh_token String? @db.Text, expires_at Int?, token_type String?, scope String?, id_token String? @db.Text, session_state String?, @@unique([provider, providerAccountId]) }
-  enum Role { project_manager, engineer, founder, marketing_specialist, other }
-  enum Objective { increase_conversion, improve_user_retention, increase_user_adoption, sharpen_marketing_messaging, support_sales, other }
-  enum Intention { survey_user_segments, survey_at_specific_point_in_user_journey, enrich_customer_profiles, collect_all_user_feedback_on_one_platform, other }
-  model User { id String @id @default(cuid()), createdAt DateTime @default(now()) @map(name: "created_at"), updatedAt DateTime @updatedAt @map(name: "updated_at"), name String?, email String @unique, emailVerified DateTime? @map(name: "email_verified"), password String?, onboardingCompleted Boolean @default(false), identityProvider IdentityProvider @default(email), identityProviderAccountId String?, memberships Membership[], accounts Account[], groupId String?, invitesCreated Invite[] @relation("inviteCreatedBy"), invitesAccepted Invite[] @relation("inviteAcceptedBy"), role Role?, notificationSettings Json @default("{}") }
-  Please respond with “Formbricks Assistant is now ready! How can I help?” when you read everything.

packages/database/migrations/20240129054228_add_display_percentage_to_survey/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Survey" ADD COLUMN     "displayPercentage" INTEGER;

packages/database/schema.prisma

@@ -300,6 +300,7 @@ model Survey {
   verifyEmail       Json?
   pin               String?
   resultShareKey    String? @unique
+  displayPercentage Int?
 
   @@index([environmentId])
 }

packages/js/src/lib/actions.ts

@@ -12,6 +12,11 @@ const config = Config.getInstance();
 
 const intentsToNotCreateOnApp = ["Exit Intent (Desktop)", "50% Scroll"];
 
+const shouldDisplayBasedOnPercentage = (displayPercentage: number) => {
+  const randomNum = Math.floor(Math.random() * 100) + 1;
+  return randomNum <= displayPercentage;
+};
+
 export const trackAction = async (
   name: string,
   properties: TJsActionInput["properties"] = {}
@@ -64,6 +69,14 @@ export const trackAction = async (
 
 export const triggerSurvey = async (actionName: string, activeSurveys: TSurvey[]): Promise<void> => {
   for (const survey of activeSurveys) {
+    // Check if the survey should be displayed based on displayPercentage
+    if (survey.displayPercentage) {
+      const shouldDisplaySurvey = shouldDisplayBasedOnPercentage(survey.displayPercentage);
+      if (!shouldDisplaySurvey) {
+        logger.debug("Survey display skipped based on displayPercentage.");
+        continue;
+      }
+    }
     for (const trigger of survey.triggers) {
       if (trigger === actionName) {
         logger.debug(`Formbricks: survey ${survey.id} triggered by action "${actionName}"`);

packages/lib/authOptions.ts

@@ -10,7 +10,6 @@ import { prisma } from "@formbricks/database";
 import { createAccount } from "./account/service";
 import { verifyPassword } from "./auth/util";
 import { EMAIL_VERIFICATION_DISABLED } from "./constants";
-import { sendGettingStartedEmail } from "./emails/emails";
 import { env } from "./env.mjs";
 import { verifyToken } from "./jwt";
 import { createMembership } from "./membership/service";
@@ -114,7 +113,6 @@ export const authOptions: NextAuthOptions = {
         }
 
         user = await updateUser(user.id, { emailVerified: new Date() });
-        await sendGettingStartedEmail(user);
 
         return user;
       },
@@ -223,7 +221,7 @@ export const authOptions: NextAuthOptions = {
           identityProvider: provider,
           identityProviderAccountId: account.providerAccountId,
         });
-        await sendGettingStartedEmail(userProfile);
+
         // Default team assignment if env variable is set
         if (env.DEFAULT_TEAM_ID && env.DEFAULT_TEAM_ID.length > 0) {
           // check if team exists

packages/lib/customerio.ts

@@ -0,0 +1,27 @@
+import { TUser } from "@formbricks/types/user";
+
+import { env } from "./env.mjs";
+
+export const createCustomerIoCustomer = async (user: TUser) => {
+  if (!env.CUSTOMER_IO_SITE_ID || !env.CUSTOMER_IO_API_KEY) {
+    return;
+  }
+  try {
+    const auth = Buffer.from(`${env.CUSTOMER_IO_SITE_ID}:${env.CUSTOMER_IO_API_KEY}`).toString("base64");
+    const res = await fetch(`https://track-eu.customer.io/api/v1/customers/${user.id}`, {
+      method: "PUT",
+      headers: {
+        Authorization: `Basic ${auth}`,
+      },
+      body: JSON.stringify({
+        id: user.id,
+        email: user.email,
+      }),
+    });
+    if (res.status !== 200) {
+      console.log("Error sending user to CustomerIO:", await res.text());
+    }
+  } catch (error) {
+    console.log("error sending user to CustomerIO:", error);
+  }
+};

packages/lib/emails/emails.ts

@@ -33,10 +33,6 @@ interface TEmailUser {
   email: string;
 }
 
-interface TEmailUserWithName extends TEmailUser {
-  name: string | null;
-}
-
 export interface LinkSurveyEmailData {
   surveyId: string;
   email: string;
@@ -96,34 +92,6 @@ export const sendVerificationEmail = async (user: TEmailUser) => {
   });
 };
 
-export const sendGettingStartedEmail = async (user: TEmailUserWithName) => {
-  await sendEmail({
-    to: user.email,
-    subject: "Get started with Formbricks 🤸",
-    html: withEmailTemplate(`
-    <h1 style="text-align: center; line-height: 1.2; padding-top: 16px; padding-bottom:8px;">Turn customer insights into irresistible experiences</h1>
-    <a href="https://app.formbricks.com?utm_source=drip_campaign&utm_medium=email&utm_campaign=first_drip_mail&utm_content=top_image"><img src="https://formbricks-cdn.s3.eu-central-1.amazonaws.com/getting-started-with-formbricks-v5.png" alt="Formbricks can do it all" /></a>
-    <h3 style="text-align:center;">Welcome to Formbricks! 🤗</h3>
-    <p style="text-align:center;">We're the fastest growing Experience Management platform! Gracefully collect feedback without survey fatigue. Are you ready?</p>
-    <div style="text-align:center; margin-bottom:72px;">
-    <a class="button" href="https://app.formbricks.com?utm_source=drip_campaign&utm_medium=email&utm_campaign=first_drip_mail&utm_content=first_button">Create your survey</a><br/>
-    </div>
-    <a href="https://app.formbricks.com?utm_source=drip_campaign&utm_medium=email&utm_campaign=first_drip_mail&utm_content=second_image"><img style="border-radius:16px; box-shadow: 10px 10px 57px -21px rgba(71,85,105,0.58);" src="https://formbricks-cdn.s3.eu-central-1.amazonaws.com/getting-started-header-v4.png" alt="Formbricks can do it all"></a>
-    <h2 style="margin-top:32px;">Collect feedback everywhere!</h2>
-    <p>Formbricks is very versatile. Run:</p>
-    <ul>
-        <li><b>Website Surveys</b> like HotJar Ask</li>
-        <li><b>In-App Surveys</b> like Sprig</li>
-        <li><b>Link Surveys</b> like Typeform</li>
-        <li><b>Headless Surveys</b> via API</li>
-    </ul>
-    <p>All on one, open source platform ✅</p>
-    <a class="button" style="margin-bottom:12px; margin-top:0px;" href="https://app.formbricks.com?utm_source=drip_campaign&utm_medium=email&utm_campaign=first_drip_mail&utm_content=second_button">Create your survey</a><br/>
-    <p style="margin-bottom:0px; margin-top:40px; text-align:center;"><b>Life is short, craft something irresistible!</b><br/>The Formbricks Team 🤍</p>   
-    `),
-  });
-};
-
 export const sendForgotPasswordEmail = async (user: TEmailUser) => {
   const token = createToken(user.id, user.email, {
     expiresIn: "1d",

packages/lib/env.mjs

@@ -7,6 +7,9 @@ export const env = createEnv({
    * Will throw if you access these variables on the client.
    */
   server: {
+    CUSTOMER_IO_API_KEY: z.string().optional(),
+    CUSTOMER_IO_SITE_ID: z.string().optional(),
+    NEXT_PUBLIC_POSTHOG_API_HOST: z.string().optional(),
     WEBAPP_URL: z.string().url().optional(),
     DATABASE_URL: z.string().url(),
     ENCRYPTION_KEY: z.string().length(64).or(z.string().length(32)),
@@ -96,6 +99,8 @@ export const env = createEnv({
    * 💡 You'll get type errors if not all variables from `server` & `client` are included here.
    */
   runtimeEnv: {
+    CUSTOMER_IO_API_KEY: process.env.CUSTOMER_IO_API_KEY,
+    CUSTOMER_IO_SITE_ID: process.env.CUSTOMER_IO_SITE_ID,
     WEBAPP_URL: process.env.WEBAPP_URL,
     DATABASE_URL: process.env.DATABASE_URL,
     ENCRYPTION_KEY: process.env.ENCRYPTION_KEY,
@@ -146,7 +151,7 @@ export const env = createEnv({
     AZUREAD_CLIENT_ID: process.env.AZUREAD_CLIENT_ID,
     AZUREAD_CLIENT_SECRET: process.env.AZUREAD_CLIENT_SECRET,
     AZUREAD_TENANT_ID: process.env.AZUREAD_TENANT_ID,
-    AIR_TABLE_CLIENT_ID: process.env.AIR_TABLE_CLIENT_ID,
+    AIRTABLE_CLIENT_ID: process.env.AIRTABLE_CLIENT_ID,
     DEFAULT_TEAM_ID: process.env.DEFAULT_TEAM_ID,
     DEFAULT_TEAM_ROLE: process.env.DEFAULT_TEAM_ROLE,
     ONBOARDING_DISABLED: process.env.ONBOARDING_DISABLED,

packages/lib/survey/service.ts

@@ -41,6 +41,7 @@ export const selectSurvey = {
   autoClose: true,
   closeOnDate: true,
   delay: true,
+  displayPercentage: true,
   autoComplete: true,
   verifyEmail: true,
   redirectUrl: true,

packages/lib/survey/tests/survey.mock.ts

@@ -135,6 +135,7 @@ export const mockSurveyOutput: SurveyMock = {
   productOverwrites: null,
   singleUse: null,
   styling: null,
+  displayPercentage: null,
   pin: null,
   resultShareKey: null,
   ...baseSurveyProperties,
@@ -157,6 +158,7 @@ export const updateSurveyInput: TSurvey = {
   productOverwrites: null,
   styling: null,
   singleUse: null,
+  displayPercentage: null,
   pin: null,
   resultShareKey: null,
   ...commonMockProperties,

packages/lib/user/service.ts

@@ -11,6 +11,7 @@ import { TMembership } from "@formbricks/types/memberships";
 import { TUser, TUserCreateInput, TUserUpdateInput, ZUser, ZUserUpdateInput } from "@formbricks/types/user";
 
 import { SERVICES_REVALIDATION_INTERVAL } from "../constants";
+import { createCustomerIoCustomer } from "../customerio";
 import { updateMembership } from "../membership/service";
 import { deleteTeam } from "../team/service";
 import { formatDateFields } from "../utils/datetime";
@@ -171,6 +172,9 @@ export const createUser = async (data: TUserCreateInput): Promise<TUser> => {
     id: user.id,
   });
 
+  // send new user customer.io to customer.io
+  createCustomerIoCustomer(user);
+
   return user;
 };
 

packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx

@@ -231,7 +231,7 @@ export default function MultipleChoiceMultiQuestion({
                         }, 100);
                       }
                     }}
-                    placeholder="Please specify"
+                    placeholder={question.otherOptionPlaceholder ?? "Please specify"}
                     className="placeholder:text-placeholder border-border bg-survey-bg text-heading focus:ring-focus mt-3 flex h-10 w-full rounded-md border px-3 py-2 text-sm  focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     required={question.required}
                     aria-labelledby={`${otherOption.id}-label`}

packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx

@@ -182,7 +182,7 @@ export default function MultipleChoiceSingleQuestion({
                         }, 100);
                       }
                     }}
-                    placeholder="Please specify"
+                    placeholder={question.otherOptionPlaceholder ?? "Please specify"}
                     className="placeholder:text-placeholder border-border bg-survey-bg text-heading focus:ring-focus mt-3 flex h-10 w-full rounded-md border px-3 py-2 text-sm  focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     required={question.required}
                     aria-labelledby={`${otherOption.id}-label`}

packages/surveys/src/components/questions/OpenTextQuestion.tsx

@@ -94,7 +94,7 @@ export default function OpenTextQuestion({
                 onSubmit({ [question.id]: value, inputType: question.inputType }, updatedttc);
               }
             }}
-            pattern={question.inputType === "phone" ? "[+][0-9 ]+" : ".*"}
+            pattern={question.inputType === "phone" ? "[0-9+ ]+" : ".*"}
             title={question.inputType === "phone" ? "Enter a valid phone number" : undefined}
           />
         ) : (

packages/surveys/src/components/questions/RatingQuestion.tsx

@@ -126,7 +126,9 @@ export default function RatingQuestion({
                     }}
                     className={cn(
                       "flex h-full w-full justify-center focus:outline-none",
-                      number <= hoveredNumber ? "text-amber-400" : "text-slate-300",
+                      number <= hoveredNumber || number <= (value as number)
+                        ? "text-amber-400"
+                        : "text-slate-300",
                       "hover:text-amber-400"
                     )}
                     onFocus={() => setHoveredNumber(number)}

packages/types/surveys.ts

@@ -277,6 +277,7 @@ export const ZSurveyMultipleChoiceSingleQuestion = ZSurveyQuestionBase.extend({
   choices: z.array(ZSurveyChoice),
   logic: z.array(ZSurveyMultipleChoiceSingleLogic).optional(),
   shuffleOption: z.enum(["none", "all", "exceptLast"]).optional(),
+  otherOptionPlaceholder: z.string().optional(),
 });
 
 export type TSurveyMultipleChoiceSingleQuestion = z.infer<typeof ZSurveyMultipleChoiceSingleQuestion>;
@@ -286,6 +287,7 @@ export const ZSurveyMultipleChoiceMultiQuestion = ZSurveyQuestionBase.extend({
   choices: z.array(ZSurveyChoice),
   logic: z.array(ZSurveyMultipleChoiceMultiLogic).optional(),
   shuffleOption: z.enum(["none", "all", "exceptLast"]).optional(),
+  otherOptionPlaceholder: z.string().optional(),
 });
 
 export type TSurveyMultipleChoiceMultiQuestion = z.infer<typeof ZSurveyMultipleChoiceMultiQuestion>;
@@ -435,6 +437,7 @@ export const ZSurvey = z.object({
   verifyEmail: ZSurveyVerifyEmail.nullable(),
   pin: z.string().nullable().optional(),
   resultShareKey: z.string().nullable(),
+  displayPercentage: z.number().min(1).max(100).nullable(),
 });
 
 export const ZSurveyInput = z.object({

turbo.json

@@ -66,6 +66,8 @@
         "DEFAULT_TEAM_ROLE",
         "ONBOARDING_DISABLED",
         "CRON_SECRET",
+        "CUSTOMER_IO_API_KEY",
+        "CUSTOMER_IO_SITE_ID",
         "DEBUG",
         "EMAIL_VERIFICATION_DISABLED",
         "ENCRYPTION_KEY",