Add Zapier Tutorial to Docs

Add Zapier Tutorial to Docs

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/api/api-key-setup/index.mdx

@@ -2,6 +2,10 @@ import { Layout } from "@/components/docs/Layout";
 import { Fence } from "@/components/shared/Fence";
 import { APILayout } from "@/components/shared/APILayout.tsx";
 import { Callout } from "@/components/shared/Callout";
+import Image from "next/image";
+
+import AddApiKey from "./add-api-key.png";
+import ApiKeySecret from "./api-key-secret.png";
 
 export const meta = {
   title: "API Key Setup",
@@ -16,9 +20,11 @@ The API requests are authorized with a personal API key. This API key gives you
 ### How to generate an API key
 
 1. Go to your settings on [app.formbricks.com](https://app.formbricks.com).
-2. Go to page “API keys”.
+2. Go to page “API keys”
+   <Image src={AddApiKey} alt="Add API Key" quality="100" className="rounded-lg" />
 3. Create a key for the development or production environment.
 4. Copy the key immediately. You won’t be able to see it again.
+   <Image src={ApiKeySecret} alt="API Key Secret" quality="100" className="rounded-lg" />
 
 <Callout title="Store API key safely" type="warning">
   Anyone who has your API key has full control over your account. For security reasons, you cannot view the

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,102 @@
+import { Layout } from "@/components/docs/Layout";
+import { Fence } from "@/components/shared/Fence";
+import { Callout } from "@/components/shared/Callout";
+import Image from "next/image";
+
+import AddNewZap from "./add-new-zap.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 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" />
+
+## Step 4: Setup your Zap
+
+Go to [zapier.com](https://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" />
+
+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 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>;