diff --git a/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx b/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx index d32ad628bc..370f94cf0e 100644 --- a/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx +++ b/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx @@ -3,6 +3,7 @@ import Image from "next/image"; import SetupChecklist from "./env-id.webp"; import WidgetNotConnected from "./widget-not-connected.webp"; import WidgetConnected from "./widget-connected.webp"; +import ReactApp from "./react-in-app-survey-app-popup-form.webp"; export const metadata = { title: "Framework Overview", @@ -51,10 +52,12 @@ Before getting started, make sure you have: + Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! + - ```html {{ title: 'HTML' }} + ```html {{ title: '.html' }} @@ -67,6 +70,9 @@ Before getting started, make sure you have: + + Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`.
+ Now, update your App.js/ts file to initialise Formbricks. ### Required Customizations to be Made @@ -83,17 +89,34 @@ Before getting started, make sure you have: - For detailed setup, please visit our [VueJs Setup Guide](/docs/getting-started/vuejs) page. + ### What are we doing here? + + The app initializes 'formbricks' when it's loaded in a browser environment (due to the typeof window !== "undefined" check) and then renders your components or content. + + In app survey in React app for micro surveys + + Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! - - ```shell {{ title: 'JS lib from npm' }} - npm install @formbricks/js + + ```sh {{ title: 'npm' }} + npm install --save @formbricks/js + ``` + ```sh {{ title: 'pnpm' }} + pnpm add @formbricks/js + ``` + ```sh {{ title: 'yarn' }} + yarn add @formbricks/js ``` - ```js {{ title: 'ReactJs' }} + ```js {{ title: 'app.js' }} // other imports import formbricks from "@formbricks/js"; @@ -121,8 +144,15 @@ Before getting started, make sure you have: - This is a quick setup for the App directory structure of Nextjs, if you have the Pages directory, - refer to this [NextJs Pages Directory Setup Guide](/docs/getting-started/nextjs-pages). + NextJs projects typically follow two main conventions: the App Directory and the Pages Directory. + To ensure smooth integration with the Formbricks SDK, which operates solely on the client side, follow the + guidelines for each convention below: + + - App directory: You will have to define a new component in `app/formbricks.tsx` file and call it in your `app/layout.tsx` file. + - Pages directory: You will have to visit your `_app.tsx` and just initialise Formbricks there. + + Code snippets for the integration for both conventions are provided to further assist you. + ### Required Customizations to be Made @@ -147,7 +177,12 @@ Before getting started, make sure you have: - For detailed setup, please visit our [NextJs App Directory Setup Guide](/docs/getting-started/nextjs-app). + ### What are we doing here? + + First we need to initialize the Formbricks SDK, making sure it only runs on the client side. + To connect the Next.js router to Formbricks and ensure the SDK can keep track of every page change, we are registering the route change event. + + Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! @@ -163,7 +198,7 @@ Before getting started, make sure you have: ``` - + ```tsx {{ title: 'app/formbricks.tsx' }} "use client"; import formbricks from "@formbricks/js"; @@ -206,6 +241,40 @@ Before getting started, make sure you have: + + ```tsx {{ title: '_app.tsx' }} + import "@/styles/globals.css"; + import type { PagesProps } from "next/app"; + import { useEffect } from "react"; + import { useRouter } from "next/router"; + import formbricks from "@formbricks/js"; + + if (typeof window !== "undefined") { + formbricks.init({ + environmentId: "your-environment-id", + apiHost: "your-api-host", // e.g. https://app.formbricks.com + debug: true, // remove when in production + }); + } + + export default function Pages({ Component, pageProps }: PagesProps) { + const router = useRouter(); + + useEffect(() => { + // Connect next.js router to Formbricks + const handleRouteChange = formbricks?.registerRouteChange; + router.events.on("routeChangeComplete", handleRouteChange); + + return () => { + router.events.off("routeChangeComplete", handleRouteChange); + }; + }, []); + + return ; + } + ``` + + @@ -214,6 +283,9 @@ Before getting started, make sure you have: + Integrating the Formbricks SDK with Vue.js is a straightforward process. + We will make sure the SDK is only loaded and used on the client side, as it's not intended for server-side usage. + ### Required Customizations to be Made @@ -237,7 +309,7 @@ Before getting started, make sure you have: - For detailed setup, please visit our [NextJs App Directory Setup Guide](/docs/getting-started/nextjs-app). + Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! @@ -312,3 +384,6 @@ To this: quality="100" className="rounded-lg max-w-full sm:max-w-3xl" /> + +**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)** + diff --git a/apps/formbricks-com/app/docs/getting-started/react/1-in-app-survey-react-app-popup-form.webp b/apps/formbricks-com/app/docs/getting-started/framework-guides/react-in-app-survey-app-popup-form.webp similarity index 100% rename from apps/formbricks-com/app/docs/getting-started/react/1-in-app-survey-react-app-popup-form.webp rename to apps/formbricks-com/app/docs/getting-started/framework-guides/react-in-app-survey-app-popup-form.webp diff --git a/apps/formbricks-com/app/docs/getting-started/nextjs-app/env-id.webp b/apps/formbricks-com/app/docs/getting-started/nextjs-app/env-id.webp deleted file mode 100644 index ba69fb0f28..0000000000 Binary files a/apps/formbricks-com/app/docs/getting-started/nextjs-app/env-id.webp and /dev/null differ diff --git a/apps/formbricks-com/app/docs/getting-started/nextjs-app/page.mdx b/apps/formbricks-com/app/docs/getting-started/nextjs-app/page.mdx deleted file mode 100644 index 01e29e31ef..0000000000 --- a/apps/formbricks-com/app/docs/getting-started/nextjs-app/page.mdx +++ /dev/null @@ -1,125 +0,0 @@ -import Image from "next/image"; - -import SetupChecklist from "./env-id.webp"; -import WidgetNotConnected from "./widget-not-connected.webp"; -import WidgetConnected from "./widget-connected.webp"; - -export const meta = { - title: "Setting up Formbricks SDK with Next.js App Directory", - description: - "Setting up Formbricks with the new Next.js 13 App Directory can be tricky. Follow this guide to make sure you get it right.", -}; - -[Getting Started](#) - -# Setting up Formbricks SDK with Next.js App Directory - -This guide will walk you through the process of integrating the Formbricks SDK into a Next.js application using the new app directory. As the Formbricks SDK only works on the client side, it's essential to ensure proper integration to avoid any issues. - -## Prerequisites - -Before getting started, make sure you have: - -1. A Next.js application set up and running. -2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings: - -Step 2 - Setup Checklist - -## 1. Installing Formbricks SDK - -First, you need to install the Formbricks SDK using one of the following commands: - - - -```sh {{ title: 'npm' }} -npm install --save @formbricks/js -``` - -```sh {{ title: 'pnpm' }} -pnpm add @formbricks/js -``` - -```sh {{ title: 'yarn' }} -yarn add @formbricks/js -``` - - - -## 2. Integrating with Next.js 13 App Directory - -The Next.js 13 app directory requires us to initialize Formbricks differently than the pages directory. Specifically, the app directory server-side renders components by default, and the formbricks-js library is a client-side library. To make these work together, create a `formbricks.tsx` file (or `formbricks.js` if you don't use Typescript) and set up the FormbricksProvider with the 'use client' directive: - - - -```tsx {{ title: 'app/formbricks.tsx' }} -"use client"; -import formbricks from "@formbricks/js"; -import { usePathname, useSearchParams } from "next/navigation"; -import { useEffect } from "react"; - -export default function FormbricksProvider() { - const pathname = usePathname(); - const searchParams = useSearchParams(); - - useEffect(() => { - formbricks.init({ - environmentId: "clj66eqzu00m5qu0g8leglrns", - apiHost: "https://app.formbricks.com", // e.g. https://app.formbricks.com - debug: true, // remove when in production - }); - }, []); - - useEffect(() => { - formbricks?.registerRouteChange(); - }, [pathname, searchParams]); - - return null; -} -``` - - - -Once we do this, we can then import the `formbricks.tsx` file in our `app/layout.tsx` file, and wrap our app in the Formbricks provider. - - - -```tsx -import FormbricksProvider from "./formbricks"; -import "./globals.css"; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - ); -} -``` - - - -## 3. Validate your setup - -Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this: - -Widget isnt connected - -To this: - -Widget is connected diff --git a/apps/formbricks-com/app/docs/getting-started/nextjs-app/widget-connected.webp b/apps/formbricks-com/app/docs/getting-started/nextjs-app/widget-connected.webp deleted file mode 100644 index 90b82de9f4..0000000000 Binary files a/apps/formbricks-com/app/docs/getting-started/nextjs-app/widget-connected.webp and /dev/null differ diff --git a/apps/formbricks-com/app/docs/getting-started/nextjs-app/widget-not-connected.webp b/apps/formbricks-com/app/docs/getting-started/nextjs-app/widget-not-connected.webp deleted file mode 100644 index 2cd15d007c..0000000000 Binary files a/apps/formbricks-com/app/docs/getting-started/nextjs-app/widget-not-connected.webp and /dev/null differ diff --git a/apps/formbricks-com/app/docs/getting-started/nextjs-pages/env-id.webp b/apps/formbricks-com/app/docs/getting-started/nextjs-pages/env-id.webp deleted file mode 100644 index ba69fb0f28..0000000000 Binary files a/apps/formbricks-com/app/docs/getting-started/nextjs-pages/env-id.webp and /dev/null differ diff --git a/apps/formbricks-com/app/docs/getting-started/nextjs-pages/page.mdx b/apps/formbricks-com/app/docs/getting-started/nextjs-pages/page.mdx deleted file mode 100644 index ae8380e825..0000000000 --- a/apps/formbricks-com/app/docs/getting-started/nextjs-pages/page.mdx +++ /dev/null @@ -1,116 +0,0 @@ -import Image from "next/image"; - -import SetupChecklist from "./env-id.webp"; -import WidgetNotConnected from "./widget-not-connected.webp"; -import WidgetConnected from "./widget-connected.webp"; - -export const meta = { - title: "Setting up Formbricks SDK with Next.js Pages Directory", - description: - "Setting up Formbricks with the new Next.js 13 Pages Directory can be tricky. Follow this guide to make sure you get it right.", -}; - -[Getting Started](#) - -# Setting up Formbricks SDK with Next.js Pages Directory - -This guide will walk you through the process of integrating the Formbricks SDK into a Next.js application using the Pages Directory. As the Formbricks SDK only works on the client side, it's essential to ensure proper integration to avoid any issues. - -## Prerequisites - -Before getting started, make sure you have: - -1. A Next.js application with Pages Directory set up and running. -2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings: - -Step 2 - Setup Checklist - -## 1. Installing Formbricks SDK - -First, you need to install the Formbricks SDK using one of the following commands: - - - -```sh {{ title: 'npm' }} -npm install --save @formbricks/js -``` - -```sh {{ title: 'pnpm' }} -pnpm add @formbricks/js -``` - -```sh {{ title: 'yarn' }} -yarn add @formbricks/js -``` - - - -## 2. Integrating with Next.js 13 Pages Directory - -Update your Pages component in the \_app.ts file like so: - - - -```tsx -import "@/styles/globals.css"; -import type { PagesProps } from "next/app"; -import { useEffect } from "react"; -import { useRouter } from "next/router"; -import formbricks from "@formbricks/js"; - -if (typeof window !== "undefined") { - formbricks.init({ - environmentId: "your-environment-id", - apiHost: "your-api-host", // e.g. https://app.formbricks.com - debug: true, // remove when in production - }); -} - -export default function Pages({ Component, pageProps }: PagesProps) { - const router = useRouter(); - - useEffect(() => { - // Connect next.js router to Formbricks - const handleRouteChange = formbricks?.registerRouteChange; - router.events.on("routeChangeComplete", handleRouteChange); - - return () => { - router.events.off("routeChangeComplete", handleRouteChange); - }; - }, []); - - return ; -} -``` - - - -## What are we doing here? - -1. First we need to initialize the Formbricks SDK, making sure it only runs on the client side. -2. To connect the Next.js router to Formbricks and ensure the SDK can keep track of every page change, we are registering the route change event. - -## 3. Validate your setup - -Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this: - -Widget isnt connected - -To this: - -Widget is connected diff --git a/apps/formbricks-com/app/docs/getting-started/nextjs-pages/widget-connected.webp b/apps/formbricks-com/app/docs/getting-started/nextjs-pages/widget-connected.webp deleted file mode 100644 index 90b82de9f4..0000000000 Binary files a/apps/formbricks-com/app/docs/getting-started/nextjs-pages/widget-connected.webp and /dev/null differ diff --git a/apps/formbricks-com/app/docs/getting-started/nextjs-pages/widget-not-connected.webp b/apps/formbricks-com/app/docs/getting-started/nextjs-pages/widget-not-connected.webp deleted file mode 100644 index 2cd15d007c..0000000000 Binary files a/apps/formbricks-com/app/docs/getting-started/nextjs-pages/widget-not-connected.webp and /dev/null differ diff --git a/apps/formbricks-com/app/docs/getting-started/quickstart-in-app-survey/page.mdx b/apps/formbricks-com/app/docs/getting-started/quickstart-in-app-survey/page.mdx index b0af75a302..516d0d08d8 100644 --- a/apps/formbricks-com/app/docs/getting-started/quickstart-in-app-survey/page.mdx +++ b/apps/formbricks-com/app/docs/getting-started/quickstart-in-app-survey/page.mdx @@ -11,7 +11,7 @@ import I8 from "./8-pop-up-form-in-web-app-survey.webp"; import I9 from "./9-set-up-in-app-micro-survey-popup.webp"; import I10 from "./10-micro-survey-pop-up-in-app.webp"; import I11 from "./11-survey-logs-in-app-survey-popup.webp"; -import ReactApp from "../react/1-in-app-survey-react-app-popup-form.webp"; +import ReactApp from "../framework-guides/react-in-app-survey-app-popup-form.webp"; export const meta = { title: "Collect in app survey responses in 10 minutes", diff --git a/apps/formbricks-com/app/docs/getting-started/react/env-id.webp b/apps/formbricks-com/app/docs/getting-started/react/env-id.webp deleted file mode 100644 index ba69fb0f28..0000000000 Binary files a/apps/formbricks-com/app/docs/getting-started/react/env-id.webp and /dev/null differ diff --git a/apps/formbricks-com/app/docs/getting-started/react/page.mdx b/apps/formbricks-com/app/docs/getting-started/react/page.mdx deleted file mode 100644 index 88ce353188..0000000000 --- a/apps/formbricks-com/app/docs/getting-started/react/page.mdx +++ /dev/null @@ -1,120 +0,0 @@ -import Image from "next/image"; - -import ReactApp from "./1-in-app-survey-react-app-popup-form.webp"; -import SetupChecklist from "./env-id.webp"; -import WidgetNotConnected from "./widget-not-connected.webp"; -import WidgetConnected from "./widget-connected.webp"; - -export const meta = { - title: "Setting up Formbricks SDK with React", - description: "Setting up Formbricks with plain React", -}; - -[Getting Started](#) - -# Setting up Formbricks SDK with React.js - -## Prerequisites - -Before getting started, make sure you have: - -1. A React application created with 'create-react-app'. -2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings: - -Step 2 - Setup Checklist - -## 1. Installing Formbricks SDK - -First, you need to install the Formbricks SDK using one of the following commands: - - - -```sh {{ title: 'npm' }} -npm install --save @formbricks/js -``` - -```sh {{ title: 'pnpm' }} -pnpm add @formbricks/js -``` - -```sh {{ title: 'yarn' }} -yarn add @formbricks/js -``` - - - -## 2. Integrating with React - -Update your App.js file like so: - - - -```tsx -import formbricks from "@formbricks/js"; -import "./App.css"; -import logo from "./logo.svg"; - -if (typeof window !== "undefined") { - formbricks.init({ - environmentId: "cllc820rs01-REPLACE-ME", // replace with your env ID! - apiHost: "https://app.formbricks.com", // update if you're self-hosting - debug: true, // remove when in production - }); -} - -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} - -export default App; -``` - - - -## What are we doing here? - -The app initializes 'formbricks' when it's loaded in a browser environment (due to the typeof window !== "undefined" check) and then renders your components or content. - -In app survey in React app for micro surveys - -## 3. Validate your setup - -Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this: - -Widget isnt connected - -To this: - -Widget is connected diff --git a/apps/formbricks-com/app/docs/getting-started/react/widget-connected.webp b/apps/formbricks-com/app/docs/getting-started/react/widget-connected.webp deleted file mode 100644 index 90b82de9f4..0000000000 Binary files a/apps/formbricks-com/app/docs/getting-started/react/widget-connected.webp and /dev/null differ diff --git a/apps/formbricks-com/app/docs/getting-started/react/widget-not-connected.webp b/apps/formbricks-com/app/docs/getting-started/react/widget-not-connected.webp deleted file mode 100644 index 2cd15d007c..0000000000 Binary files a/apps/formbricks-com/app/docs/getting-started/react/widget-not-connected.webp and /dev/null differ diff --git a/apps/formbricks-com/app/docs/getting-started/vuejs/page.mdx b/apps/formbricks-com/app/docs/getting-started/vuejs/page.mdx deleted file mode 100644 index b9e0488de2..0000000000 --- a/apps/formbricks-com/app/docs/getting-started/vuejs/page.mdx +++ /dev/null @@ -1,101 +0,0 @@ -export const meta = { - title: "Setting up Formbricks SDK with Vue.js", - description: - "Easily integrate Formbricks SDK into your Vue.js app with our guide. Enhance user feedback and improve product experience with customizable in-product micro-surveys.", -}; - -[Getting Started](#) - -# Setting up Formbricks SDK with Vue.js - -In this guide, we will go through the steps to set up the Formbricks SDK in a Vue.js application. This will allow you to create and customize in-product micro-surveys to gather valuable feedback from your users and improve your product experience. - -## Introduction - -Integrating the Formbricks SDK with Vue.js is a straightforward process. We will make sure the SDK is only loaded and used on the client side, as it's not intended for server-side usage. - -## Prerequisites - -Before proceeding, ensure you have the following: - -1. A Vue.js application set up and ready to go. -2. A Formbricks account with an `environmentId` and `apiHost` for your application. You can find these in the Setup Checklist in the Settings. - -## 1. Installation - -To get started, install the Formbricks SDK using your preferred package manager: - - - -```sh {{ title: 'npm' }} -npm install --save @formbricks/js -``` - -```sh {{ title: 'pnpm' }} -pnpm add @formbricks/js -``` - -```sh {{ title: 'yarn' }} -yarn add @formbricks/js -``` - - - -## 2. Integration with Vue.js - -1. Create a new file called \`formbricks.js\` inside the \`src\` folder of your Vue.js application, and add the following code to initialize the Formbricks SDK: - - - -```js -import formbricks from "@formbricks/js"; - -if (typeof window !== "undefined") { - formbricks.init({ - environmentId: "your-environment-id", - apiHost: "your-api-host", - }); -} - -export default formbricks; -``` - - - -2. In your main.js or main.ts file, import the formbricks.js module: - - - -```javascript -import formbricks from "@/formbricks"; -``` - - - -3. To make sure Formbricks SDK registers every page change in your Vue.js application, add a global navigation guard to your Vue Router configuration: - - - -```javascript -import Vue from "vue"; -import VueRouter from "vue-router"; - -Vue.use(VueRouter); - -const router = new VueRouter({ - // Your router configuration here -}); - -// Add a global navigation guard -router.afterEach((to, from) => { - if (typeof formbricks !== "undefined") { - formbricks.registerRouteChange(); - } -}); -``` - - - -Now, the Formbricks SDK is set up and ready to use in your Vue.js application. You can start creating and customizing in-product micro-surveys for your users. - -For more information on how to use Formbricks SDK, check the rest of the documentation. diff --git a/apps/formbricks-com/app/docs/introduction/how-it-works/page.mdx b/apps/formbricks-com/app/docs/introduction/how-it-works/page.mdx index 2f42f7442f..bae5472cec 100644 --- a/apps/formbricks-com/app/docs/introduction/how-it-works/page.mdx +++ b/apps/formbricks-com/app/docs/introduction/how-it-works/page.mdx @@ -10,25 +10,25 @@ export const meta = { Formbricks is a powerful platform designed to help you create and manage in-product micro-surveys for SaaS and digital products. Here is an overview: -## Four components +### Four components 1. **Form Builder**: Create and customize your surveys with a user-friendly, no-code interface. 2. **Targeting & Triggers**: Define specific user segments and set event-based triggers to display your surveys to the right users at the right time. 3. **Integration**: Seamlessly integrate Formbricks into your web or mobile application using the provided SDKs or the HTML snippet. 4. **Analytics & Insights**: Analyze user responses and gain actionable insights to make informed product decisions. -### Form Builder +## Form Builder The Form Builder is where you create and customize your micro-surveys. With its intuitive drag-and-drop interface, you can easily add different question types, set response options, and apply your branding to the survey forms. The Form Builder allows you to preview your survey in real-time, ensuring it looks and feels perfect for your users. -### Targeting & Triggers +## Targeting & Triggers Formbricks offers fine-grained user targeting and event-based triggers to help you display your surveys to the most relevant audience. Using the platform, you can define user segments based on attributes and behaviors, and set up triggers to show your surveys at specific moments within your product. This ensures that you're capturing the most accurate and valuable feedback possible. -### Integration +## Integration Integrating Formbricks into your web or mobile application is a breeze. With SDKs for popular web frameworks like React, and an HTML snippet for non-framework based websites, you can quickly add Formbricks to your project. The provided code snippets make it easy to initialize the Formbricks widget and configure it to communicate with your backend. -### Analytics & Insights +## Analytics & Insights Formbricks provides powerful analytics and insights to help you understand user responses and make data-driven decisions. The platform aggregates survey results and presents them in an easy-to-understand format, enabling you to identify trends, spot issues, and uncover opportunities for improvement. With Formbricks, you're always one step ahead in understanding your users and optimizing your product experience. diff --git a/apps/formbricks-com/components/docs/Code.tsx b/apps/formbricks-com/components/docs/Code.tsx index 2cee0001b3..5e7bc63f5b 100644 --- a/apps/formbricks-com/components/docs/Code.tsx +++ b/apps/formbricks-com/components/docs/Code.tsx @@ -153,7 +153,7 @@ function CodeGroupHeader({ children: React.ReactNode; selectedIndex: number; }) { - let hasTabs = Children.count(children) > 1; + let hasTabs = Children.count(children) >= 1; if (!title && !hasTabs) { return null; @@ -182,7 +182,7 @@ function CodeGroupHeader({ } function CodeGroupPanels({ children, ...props }: React.ComponentPropsWithoutRef) { - let hasTabs = Children.count(children) > 1; + let hasTabs = Children.count(children) >= 1; if (hasTabs) { return ( @@ -278,7 +278,7 @@ export function CodeGroup({ let languages = Children.map(children, (child) => getPanelTitle(isValidElement(child) ? child.props : {})) ?? []; let tabGroupProps = useTabGroupProps(languages); - let hasTabs = Children.count(children) > 1; + let hasTabs = Children.count(children) >= 1; let containerClassName = "not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"; diff --git a/apps/formbricks-com/components/docs/Navigation.tsx b/apps/formbricks-com/components/docs/Navigation.tsx index f871184213..766ab77b0d 100644 --- a/apps/formbricks-com/components/docs/Navigation.tsx +++ b/apps/formbricks-com/components/docs/Navigation.tsx @@ -193,10 +193,6 @@ export const navigation: Array = [ links: [ { title: "Quickstart: In app", href: "/docs/getting-started/quickstart-in-app-survey" }, { title: "Framework Guides", href: "/docs/getting-started/framework-guides" }, - { title: "Next.js App Dir", href: "/docs/getting-started/nextjs-app" }, - { title: "Next.js Pages Dir", href: "/docs/getting-started/nextjs-pages" }, - { title: "React.js", href: "/docs/getting-started/react" }, - { title: "Setup with Vue.js", href: "/docs/getting-started/vuejs" }, ], }, {