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

import AddApiKey from "./add-api-key.webp";
import AddDiscord from "./add-discord.webp";
import AddFormbricksTrigger from "./add-formbricks-trigger.webp";
import CreateNewCredentialBtn from "./create-new-credential-btn.webp";
import DiscordResponse from "./discord-response.webp";
import DuplicateSurvey from "./duplicate-survey.webp";
import FillDiscordDetails from "./fill-discord-details.webp";
import ListenForEvent from "./listen-for-event.webp";
import SelectEvent from "./select-event.webp";
import SelectSurvey from "./select-survey.webp";
import SelectedSurveys from "./selected-surveys.webp";
import SubmitTestResponse from "./submit-test-response.webp";
import SuccessConnection from "./success-connection.webp";
import TestResponseSuccess from "./test-response-success.webp";
import UpdateQuestionId from "./update-question-id.webp";

export const metadata = {
  title: "Comprehensive Guide to Integrating Formbricks with n8n",
  description:
    "Unlock the potential of combining Formbricks with n8n for a streamlined workflow experience. Dive into our step-by-step guide and send your survey data effortlessly to 350+ applications. Streamline your data processes now!",
};

#### Integrations

# n8n Setup

n8n allows you to build flexible workflows focused on deep data integration. And with sharable templates and a user-friendly UI, the less technical people on your team can collaborate on them too. Unlike other tools, complexity is not a limitation. So you can build whatever you want — without stressing over budget. Hook up Formbricks with n8n and you can send your data to 350+ other apps. Here is how to do it.

<Note>
  Nail down your survey? Any changes in the survey cause additional work in the n8n node. It makes
  sense to first settle on the survey you want to run and then get to setting up n8n.
</Note>

## Step 1: Setup your survey incl. `questionId` for every question

When setting up the node your life will be easier when you change the `questionId`s of your survey questions. You can only do so **before** you publish your survey.

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

_In every question card in the Advanced Settings you find the Question ID field. Update it so that you'll recognize the response tied to this question._

<Note>
  ### Already published? Duplicate survey You can only update the questionId when the survey was not yet
  published. Already published it? Just **duplicate it** to update the questionIds.
  <MdxImage
    src={DuplicateSurvey}
    alt="Duplicate Survey"
    quality="100"
    className="max-w-full rounded-lg sm:max-w-3xl"
  />
</Note>

## Step 2: Setup your n8n workflow

Go to [n8n.io](https://n8n.io) and create a new workflow. Search for “Formbricks” to get started:

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

## Step 3: Connect Formbricks with n8n

Now, you have to connect n8n with Formbricks via an API Key:

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

Click on Create New Credentail button to add your host and API Key

<MdxImage
  src={AddApiKey}
  alt="Add host and api key"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

Now you need an API key. Please refer to the [API Key Setup](/additional-features/api#how-to-generate-an-api-key) page to learn how to create one.

Once you copied it in the API Key field, hit Save button to test the connection and save the credentials.

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

## Step 4: Select Event

Next, you can choose the event you want to trigger the node on. You can select multiple events:

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

Here, we are adding `Response Finished` as an event, which will trigger when the survey has been filled out.

## Step 5: Select Survey

Next, you can choose from all the surveys you have created in this environment. You can select multiple surveys:

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

Here, we are selecting two surveys.

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

## Step 6: Test your trigger

In order to set up n8n you'll need a test response in the selected survey. This allows you to select the individual values of each response in your workflow. If you have Formbricks running locally and you want to set up an an app or a website survey, you can use our [Demo App](/contributing/demo) to trigger a survey and submit a response.

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

Next, click on Listen for event button.

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

Then, go to the survey which you selected. Fill it out, and wait for the particular event to trigger (in this case it's `Response Finished`). Once the event is triggered you will see the response that you filled out in the survey.

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

Now you have all the data you need at hand. The next steps depend on what you want to do with it. In this tutorial, we will send submissions to a discord channel:

## Step 7: Add discord to your workflow

Click on the plus and search `Discord`.

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

Fill in the `Webhook URL` and the `Content` that you want to receive in the respective discord channel. Next, click on `Execute Node` button to test the node.

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

Once the execution is successful, you'll receive the content in the discord channel.

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