feat: Add Make.com integration (#628)

* added documentation for make.com integration

* ran pnpm format

* update wording in docs

* updated docs for make integration

* updated connect link

---------

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

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

@@ -0,0 +1,136 @@
+import Image from "next/image";
+
+import UpdateQuestionId from "./update-question-id.webp";
+import DuplicateSurvey from "./duplicate-survey.webp";
+import CreateNewScenario from "./create-new-scenario.webp";
+import SearchFormbricks from "./search-formbricks.webp";
+import SelectTriggers from "./select-trigger.webp";
+import CreateWebhook from "./create-webhook.webp";
+import EnterApiKey from "./enter-api-key.webp";
+import SelectSurvey from "./select-survey.webp";
+import SubmitTestResponse from "./submit-test-response.webp";
+import AddModule from "./add-module.webp";
+import SelectFields from "./select-fields.webp";
+import Result from "./result.webp";
+import SelectAction from "./select-action.webp";
+
+export const meta = {
+  title: "Make.com Setup",
+  description: "Wire up Formbricks with Make and 1000+ other apps",
+};
+
+#### Integrations
+
+# Make.com Setup
+
+Make is a powerful tool to send information between Formbricks and thousands of apps. Here's how to set it up.
+
+<Note>
+  ### Nail down your survey first ? 
+  Any changes in the survey cause additional work in the _Scenario_. It
+  makes sense to first settle on the survey you want to run and then get to setting up Make.
+</Note>
+
+## Step 1: Setup your survey incl. `questionId` for every question
+
+Set up the `questionId`s of your survey questions before publishing.
+
+<Image
+  src={UpdateQuestionId}
+  alt="Update Question ID"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+_Update the Question ID field in every question card under Advanced Settings._
+
+<Note>
+  ### Already published? Duplicate survey 
+  You can only update the questionId before publishing the survey. If
+  already published, simply duplicate it.
+  <Image
+    src={DuplicateSurvey}
+    alt="Duplicate Survey"
+    quality="100"
+    className="rounded-lg max-w-full sm:max-w-3xl"
+  />
+</Note>
+
+## Step 2: Setup Make.com
+
+Visit [Make.com](https://make.com) to start a new scenario.
+
+<Image
+  src={CreateNewScenario}
+  alt="Create New Scenario"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+Search for `Formbricks`:
+
+<Image
+  src={SearchFormbricks}
+  alt="Search Formbricks"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+Choose the event to trigger the Scenario:
+
+<Image
+  src={SelectTriggers}
+  alt="Select Triggers"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+## Step 3: Connect Formbricks with Make
+
+Click "Create a webhook":
+
+<Image
+  src={CreateWebhook}
+  alt="Create Webhook"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+Enter the Formbricks API key. Learn how to get one from the [API Key tutorial](/docs/api/api-key-setup).
+
+<Image src={EnterApiKey} alt="Enter API Key" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+## Step 4: Select Survey
+
+Choose from your created surveys:
+
+<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+## Step 5: Send a test response
+
+You need a test response for Make setup. For local Formbricks setup, use the [Demo App](/docs/contributing/demo) to submit a test response.
+
+<Image
+  src={SubmitTestResponse}
+  alt="Submit Test Response"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+## Step 6: Set up Google Sheet
+
+Decide on the desired action for the data. Here, we'll send submissions to a Google Sheet:
+
+<Image src={AddModule} alt="Add Module" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+Choose "Add a Row" for the action:
+
+<Image src={SelectAction} alt="Select Action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+Specify the spreadsheet details and match the Formbricks data:
+
+<Image src={SelectFields} alt="Select Fields" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+
+A new row gets added to the spreadsheet for every response:
+
+<Image src={Result} alt="Result" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

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

@@ -228,6 +228,7 @@ export const navigation: Array<NavGroup> = [
     links: [
       { title: "Zapier", href: "/docs/integrations/zapier" },
       { title: "n8n", href: "/docs/integrations/n8n" },
+      { title: "Make.com", href: "/docs/integrations/make" },
     ],
   },
   {

apps/web/app/(app)/environments/[environmentId]/integrations/page.tsx

@@ -2,6 +2,7 @@ import JsLogo from "@/images/jslogo.png";
 import WebhookLogo from "@/images/webhook.png";
 import ZapierLogo from "@/images/zapier-small.png";
 import n8nLogo from "@/images/n8n.png";
+import MakeLogo from "@/images/make-small.png";
 import { Card } from "@formbricks/ui";
 import Image from "next/image";
 
@@ -52,6 +53,17 @@ export default function IntegrationsPage({ params }) {
           description="Integrate Formbricks with 350+ apps via n8n"
           icon={<Image src={n8nLogo} alt="n8n Logo" />}
         />
+        <Card
+          docsHref="https://formbricks.com/docs/integrations/make"
+          docsText="Docs"
+          docsNewTab={true}
+          connectHref="https://www.make.com/en/integrations/formbricks"
+          connectText="Connect"
+          connectNewTab={true}
+          label="Make.com"
+          description="Integrate Formbricks with 1000+ apps via Make"
+          icon={<Image src={MakeLogo} alt="Make Logo" />}
+        />
       </div>
     </div>
   );

apps/web/app/api/cron/weekly_summary/email.ts

@@ -109,7 +109,7 @@ const notificationLiveSurveys = (surveys: Survey[], environmentId: string) => {
           </a>
           <span style="display: inline; margin-left: 10px; background-color: ${
             isLive ? "#34D399" : "#cbd5e1"
-          }; color: ${isLive ? "#F3F4F6" : "#15803d"}; border-radius:99px; padding: 2px 8px; font-size:0.9em">
+          }; color: ${isLive ? "#F3F4F6" : "#1e293b"}; border-radius:99px; padding: 2px 8px; font-size:0.9em">
             ${displayStatus}
           </span>
           ${