feat: full docs revamp for Formbricks 2.0 (#2568)

Co-authored-by: ShubhamPalriwala <spalriwalau@gmail.com>
2026-04-24 03:21:20 -05:00 · 2024-05-07 11:06:42 +02:00
parent bb2c884150
commit 5c265aacb9
1016 changed files with 5693 additions and 21720 deletions
@@ -0,0 +1,128 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import AirtableConnected from "./airtable-connected.webp";
+import ConnectWithAirtable from "./connect-with-airtable.webp";
+import CreateNewIntegration from "./create-new-integration.webp";
+import DeleteIntegration from "./deleteIntegration.webp";
+import IntegrationTab from "./integrations-tab.webp";
+import LinkSurveyWithTable from "./link-survey-with-table.webp";
+import LinkWithQuestions from "./link-with-questions.webp";
+import ListLinkedSurveys from "./list-linked-surveys.webp";
+import OpenDeveloperHub from "./open-developer-hub.webp";
+import RegisterNewIntegration from "./register-new-integration.webp";
+import SelectScopes from "./select-scopes.webp";
+
+export const metadata = {
+  title: "Airtable Setup",
+  description: "Instantly populate your airtable table with survey data",
+};
+
+#### Integrations
+
+# Airtable
+
+The Airtable integration allows you to automatically send responses to an Airtable of your choice.
+
+<Note>
+  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
+  self-hosted version of Formbricks.
+</Note>
+
+## Formbricks Cloud
+
+1. Go to the Integrations tab in your [Formbricks Cloud dashboard](https://app.formbricks.com/) and click on the "Connect" button under Airtable integration.
+
+<MdxImage
+  src={IntegrationTab}
+  alt="Formbricks Integrations Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. Now click on the "Connect with Airtable" button to authenticate yourself with Airtable.
+
+<MdxImage
+  src={ConnectWithAirtable}
+  alt="Connect Formbricks with Airtable"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. You will now be taken to a page where you need to add and grant access to the base you want to use for the integration.
+
+<MdxImage
+  src={ConnectWithAirtable}
+  alt="Add and grant access to airtable base"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+4. Once you add and grant access to your base, you will be taken back to Formbricks Cloud and see the connected status as below:
+
+<MdxImage
+  src={AirtableConnected}
+  alt="Formbricks is now connected with Google"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<Note>
+
+Before the next step, make sure that you have a Formbricks Survey with at least one question and a Airtable base with atleast one table in the Airtable account you integrated.
+
+</Note>
+
+6. Now click on the "Link New Table" button to link an Airtable with Formbricks and a modal will open up.
+
+<MdxImage
+  src={LinkSurveyWithTable}
+  alt="Link Formbricks with a Airtable"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+7. Select the Base and table you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in Airtable. Select the questions and click on the "Save" button.
+
+<MdxImage
+  src={LinkWithQuestions}
+  alt="Select question to link with Airtable"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+
+/>
+
+8. On submitting, the modal will close and you will see the linked table in the list of linked tables.
+
+<MdxImage
+  src={ListLinkedSurveys}
+  alt="List of linked tables"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Congratulations! You have successfully linked an Airtable with Formbricks. Now whenever a response is submitted for the linked survey, it will be automatically added to the linked Airtable.
+
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!
+
+## Remove Integration with Airtable
+
+To remove the integration with Airtable,
+
+1. Visit the Integrations tab in your Formbricks Cloud dashboard.
+2. Select "Manage" button in the Airtable card.
+3. Click on the "Connected with `<your-email-here`>" just before the "Link new Table" button.
+4. It will now ask for a confirmation to remove the integration. Click on the "Delete" button to remove the integration. You can always come back and connect again with the same Airtable Account.
+
+<MdxImage
+  src={DeleteIntegration}
+  alt="Delete Airtable Integration with Formbricks"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<Note>
+  We do not store any other information of yours! We value Privacy more than you and rest assured you're safe
+  with us!
+</Note>
+
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!
@@ -0,0 +1,125 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import ConnectWithGoogle from "./connect-with-google.webp";
+import DeleteConnection from "./delete-connection.webp";
+import GoogleConnected from "./google-connected.webp";
+import IntegrationTab from "./integrations-tab.webp";
+import LinkSurveyWithSheet from "./link-survey-with-sheet.webp";
+import LinkWithQuestions from "./link-with-questions.webp";
+import ListLinkedSurveys from "./list-linked-surveys.webp";
+
+export const metadata = {
+  title: "Google Sheets",
+  description:
+    "The Google Sheets integration allows you to automatically send responses to a Google Sheet of your choice.",
+};
+
+#### Integrations
+
+# Google Sheets
+
+The Google Sheets integration allows you to automatically send responses to a Google Sheet of your choice.
+
+<Note>
+  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
+  self-hosted version of Formbricks. For self-configuration, see additional setup
+  [below](#setup-in-self-hosted-formbricks).
+</Note>
+
+## Connect Google Sheets
+
+1. Go to the Integrations tab in your [Formbricks Cloud dashboard](https://app.formbricks.com/) and click on the "Connect" button under Google Sheets integration.
+
+<MdxImage
+  src={IntegrationTab}
+  alt="Formbricks Integrations Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. Now click on the "Connect with Google" button to authenticate yourself with Google.
+
+<MdxImage
+  src={ConnectWithGoogle}
+  alt="Connect Formbricks with your Google"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. You will now be taken to the Google OAuth page where you can select the Google account you want to use for the integration.
+
+4. Once you have selected the account and completed the authentication process, you will be taken back to Formbricks Cloud and see the connected status as below:
+
+<MdxImage
+  src={GoogleConnected}
+  alt="Formbricks is now connected with Google"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<Note>
+
+Before the next step, make sure that you have a Formbricks Survey with at least one question and a Google Sheet in the Google account you integrated.
+
+</Note>
+
+5. Now click on the "Link New Sheet" button to link a Google Sheet with Formbricks and a modal will open up.
+
+<MdxImage
+  src={LinkSurveyWithSheet}
+  alt="Link Formbricks with a Google Sheet"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+6. Select the Google Sheet you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in the Google Sheet. Select the questions and click on the "Link Sheet" button.
+
+<MdxImage
+  src={LinkWithQuestions}
+  alt="Select question to link with Google Sheet"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+7. On submitting, the modal will close and you will see the linked Google Sheet in the list of linked Google Sheets.
+
+<MdxImage
+  src={ListLinkedSurveys}
+  alt="List of linked Google Sheets"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Congratulations! You have successfully linked a Google Sheet with Formbricks. Now whenever a response is submitted for the linked survey, it will be automatically added to the linked Google Sheet.
+
+## Remove Integration with Google Account
+
+To remove the integration with Google Account,
+
+1. Visit the Integrations tab in your Formbricks Cloud dashboard.
+2. Select **Manage Sheets** button in the Google Sheets card.
+3. Click on the **Delete Integration** button.
+4. It will now ask for a confirmation to remove the integration. Click on the **Delete** button to remove the integration. You can always come back and connect again with the same Google Account.
+
+<MdxImage
+  src={DeleteConnection}
+  alt="Delete Google Integration with Formbricks"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## What info do you need?
+
+- Your **Email ID** for authentication (We use this to identify you)
+- Your **Google Sheets Names and IDs** (We fetch this to list and show you the options of choosing a sheet to integrate with)
+- Write access to **selected Google Sheet** (The google sheet you choose to integrate it with, we write survey responses to it)
+
+For the above, we ask for:
+
+1. **User Email**: To identify you (that's it, nothing else, we're opensource, see this in our codebase [here](https://github.com/formbricks/formbricks/blob/main/apps/web/app/api/google-sheet/callback/route.ts#L47C17-L47C25))
+1. **Google Drive API**: To list all your google sheets (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L13))
+1. **Google Spreadsheet API**: To write to the spreadsheet you select (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L70))
+
+<Note>We store as little personal information as possible.</Note>
+
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!
@@ -0,0 +1,155 @@
+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 EnterApiKey from "./enter-api-key.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>
+  ### 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.
+
+<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 key. Learn how to get one from the [API Key tutorial](/additional-features/api#how-to-generate-an-api-key).
+
+<MdxImage
+  src={EnterApiKey}
+  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" />
@@ -0,0 +1,183 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import AddApiKey from "./add-api-key.png";
+import AddDiscord from "./add-discord.png";
+import AddFormbricksTrigger from "./add-formbricks-trigger.png";
+import CreateNewCredentialBtn from "./create-new-credential-btn.png";
+import DiscordResponse from "./discord-response.png";
+import DuplicateSurvey from "./duplicate-survey.png";
+import FillDiscordDetails from "./fill-discord-details.png";
+import ListenForEvent from "./listen-for-event.png";
+import SelectEvent from "./select-event.png";
+import SelectSurvey from "./select-survey.png";
+import SelectedSurveys from "./selected-surveys.png";
+import SubmitTestResponse from "./submit-test-response.png";
+import SuccessConnection from "./success-connection.png";
+import TestResponseSuccess from "./test-response-success.png";
+import UpdateQuestionId from "./update-question-id.png";
+
+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 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>
+
+## 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"
+/>
@@ -0,0 +1,127 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import ConnectWithNotion from "./images/connect-with-notion.png";
+import DeleteConnection from "./images/delete-connection.png";
+import IntegrationsTab from "./images/integrations-tab.png";
+import LinkSurveyWithDatabase from "./images/link-survey-with-database.png";
+import LinkWithDatabases from "./images/link-with-databases.png";
+import ListLinkedDatabases from "./images/list-linked-databases.png";
+import NotionConnected from "./images/notion-connected.png";
+
+export const metadata = {
+  title: "Notion",
+  description:
+    "The notion integration allows you to automatically send responses to a Notion database of your choice.",
+};
+
+#### Integrations
+
+# Notion
+
+The notion integration allows you to automatically send responses to a Notion database of your choice.
+
+<Note>
+  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
+  self-hosted version of Formbricks.
+</Note>
+
+## Formbricks Cloud
+
+1. Go to the Integrations tab in your [Formbricks Cloud dashboard](https://app.formbricks.com/) and click on the "Connect" button under Notion integration.
+
+<MdxImage
+  src={IntegrationsTab}
+  alt="Formbricks Integrations Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. Now click on the "Connect with Notion" button to authenticate yourself with Notion.
+
+<MdxImage
+  src={ConnectWithNotion}
+  alt="Connect Formbricks with your Notion account"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. You will now be taken to the Notion OAuth page where you can select the Notion account you want to use for the integration
+
+4. Once you have selected the account and databases and completed the authentication and authorization process, you will be taken back to Formbricks Cloud and see the connected status as below:
+
+<MdxImage
+  src={NotionConnected}
+  alt="Formbricks is now connected with Notion"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<Note>
+  Before the next step, make sure that you have a Formbricks Survey with at least one question and a Notion
+  database in the Notion account you integrated.
+</Note>
+
+5. Now click on the "Link New Database" button to link a Notion database with Formbricks and a modal will open up.
+
+<MdxImage
+  src={LinkSurveyWithDatabase}
+  alt="Link Formbricks with a Notion database"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+6. Select the Notion database you want to link with Formbricks and the Survey. On doing so, you will be asked to map formbricks' survey questions with selected databases' column. Complete the mapping and click on the "Link Database" button.
+
+<MdxImage
+  src={LinkWithDatabases}
+  alt="Question to notion database column mapping"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+7. On submitting, the modal will close and you will see the linked Notion database in the list of linked Notion databases.
+
+<MdxImage
+  src={ListLinkedDatabases}
+  alt="List of linked notion databases"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Congratulations! You have successfully linked a Notion database with Formbricks. Now whenever a response is submitted for the linked survey, it will be automatically added to the linked Notion database.
+
+## Setup in self-hosted Formbricks
+
+Enabling the Notion Integration in a self-hosted environment requires a setup using Notion account and changing the environment variables of your Formbricks instance.
+
+1. Sign up for a [Notion](https://www.notion.so/) account, if you don't have one already.
+2. Go to the [my integrations](https://www.notion.so/my-integrations) page and click on **New integration**.
+3. Fill up the basic information like **Name**, **Logo** and click on **Submit**.
+4. Now, click on **Distribution** tab on the sidebar. A text will appear which will ask you to make the integration public. Click on that toggle button. A form will appear below the text.
+5. Now provide it the details such as requested. Under **Redirect URIs** field:
+   - If you are running formbricks locally, you can enter `http://localhost:3000/api/v1/integrations/notion/callback`.
+   - Or, you can enter `https://<your-public-facing-url>/api/v1/integrations/notion/callback`
+6. Once you've filled all the necessary details, click on **Submit**.
+7. A screen will appear which will have **Client ID** and **Client secret**. Copy them and set them as the environment variables in your Formbricks instance as:
+   - `NOTION_OAUTH_CLIENT_ID` - OAuth Client ID
+   - `NOTION_OAUTH_CLIENT_SECRET` - OAuth Client Secret
+
+Voila! You have successfully enabled the Notion integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Formbricks Cloud](#formbricks-cloud) section to link a Notion database with Formbricks.
+
+## Remove Integration with Notion Account
+
+To remove the integration with Slack Workspace,
+
+1. Visit the Integrations tab in your Formbricks Cloud dashboard.
+2. Select "Manage" button in the Slack card.
+3. Click on the "Delete Integration" button.
+4. It will now ask for a confirmation to remove the integration. Click on the "Delete" button to remove the integration. You can always come back and connect again with the same Notion Account.
+
+<MdxImage
+  src={DeleteConnection}
+  alt="Delete Notion Integration with Formbricks"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!
@@ -0,0 +1,27 @@
+export const metadata = {
+  title: "Configuring Formbricks with third party applications",
+  description: "Configure third-party integrations with a Formbricks instance.",
+};
+
+#### Developer Docs
+
+# Overview
+
+At Formbricks, we understand the importance of integrating with third-party applications. We have step-by-step guides to configure our third-party integrations with a your Formbricks instance. We currently support the below integrations, click on them to see their individual guides:
+
+<Note>
+    If you are on a self-hosted instance, you will need to configure these integrations manually. Please follow the guides [here](/self-hosting/integrations) to configure them.
+</Note>
+
+- [Airtable](/developer-docs/integrations/airtable): Automatically send responses to an Airtable of your choice.
+- [Google Sheets](/developer-docs/integrations/google-sheets): Automatically send responses to a Google Sheet of your choice.
+- [Make](/developer-docs/integrations/make): Leverage Make's powerful automation capabilities to automate your workflows.
+- [n8n](/developer-docs/integrations/n8n): Automate workflows with n8n's no-code automation tool.
+- [Notion](/developer-docs/integrations/notion): Automatically send responses to a Notion database of your choice.
+- [Slack](/developer-docs/integrations/slack): Automatically send responses to a Slack channel of your choice on response events.
+- [Wordpress](/developer-docs/integrations/wordpress): Automatically integrate your Formbricks surveys with your Wordpress website.
+- [Zapier](/developer-docs/integrations/zapier): Connect Formbricks with 2000+ apps on Zapier.
+
+---
+
+If you have any questions or need help with any of the integrations or even want a new integration, please reach out to us on [Discord](https://formbricks.com/discord).
@@ -0,0 +1,168 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import ConnectWithSlack from "./images/connect-with-slack.png";
+import DeleteConnection from "./images/delete-connection.png";
+import IntegrationsTab from "./images/integrations-tab.png";
+import LinkSurveyWithChannel from "./images/link-survey-with-channel.png";
+import LinkWithQuestions from "./images/link-with-questions.png";
+import ListLinkedSurveys from "./images/list-linked-surveys.png";
+import SlackAuth from "./images/slack-auth.png";
+import SlackConnected from "./images/slack-connected.png";
+
+export const metadata = {
+  title: "Slack",
+  description:
+    "The slack integration allows you to automatically send responses to a Slack channel of your choice.",
+};
+
+#### Integrations
+
+# Slack
+
+The slack integration allows you to automatically send responses to a Slack channel of your choice.
+
+<Note>
+  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
+  self-hosted version of Formbricks.
+</Note>
+
+## Formbricks Cloud
+
+1. Go to the Integrations tab in your [Formbricks Cloud dashboard](https://app.formbricks.com/) and click on the "Connect" button under Slack integration.
+
+<MdxImage
+  src={IntegrationsTab}
+  alt="Formbricks Integrations Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. Now click on the "Connect with Slack" button to authenticate yourself with Slack.
+
+<MdxImage
+  src={ConnectWithSlack}
+  alt="Connect Formbricks with your Slack Workspace"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. You will now be taken to the Slack OAuth page where you can select the Slack channel you want to link with Formbricks and click on the "Allow" button.
+
+<MdxImage
+  src={SlackAuth}
+  alt="Slack OAuth Page"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+4. Once you have selected the account and completed the authentication process, you will be taken back to Formbricks Cloud and see the connected status as below:
+
+<MdxImage
+  src={SlackConnected}
+  alt="Formbricks is now connected with Slack"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+<Note>
+  Before the next step, make sure that you have a Formbricks Survey with at least one question and a Slack
+  channel in the Slack workspace you integrated.
+</Note>
+
+5. Now click on the "Link channel" button to link a Slack channel with Formbricks and a modal will open up.
+
+<MdxImage
+  src={LinkSurveyWithChannel}
+  alt="Link Formbricks with a Slack Channel"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+6. Select the channel you want to link with Formbricks and the Survey. On doing so, you will be asked to select the questions' responses you want to feed in the Slack channel. Select the questions and click on the "Link Channel" button.
+
+<MdxImage
+  src={LinkWithQuestions}
+  alt="Select question to link with Slack Channel"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+7. On submitting, the modal will close and you will see the linked Slack channel in the list of linked Slack channels.
+
+<MdxImage
+  src={ListLinkedSurveys}
+  alt="List of linked Slack Channels"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Congratulations! You have successfully linked a Slack channel with Formbricks. Now whenever a response is submitted for the linked survey, it will be automatically sent to the linked Slack channel.
+
+## Setup in self-hosted Formbricks
+
+Enabling the Slack Integration in a self-hosted environment requires a setup using slack workspace account and changing the environment variables of your Formbricks instance.
+
+<Note>
+  If you are running Formbricks locally:
+  
+  You need to use `https` instead of `http` for the redirect URI. 
+  - You can update the `go` script in your `apps/web/package.json` to include the `--experimental-https` flag. The
+  command will look like: <br />
+    ```bash
+      "go": next dev --experimental-https -p 3000
+    ```
+
+- You also need to update the .env file in the `apps/web` directory to include the `NEXTAUTH_URL` and `WEBAPP_URL` as `https://localhost:3000` instead of `http://localhost:3000`.
+
+- You also need to run the terminal in admin mode to run the `go` script(to acquire the SSL certificate). You can do this by running the terminal as an administrator or using the `sudo` command in Unix-based systems.
+
+</Note>
+
+1. Create a Slack workspace if you don't have one already.
+2. Go to the [Your apps](https://api.slack.com/apps) page and **Create New App**.
+3. Click on **From Scratch** and provide the **App Name** and select your workspace in **Pick a workspace to develop your app in:** dropdown. Click on **Create App**.
+4. Go to the **OAuth & Permissions** tab on the sidebar and add the following **Bot Token Scopes**:
+
+   - `channels:read`
+   - `chat:write`
+   - `chat:write.public`
+   - `chat:write.customize`
+
+5. Add the **Redirect URLs** under **OAuth & Permissions** tab. You can add the following URLs:
+
+   - If you are running formbricks locally, you can enter `https://localhost:3000/api/v1/integrations/slack/callback`.
+   - Or, you can enter `https://<your-public-facing-url>/api/v1/integrations/slack/callback`
+
+6. Now, click on **Install to Workspace** and **Allow** the permissions.
+7. Go to the **Basic Information** tab on the sidebar and copy the **Client ID** and **Client Secret**. Copy them and set them as the environment variables in your Formbricks instance as:
+
+- `SLACK_CLIENT_ID` - OAuth Client ID
+- `SLACK_CLIENT_SECRET` - OAuth Client Secret
+
+8. Now, you need to enable the public distribution of your app. Go to the **Basic Information** tab and click on the **Manage distribution** button and click on the "Distribute App".
+9. Scroll down to the **Share your app with other workspaces** section, complete the checklist and click on the **Activate public distribution** button.
+
+### By now, your environment variables should include the below ones:
+
+- `SLACK_CLIENT_ID`
+- `SLACK_CLIENT_SECRET`
+
+Voila! You have successfully enabled the Slack integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Formbricks Cloud](#formbricks-cloud) section to link a Slack workspace with Formbricks.
+
+## Remove Integration with Slack Workspace
+
+To remove the integration with Slack Workspace,
+
+1. Visit the Integrations tab in your Formbricks Cloud dashboard.
+2. Select "Manage" button in the Slack card.
+3. Click on the "Delete Integration" button.
+4. It will now ask for a confirmation to remove the integration. Click on the "Delete" button to remove the integration. You can always come back and connect again with the same Slack Workspace.
+
+<MdxImage
+  src={DeleteConnection}
+  alt="Delete Slack Integration with Formbricks"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!
@@ -0,0 +1,131 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import Img1 from "./1-wordpress-targeted-survey-on-website-free.webp";
+import Img2 from "./2-run-website-survey-wordpress-targeted-for-free.webp";
+import Img3 from "./3-wordpress-setup-survey-on-website-targeted-free-open-source.webp";
+import Img4 from "./4-wordpress-website-survey-target-visitor-free.webp";
+import Img6 from "./6-targeted-survey-on-wordpress-website-for-free.webp";
+import Img7 from "./7-wordpress-free-hotjar-survey-open-source-website-survey-hotjar.webp";
+import Img5 from "./step-4-copy-to-wordpress-for-free-targeted-survey.webp";
+
+export const metadata = {
+  title: "Run targeted surveys on your WordPress page",
+  description:
+    "Target specific visitors with a survey on your WordPress page using Formbricks for free. Show survey on specific page or on button click.",
+};
+
+#### WordPress
+
+# Connect Formbricks with your WordPress page
+
+If you want to run a targeted survey on your WordPress website, Formbricks is the way to go! With our generous free plan and open source tech, you get everything you need to get started and keep full control over your data.
+
+## TLDR
+
+1. Install the Formbricks WordPress plugin
+2. Create a [free Formbricks account](https://app.formbricks.com/auth/signup)
+3. Find and copy the `environment id`
+4. Copy the environment id into the right field in the plugin settings
+5. Create survey on trigger “New Session” to test it
+
+## Step 1: Install the Formbricks WordPress plugin
+
+As long as the Formbricks plugin is in review, please download it from our [GitHub repository directly.](https://github.com/formbricks/wordpress)
+
+<MdxImage
+  src={Img1}
+  alt="Run targeted website survye on any WordPress site"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Step 2: Create a Formbricks Account
+
+This is super straight forward: Go to [app.formbricks.com/auth/signup](https://app.formbricks.com/auth/signup), create the account, verify your email and you’re in!
+
+When you see this screen, you’re there:
+
+<MdxImage
+  src={Img2}
+  alt="Free HotJar survey alternative open source"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Step 3: Find and copy the environmentId
+
+Go to Settings > Setup Checklist where you’ll find your environmentId:
+
+<MdxImage
+  src={Img3}
+  alt="Run targeted surveys for free on WordPress pages"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Step 4: Copy the environmentId to the WordPress Plugin Settings
+
+In your WordPress instance, go to the Formbricks Plugin settings and copy the environmentId in the correct field:
+
+<MdxImage
+  src={Img5}
+  alt="Free and open source HotJar survey on WordPress page"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Then click the button at the bottom to see if the connection worked.
+
+<Note>If you don’t use our Cloud, you also have to update the API Host</Note>
+
+Great!
+
+## Step 5: Create survey on trigger “New Session”
+
+Now that all is setup, we create a survey to display an example survey. Pick any template here:
+
+<MdxImage
+  src={Img2}
+  alt="Free HotJar survey alternative open source"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Keep the content for now, click on the Settings tab:
+
+<MdxImage
+  src={Img4}
+  alt="Free and open source HotJar survey on WordPress page"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+Here we do three things:
+
+1. Change survey type to **App Survey** or **Website Survey**(for public facing)
+2. Select trigger “New Session”
+3. Publish
+
+<MdxImage
+  src={Img6}
+  alt="Open Source survey on targeted website wordpress"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+When you see this page, you did it!
+
+<MdxImage
+  src={Img7}
+  alt="Run free an open source targeted survey on any page"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Step 6: Reload your page to check out your survey 🤓
+
+You did it! Reload the WordPress page and your survey should appear!
+
+## Doesn't work?
+
+Join our [Discord to get help 🤓](https://formbricks.com/discord)
@@ -0,0 +1,152 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import AddNewZap from "./add-new-zap.webp";
+import ChooseEvent from "./choose-event.webp";
+import ConnectWithFB1 from "./connect-with-formbricks-1.webp";
+import ConnectWithFB2 from "./connect-with-formbricks-2.webp";
+import DuplicateSurvey from "./duplicate-survey.webp";
+import SelectSurvey from "./select-survey.webp";
+import SlackChannelMsg from "./slack-channel-msg.webp";
+import SlackMsg from "./slack-message.webp";
+import SubmitTestResponse from "./submit-test-response.webp";
+import SuccessConnection from "./success-connected.webp";
+import TestSubmission from "./test-submission.webp";
+import UpdateQuestionId from "./update-question-id.webp";
+import ZapierMessage from "./zapier-message.webp";
+
+export const metadata = {
+  title: "Step-by-Step Guide to Integrating Formbricks with Zapier",
+  description:
+    "Master the integration of Formbricks with Zapier using our detailed guide. Seamlessly connect your surveys to 5000+ apps, automate data transfers, and enhance feedback management. Start optimizing your workflow today.",
+};
+
+#### Integrations
+
+# Zapier Setup
+
+Zapier is a powerful ally. Hook up Formbricks with Zapier and you can send your data to 5000+ other apps. Here is how to do it.
+
+<Note>
+  ### Nail down your survey first? Any changes in the survey cause additional work in the Zap. It makes sense
+  to first settle on the survey you want to run and then get to setting up Zapier.
+</Note>
+
+## Step 1: Setup your survey incl. `questionId` for every question
+
+When setting up the Zap 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: Send a test response
+
+In order to set up Zapier you’ll need a test response. This allows you to select the individual values of each response in your Zap. If you have Formbricks running locally and you want to set up 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"
+/>
+
+## Step 3: Setup your Zap
+
+Go to [zapier.com](https://zapier.com) and create a new Zap. Search for “Formbricks” to get started:
+
+<MdxImage src={AddNewZap} alt="Add New Zap" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
+
+Then, choose the event you want to trigger the Zap on:
+
+<MdxImage src={ChooseEvent} alt="Choose Event" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
+
+## Step 4: Connect Formbricks with Zapier
+
+Now, you have to connect Zapier with Formbricks via an API Key:
+
+<MdxImage
+  src={ConnectWithFB1}
+  alt="Connect with Formbricks - 1"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+<MdxImage
+  src={ConnectWithFB2}
+  alt="Connect with Formbricks - 2"
+  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 newly opened Zapier window, you will be connected:
+
+<MdxImage
+  src={SuccessConnection}
+  alt="Successful Connection"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Step 5: Select Survey
+
+Next, you can choose from all the surveys you have created in this environment:
+
+<MdxImage
+  src={SelectSurvey}
+  alt="Select Survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Step 6: Test your trigger
+
+Once you hit “Test” you will see the three most recent submissions for this survey. If you don’t have any submissions in the survey, submit one to continue setting up your Zap:
+
+<MdxImage
+  src={TestSubmission}
+  alt="Test Submission"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+_Now you're happy that you updated the questionId's_
+
+## Step 7: Set up your Zap
+
+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 Slack channel:
+
+<MdxImage
+  src={SlackChannelMsg}
+  alt="Slack Channel Message"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+In the action itself we can determine the data and layout of the message. Here, we only choose the submission data. You can also refer to the meta data of the submission and the [attributes](/app-surveys/user-identification) of the person who submitted the survey.
+
+<MdxImage src={SlackMsg} alt="Slack Message" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
+
+We now receive a notifcation in our Slack channel whenever a Churn survey is completed:
+
+<MdxImage
+  src={ZapierMessage}
+  alt="Zapier Message"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>