mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-07 03:11:47 -05:00
Code Issues Packages Projects Releases 169 Wiki Activity

fix: (docs) n8n page heading bug and responsiveness issues

Browse Source
This commit is contained in:
ShubhamPalriwala
2023-09-07 21:55:05 +05:30
parent c901ab13f5
commit d290b6e011
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/formbricks-com/app/docs/integrations/n8n/page.mdx
+16 -16
View File
@@ -30,7 +30,7 @@ export const meta = {
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 first {{ class: "text-white" }}
### Nail down your survey first
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>
@@ -39,12 +39,12 @@ n8n allows you to build flexible workflows focused on deep data integration. And
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.
<Image src={UpdateQuestionId} alt="Update Question ID" quality="100" className="rounded-lg" />
<Image src={UpdateQuestionId} alt="Update Question ID" quality="100" className="rounded-lg max-w-full 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 {{ class: "text-white" }}
### 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.
<Image
@@ -59,29 +59,29 @@ _In every question card in the Advanced Settings you find the Question ID field.
Go to [n8n.io](https://n8n.io) and create a new workflow. Search for “Formbricks” to get started:
<Image src={AddFormbricksTrigger} alt="Add Formbricks Trigger" quality="100" className="rounded-lg" />
<Image src={AddFormbricksTrigger} alt="Add Formbricks Trigger" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
## Step 3: Connect Formbricks with n8n
Now, you have to connect n8n with Formbricks via an API Key:
<Image src={CreateNewCredentialBtn} alt="Create new credential button" quality="100" className="rounded-lg" />
<Image src={CreateNewCredentialBtn} alt="Create new credential button" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
Click on Create New Credentail button to add your host and API Key
<Image src={AddApiKey} alt="Add host and api key" quality="100" className="rounded-lg" />
<Image src={AddApiKey} alt="Add host and api key" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
Now you need an API key. Please refer to the [API Key Setup](/docs/api/api-key-setup) 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.
<Image src={SuccessConnection} alt="Successful Connection" quality="100" className="rounded-lg" />
<Image src={SuccessConnection} alt="Successful Connection" quality="100" className="rounded-lg max-w-full 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:
<Image src={SelectEvent} alt="Select Event" quality="100" className="rounded-lg" />
<Image src={SelectEvent} alt="Select Event" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
Here, we are adding `Response Finished` as an event, which will trigger when the survey has been filled out.
@@ -89,25 +89,25 @@ Here, we are adding `Response Finished` as an event, which will trigger when the
Next, you can choose from all the surveys you have created in this environment. You can select multiple surveys:
<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg" />
<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
Here, we are selecting two surveys.
<Image src={SelectedSurveys} alt="Selected Surveys" quality="100" className="rounded-lg" />
<Image src={SelectedSurveys} alt="Selected Surveys" quality="100" className="rounded-lg max-w-full 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 in-app survey, you can use our [Demo App](/docs/contributing/demo) to trigger a survey and submit a response.
<Image src={SubmitTestResponse} alt="Submit Test Response" quality="100" className="rounded-lg" />
<Image src={SubmitTestResponse} alt="Submit Test Response" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
Next, click on Listen for event button.
<Image src={ListenForEvent} alt="Listen for event" quality="100" className="rounded-lg" />
<Image src={ListenForEvent} alt="Listen for event" quality="100" className="rounded-lg max-w-full 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.
<Image src={TestResponseSuccess} alt="Test Response Success" quality="100" className="rounded-lg" />
<Image src={TestResponseSuccess} alt="Test Response Success" quality="100" className="rounded-lg max-w-full 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:
@@ -115,12 +115,12 @@ Now you have all the data you need at hand. The next steps depend on what you wa
Click on the plus and search `Discord`.
<Image src={AddDiscord} alt="Add Discord" quality="100" className="rounded-lg" />
<Image src={AddDiscord} alt="Add Discord" quality="100" className="rounded-lg max-w-full 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.
<Image src={FillDiscordDetails} alt="Fill Discord Details" quality="100" className="rounded-lg" />
<Image src={FillDiscordDetails} alt="Fill Discord Details" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
Once the execution is successful, you'll receive the content in the discord channel.
<Image src={DiscordResponse} alt="Discord Response" quality="100" className="rounded-lg" />
<Image src={DiscordResponse} alt="Discord Response" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />