import { MdxImage } from "@/components/MdxImage";

import AddModule from "./add-module.webp";
import CreateNewScenario from "./create-new-scenario.webp";
import CreateWebhook from "./create-webhook.webp";
import DuplicateSurvey from "./duplicate-survey.webp";
import EnterApiKeyAndHost from "./enter-api-key-and-host.webp";
import Result from "./result.webp";
import SearchFormbricks from "./search-formbricks.webp";
import SelectAction from "./select-action.webp";
import SelectFields from "./select-fields.webp";
import SelectSurvey from "./select-survey.webp";
import SelectTriggers from "./select-trigger.webp";
import SubmitTestResponse from "./submit-test-response.webp";
import UpdateQuestionId from "./update-question-id.webp";

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.",
};

#### 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>
  Nailed down your survey?? 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.

<MdxImage
  src={UpdateQuestionId}
  alt="Update Question ID"
  quality="100"
  className="max-w-full rounded-lg 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.
  <MdxImage
    src={DuplicateSurvey}
    alt="Duplicate Survey"
    quality="100"
    className="max-w-full rounded-lg sm:max-w-3xl"
  />
</Note>

## Step 2: Setup Make.com

Visit [Make.com](https://make.com) to start a new scenario.

<MdxImage
  src={CreateNewScenario}
  alt="Create New Scenario"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

Search for `Formbricks`:

<MdxImage
  src={SearchFormbricks}
  alt="Search Formbricks"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

Choose the event to trigger the Scenario:

<MdxImage
  src={SelectTriggers}
  alt="Select Triggers"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

## Step 3: Connect Formbricks with Make

Click "Create a webhook":

<MdxImage
  src={CreateWebhook}
  alt="Create Webhook"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

Enter the Formbricks API Host and API Key. API Host is by default set to https://app.formbricks.com but can be modified for self hosting instances. Learn how to get an API Key from the [API Key tutorial](/additional-features/api#how-to-generate-an-api-key).

<MdxImage
  src={EnterApiKeyAndHost}
  alt="Enter API Key"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

## Step 4: Select Survey

Choose from your created surveys:

<MdxImage
  src={SelectSurvey}
  alt="Select Survey"
  quality="100"
  className="max-w-full rounded-lg 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](/contributing/demo) to submit a test response.

<MdxImage
  src={SubmitTestResponse}
  alt="Submit Test Response"
  quality="100"
  className="max-w-full rounded-lg 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:

<MdxImage src={AddModule} alt="Add Module" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />

Choose "Add a Row" for the action:

<MdxImage
  src={SelectAction}
  alt="Select Action"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

Specify the spreadsheet details and match the Formbricks data:

<MdxImage
  src={SelectFields}
  alt="Select Fields"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

A new row gets added to the spreadsheet for every response:

<MdxImage src={Result} alt="Result" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />