add zapier, add docs links opening in new tab

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

@@ -9,10 +9,9 @@ import { Button } from "@formbricks/ui";
 import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import MetaInformation from "../shared/MetaInformation";
 import DocsFeedback from "./DocsFeedback";
-import { useRef } from "react";
 
 function GitHubIcon(props: any) {
   return (
@@ -23,7 +22,6 @@ function GitHubIcon(props: any) {
 }
 
 function Header({ navigation }: any) {
-  const router = useRouter();
   let [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
@@ -63,13 +61,15 @@ function Header({ navigation }: any) {
           variant="secondary"
           EndIcon={GitHubIcon}
           endIconClassName="fill-slate-800 dark:fill-slate-200 ml-2"
-          onClick={() => router.push("https://github.com/formbricks/formbricks")}>
-          View on Github
+          href="https://github.com/formbricks/formbricks"
+          target="_blank">
+          Star us on Github
         </Button>
         <Button
           variant="highlight"
           className="ml-2"
-          onClick={() => router.push("https://app.formbricks.com/auth/signup")}>
+          href="https://app.formbricks.com/auth/signup"
+          target="_blank">
           Get started
         </Button>
       </div>
@@ -101,6 +101,26 @@ export const Layout: React.FC<LayoutProps> = ({ children, meta }) => {
     sessionStorage.setItem("scrollPosition", (scroll + 89).toString());
   };
 
+  const useExternalLinks = (selector: string) => {
+    useEffect(() => {
+      const links = document.querySelectorAll(selector);
+
+      links.forEach((link) => {
+        link.setAttribute("target", "_blank");
+        link.setAttribute("rel", "noopener noreferrer");
+      });
+
+      return () => {
+        links.forEach((link) => {
+          link.removeAttribute("target");
+          link.removeAttribute("rel");
+        });
+      };
+    }, [selector]);
+  };
+
+  useExternalLinks(".prose a");
+
   useEffect(() => {
     if (parentRef.current) {
       const scrollPosition = Number.parseInt(sessionStorage.getItem("scrollPosition"), 10);

apps/formbricks-com/lib/docsNavigation.ts

@@ -44,6 +44,10 @@ const navigation = [
       { title: "Docs Feedback", href: "/docs/best-practices/docs-feedback" },
     ],
   },
+  {
+    title: "Integrations",
+    links: [{ title: "Zapier", href: "/docs/integrations/zapier" }],
+  },
   {
     title: "Link Surveys",
     links: [

apps/formbricks-com/pages/docs/contributing/demo/index.mdx

@@ -10,7 +10,7 @@ export const meta = {
   description: "To test in-app surveys, trigger actions and set attributes, you can use the Demo App.",
 };
 
-To play around with the user actions, you can use the Demo App. It's a simple React app that you can run locally and use to trigger actions and set attributes.
+To play around with the in-app [User Actions](/docs/actions/why), you can use the Demo App. It's a simple React app that you can run locally and use to trigger actions and set [Attributes](/docs/attributes/why).
 
 <Image src={DemoApp} alt="Demo App Preview" quality="100" className="rounded-lg" />
 

apps/formbricks-com/pages/docs/integrations/zapier/index.mdx

@@ -0,0 +1,110 @@
+import { Layout } from "@/components/docs/Layout";
+import { Fence } from "@/components/shared/Fence";
+import { Callout } from "@/components/shared/Callout";
+import Image from "next/image";
+
+import AddApiKey from "./add-api-key.png";
+import AddNewZap from "./add-new-zap.png";
+import ApiKeySecret from "./api-key-secret.png";
+import ChooseEvent from "./choose-event.png";
+import ConnectWithFB1 from "./connect-with-formbricks-1.png";
+import ConnectWithFB2 from "./connect-with-formbricks-2.png";
+import DuplicateSurvey from "./duplicate-survey.png";
+import SelectSurvey from "./select-survey.png";
+import SlackChannelMsg from "./slack-channel-msg.png";
+import SlackMsg from "./slack-message.png";
+import SubmitTestResponse from "./submit-test-response.png";
+import SuccessConnection from "./success-connected.png";
+import TestSubmission from "./test-submission.png";
+import UpdateQuestionId from "./update-question-id.png";
+import ZapierMessage from "./zapier-message.png";
+
+export const meta = {
+  title: "Zapier Setup",
+  description: "Wire up Formbricks with Zapier and 5000+ other apps",
+};
+
+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.
+
+<Callout title="Nail down your survey first" type="note">
+  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.
+</Callout>
+
+## 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.
+
+<Image src={UpdateQuestionId} alt="Update Question ID" quality="100" className="rounded-lg" />
+
+_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._
+
+<Callout title="Already published? Duplicate survey" type="note">
+  You can only update the questionId when the survey was not yet published. Already published it? Just
+  **duplicate it** to update the questionIds.
+  <Image src={DuplicateSurvey} alt="Duplicate Survey" quality="100" className="rounded-lg" />
+</Callout>
+
+## Step 3: 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 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 that without much setting. It also works with Formbricks Cloud.
+
+<Image src={SubmitTestResponse} alt="Submit Test Response" quality="100" className="rounded-lg" />
+
+## Step 4: Setup your Zap
+
+Go to zapier.com and create a new Zap. Search for “Formbricks” to get started:
+
+<Image src={AddNewZap} alt="Add New Zap" quality="100" className="rounded-lg" />
+
+Then, choose the event you want to trigger the Zap on:
+
+<Image src={ChooseEvent} alt="Choose Event" quality="100" className="rounded-lg" />
+
+## Step 5: Connect Formbricks with Zapier
+
+Now, you have to connect Zapier with Formbricks via an API Key:
+
+<Image src={ConnectWithFB1} alt="Connect with Formbricks - 1" quality="100" className="rounded-lg" />
+<Image src={ConnectWithFB2} alt="Connect with Formbricks - 2" quality="100" className="rounded-lg" />
+
+Go back to your Formbricks → Settings → API Keys and create an API key for the environment you’re working with: When you **don’t** see an orange bar at the top of your app, you are in Production Mode hence you need a Production Key:
+
+<Image src={AddApiKey} alt="Add API Key" quality="100" className="rounded-lg" />
+
+Copy the API key right away. It will disappear shortly and you wont be able to view it again for security reasons:
+
+<Image src={ApiKeySecret} alt="API Key Secret" quality="100" className="rounded-lg" />
+
+Once you copied it in the newly opened Zapier window, you will be connected:
+
+<Image src={SuccessConnection} alt="Successful Connection" quality="100" className="rounded-lg" />
+
+## Step 6: Select Survey
+
+Next, you can choose from all the surveys you have created in this environment:
+
+<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg" />
+
+## Step 7: 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:
+
+<Image src={TestSubmission} alt="Test Submission" quality="100" className="rounded-lg" />
+_Now you're happy that you updated the questionId's_
+
+## Step 8: 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:
+
+<Image src={SlackChannelMsg} alt="Slack Channel Message" quality="100" className="rounded-lg" />
+
+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](/docs/attributes/why) of the person who submitted the survey.
+
+<Image src={SlackMsg} alt="Slack Message" quality="100" className="rounded-lg" />
+
+We now receive a notifcation in our Slack channel whenever a Churn survey is completed:
+
+<Image src={ZapierMessage} alt="Zapier Message" quality="100" className="rounded-lg" />
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>;