diff --git a/.changeset/config.json b/.changeset/config.json index 6a8da3a4ff..4c67367d41 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -7,5 +7,5 @@ "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", - "ignore": ["@formbricks/formbricks-com", "@formbricks/demo", "@formbricks/web"] + "ignore": ["@formbricks/demo", "@formbricks/web"] } diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 727789afc0..025b3680f4 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -21,7 +21,7 @@ "forwardPorts": [3000, 5432, 8025], // Use 'postCreateCommand' to run commands after the container is created. - "postCreateCommand": "cp .env.example .env && sed -i '/^ENCRYPTION_KEY=/c\\ENCRYPTION_KEY='$(openssl rand -hex 32) .env && sed -i '/^NEXTAUTH_SECRET=/c\\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env && pnpm install && pnpm db:migrate:dev", + "postCreateCommand": "cp .env.example .env && sed -i '/^ENCRYPTION_KEY=/c\\ENCRYPTION_KEY='$(openssl rand -hex 32) .env && sed -i '/^NEXTAUTH_SECRET=/c\\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env && sed -i '/^CRON_SECRET=/c\\CRON_SECRET='$(openssl rand -hex 32) .env && pnpm install && pnpm db:migrate:dev", "postAttachCommand": "pnpm dev --filter=@formbricks/web... --filter=@formbricks/demo...", // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml new file mode 100644 index 0000000000..c1a5c4150a --- /dev/null +++ b/.github/workflows/build-docs.yml @@ -0,0 +1,28 @@ +name: Build Docs +on: + workflow_call: +jobs: + build: + name: Build Docs + runs-on: ubuntu-latest + timeout-minutes: 30 + + steps: + - uses: actions/checkout@v3 + - uses: ./.github/actions/dangerous-git-checkout + + - name: Setup Node.js 20.x + uses: actions/setup-node@v3 + with: + node-version: 20.x + + - name: Install pnpm + uses: pnpm/action-setup@v4 + + - name: Install dependencies + run: pnpm install --config.platform=linux --config.architecture=x64 + shell: bash + + - run: | + pnpm build --filter=@formbricks/docs... + shell: bash diff --git a/.github/workflows/build-web.yml b/.github/workflows/build-web.yml index 324f25f7d9..ed9db93c7b 100644 --- a/.github/workflows/build-web.yml +++ b/.github/workflows/build-web.yml @@ -1,4 +1,4 @@ -name: Build web +name: Build Web on: workflow_call: jobs: diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index f4d3dbbafa..998bb68d37 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -50,6 +50,13 @@ jobs: uses: ./.github/workflows/build-web.yml secrets: inherit + docs: + name: Build Docs + needs: [changes] + if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }} + uses: ./.github/workflows/build-docs.yml + secrets: inherit + e2e-test: name: Run E2E Tests needs: [changes] @@ -59,7 +66,7 @@ jobs: required: name: PR Check Summary - needs: [lint, test, build, e2e-test] + needs: [lint, test, build, e2e-test, docs] if: always() runs-on: ubuntu-latest steps: diff --git a/.gitignore b/.gitignore index b618316754..69f8b1eeaf 100644 --- a/.gitignore +++ b/.gitignore @@ -58,3 +58,5 @@ packages/lib/uploads # Vite Timestamps *vite.config.*.timestamp-* +# js compiled assets +apps/web/public/js diff --git a/.gitpod.yml b/.gitpod.yml index a7a29f0f1f..bed6f6670b 100644 --- a/.gitpod.yml +++ b/.gitpod.yml @@ -10,9 +10,6 @@ tasks: gp sync-await init && turbo --filter "@formbricks/demo" go - - name: website - command: gp sync-await init && turbo --filter "@formbricks/formbricks-com" dev - - name: Init Formbricks init: | cp .env.example .env && diff --git a/.npmrc b/.npmrc index 28c49286c0..d059104788 100644 --- a/.npmrc +++ b/.npmrc @@ -5,4 +5,5 @@ shared-workspace-shrinkwrap = true access = public enable-pre-post-scripts = true legacy-peer-deps=true -node-linker=hoisted \ No newline at end of file +node-linker=hoisted +save-exact=true \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 403cef9117..83e1d4b85f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -16,9 +16,9 @@ Are you brimming with brilliant ideas? For new features that can elevate Formbri Ready to dive into the code and make a real impact? Here's your path: -1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/contributing/how-we-code) but will help you save hours 🤓 +1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/developer-docs/contributing/get-started) but will help you save hours 🤓 -1. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/contributing/gitpod) +1. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/developer-docs/contributing/gitpod) or use [Codespaces](https://formbricks.com/docs/developer-docs/contributing/codespaces) 1. **Tweak and Transform:** Work your coding magic and apply your changes. diff --git a/LICENSE b/LICENSE index 5c40bd8dcd..b0a7cb4564 100644 --- a/LICENSE +++ b/LICENSE @@ -2,7 +2,7 @@ Copyright (c) 2024 Formbricks GmbH Portions of this software are licensed as follows: -- All content that resides under the "packages/ee/" directory of this repository, if that directory exists, is licensed under the license defined in "packages/ee/LICENSE". +- All content that resides under the "packages/ee/" & "apps/web/app/(ee)" directories of this repository, if these directories exist, is licensed under the license defined in "packages/ee/LICENSE". - All content that resides under the "packages/js/", "packages/react-native/" and "packages/api/" directories of this repository, if that directories exist, is licensed under the "MIT" license as defined in the "LICENSE" files of these packages. - All third party components incorporated into the Formbricks Software are licensed under the original license provided by the owner of the applicable component. - Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below. diff --git a/README.md b/README.md index 5e66dc423d..1fb3dce67a 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@
+

Help us grow and star us on Github! ⭐️

+

diff --git a/apps/demo-react-native/package.json b/apps/demo-react-native/package.json index 186d52e822..71f662b654 100644 --- a/apps/demo-react-native/package.json +++ b/apps/demo-react-native/package.json @@ -13,16 +13,16 @@ "dependencies": { "@formbricks/js": "workspace:*", "@formbricks/react-native": "workspace:*", - "expo": "^51.0.26", - "expo-status-bar": "~1.12.1", - "react": "^18.2.0", - "react-native": "^0.74.4", + "expo": "51.0.26", + "expo-status-bar": "1.12.1", + "react": "18.3.1", + "react-native": "0.74.4", "react-native-webview": "13.8.6" }, "devDependencies": { - "@babel/core": "^7.25.2", - "@types/react": "~18.2.79", - "typescript": "^5.3.3" + "@babel/core": "7.25.2", + "@types/react": "18.3.11", + "typescript": "5.3.3" }, "private": true } diff --git a/apps/demo/components/SurveySwitch.tsx b/apps/demo/components/SurveySwitch.tsx deleted file mode 100644 index 752c3ec037..0000000000 --- a/apps/demo/components/SurveySwitch.tsx +++ /dev/null @@ -1,22 +0,0 @@ -interface SurveySwitchProps { - value: "website" | "app"; - formbricks: any; -} - -export const SurveySwitch = ({ value, formbricks }: SurveySwitchProps) => { - return ( - - ); -}; diff --git a/apps/demo/next-env.d.ts b/apps/demo/next-env.d.ts index 4f11a03dc6..a4a7b3f5cf 100644 --- a/apps/demo/next-env.d.ts +++ b/apps/demo/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. diff --git a/apps/demo/next.config.mjs b/apps/demo/next.config.mjs index c8a450c888..151cc3ec71 100644 --- a/apps/demo/next.config.mjs +++ b/apps/demo/next.config.mjs @@ -1,15 +1,5 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - reactStrictMode: true, - async redirects() { - return [ - { - source: "/", - destination: "/app", - permanent: false, - }, - ]; - }, images: { remotePatterns: [ { diff --git a/apps/demo/package.json b/apps/demo/package.json index 13d59b81e3..41989fe04c 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -5,7 +5,7 @@ "scripts": { "clean": "rimraf .turbo node_modules .next", "dev": "next dev -p 3002 --turbo", - "go": "next dev -p 3002", + "go": "next dev -p 3002 --turbo", "build": "next build", "start": "next start", "lint": "next lint" @@ -13,8 +13,8 @@ "dependencies": { "@formbricks/js": "workspace:*", "@formbricks/ui": "workspace:*", - "lucide-react": "^0.418.0", - "next": "14.2.5", + "lucide-react": "0.452.0", + "next": "14.2.15", "react": "18.3.1", "react-dom": "18.3.1" }, diff --git a/apps/demo/pages/app/index.tsx b/apps/demo/pages/index.tsx similarity index 97% rename from apps/demo/pages/app/index.tsx rename to apps/demo/pages/index.tsx index 3a4fd17a47..421ed20bad 100644 --- a/apps/demo/pages/app/index.tsx +++ b/apps/demo/pages/index.tsx @@ -1,9 +1,8 @@ import Image from "next/image"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; -import formbricks from "@formbricks/js/app"; -import { SurveySwitch } from "../../components/SurveySwitch"; -import fbsetup from "../../public/fb-setup.png"; +import formbricks from "@formbricks/js"; +import fbsetup from "../public/fb-setup.png"; declare const window: any; @@ -63,7 +62,6 @@ const AppPage = ({}) => {

-

Formbricks In-product Survey Demo App diff --git a/apps/demo/pages/website/index.tsx b/apps/demo/pages/website/index.tsx deleted file mode 100644 index b75abd8afb..0000000000 --- a/apps/demo/pages/website/index.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import Image from "next/image"; -import { useRouter } from "next/router"; -import { useEffect, useState } from "react"; -import formbricks from "@formbricks/js/website"; -import { SurveySwitch } from "../../components/SurveySwitch"; -import fbsetup from "../../public/fb-setup.png"; - -declare const window: any; - -const AppPage = ({}) => { - const [darkMode, setDarkMode] = useState(false); - const router = useRouter(); - - useEffect(() => { - if (darkMode) { - document.body.classList.add("dark"); - } else { - document.body.classList.remove("dark"); - } - }, [darkMode]); - - useEffect(() => { - // enable Formbricks debug mode by adding formbricksDebug=true GET parameter - const addFormbricksDebugParam = () => { - const urlParams = new URLSearchParams(window.location.search); - if (!urlParams.has("formbricksDebug")) { - urlParams.set("formbricksDebug", "true"); - const newUrl = `${window.location.pathname}?${urlParams.toString()}`; - window.history.replaceState({}, "", newUrl); - } - }; - - addFormbricksDebugParam(); - - if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) { - const defaultAttributes = { - language: "en", - }; - - formbricks.init({ - environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID, - apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST, - attributes: defaultAttributes, - }); - } - - // Connect next.js router to Formbricks - if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) { - const handleRouteChange = formbricks?.registerRouteChange; - router.events.on("routeChangeComplete", handleRouteChange); - - return () => { - router.events.off("routeChangeComplete", handleRouteChange); - }; - } - }); - - return ( -
-
-
- -
-

- Formbricks Website Survey Demo App -

-

- This app helps you test your app surveys. You can create and test user actions, create and - update user attributes, etc. -

-
-
- - -
- -
-
-
-

1. Setup .env

-

- Copy the environment ID of your Formbricks app to the env variable in /apps/demo/.env -

- fb setup - -
-

You're connected with env:

-
- - {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID} - - - - - -
-
-
-
-

2. Widget Logs

-

- Look at the logs to understand how the widget works.{" "} - Open your browser console to see the logs. -

- {/*
- -
*/} -
-
- -
-
-

- Reset person / pull data from Formbricks app -

-

- On formbricks.reset() the local state will be deleted and formbricks gets{" "} - reinitialized. -

- - -

- If you made a change in Formbricks app and it does not seem to work, hit 'Reset' and - try again. -

-
-
-
-
- ); -}; - -export default AppPage; diff --git a/apps/docs/app/app-surveys/actions/page.mdx b/apps/docs/app/app-surveys/actions/page.mdx index 64cba73f6c..8d3bf1b33c 100644 --- a/apps/docs/app/app-surveys/actions/page.mdx +++ b/apps/docs/app/app-surveys/actions/page.mdx @@ -9,8 +9,6 @@ export const metadata = { "Dive deep into how actions in Formbricks help products and organizations to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.", }; -#### App Surveys - # Actions Actions are predefined events within your app that prompt Formbricks to display a survey when triggered. These are detected by the Formbricks widget, which then presents the appropriate survey based on your predefined settings. diff --git a/apps/docs/app/app-surveys/advanced-targeting/page.mdx b/apps/docs/app/app-surveys/advanced-targeting/page.mdx index 70e998b048..d93bd5cb7f 100644 --- a/apps/docs/app/app-surveys/advanced-targeting/page.mdx +++ b/apps/docs/app/app-surveys/advanced-targeting/page.mdx @@ -4,8 +4,6 @@ export const metadata = { "Advanced Targeting allows you to show surveys to just the right group of people. You can target surveys based on user attributes, metadata, and other segments. This helps you get more relevant feedback and make data-driven decisions.", }; -#### App Surveys - # Advanced Targeting Advanced Targeting allows you to show surveys to the right group of people. You can target surveys based on user attributes, device type, and more instead of spraying and praying. This helps you get more relevant feedback and make data-driven decisions. All of this without writing a single line of code. diff --git a/apps/docs/app/app-surveys/framework-guides/page.mdx b/apps/docs/app/app-surveys/framework-guides/page.mdx index 915f3ad58f..ffc950ca76 100644 --- a/apps/docs/app/app-surveys/framework-guides/page.mdx +++ b/apps/docs/app/app-surveys/framework-guides/page.mdx @@ -42,8 +42,8 @@ All you need to do is copy a ` ``` @@ -58,9 +58,6 @@ All you need to do is copy a ` - -``` - - -### Required customizations to be made - - - - Formbricks Environment ID. - - - - - URL of the hosted Formbricks instance. - - - -Refer to our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! - ---- - -## ReactJS - -Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`. Note that zod is required as a peer dependency and must also be installed in your project. - - - -```shell {{ title: 'npm' }} -npm install @formbricks/js zod -``` -```shell {{ title: 'pnpm' }} -pnpm add @formbricks/js zod -``` -```shell {{ title: 'yarn' }} -yarn add @formbricks/js zod -``` - - - -Now, update your App.js/ts file to initialise Formbricks. - - - -```js -// other imports -import formbricks from "@formbricks/js/website"; - -if (typeof window !== "undefined") { - formbricks.init({ - environmentId: "", - apiHost: "", - }); -} - -function App() { - // your own app -} - -export default App; -``` - - - -### Required customizations to be made - - - - Formbricks Environment ID. - - - - - URL of the hosted Formbricks instance. - - - -Refer to our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! - ---- - -## NextJS - -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. - - - -```shell {{ title: 'npm' }} -npm install @formbricks/js zod -``` -```shell {{ title: 'pnpm' }} -pnpm add @formbricks/js zod -``` -```shell {{ title: 'yarn' }} -yarn add @formbricks/js zod -``` - - - - -### App Directory - - - - -```tsx {{title: 'Typescript'}} -"use client"; - -import { usePathname, useSearchParams } from "next/navigation"; -import { useEffect } from "react"; -import formbricks from "@formbricks/js/website"; - -export default function FormbricksProvider() { - const pathname = usePathname(); - const searchParams = useSearchParams(); - - useEffect(() => { - formbricks.init({ - environmentId: "", - apiHost: "", - }); - }, []); - - useEffect(() => { - formbricks?.registerRouteChange(); - }, [pathname, searchParams]); - - return null; -} -``` - - - - -```tsx {{title: 'Typescript'}} -// other imports -import FormbricksProvider from "./formbricks"; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - ); -} -``` - - - - -Refer to our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help! - -### Pages Directory - - - - -```tsx {{ title: 'Typescript' }} -// other import -import { useRouter } from "next/router"; -import { useEffect } from "react"; -import formbricks from "@formbricks/js/website"; - -if (typeof window !== "undefined") { - formbricks.init({ - environmentId: "", - apiHost: "", - }); -} - -export default function App({ Component, pageProps }: AppProps) { - 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 ; -} -``` - - - -Refer to our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help! - -### Required customizations to be made - - - - Formbricks Environment ID. - - - - - URL of the hosted Formbricks instance. - - - -First initialize the Formbricks SDK, ensure that 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! - ---- - -## VueJs - -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. - - - -```shell {{ title: 'npm' }} -npm install @formbricks/js -``` - -```shell {{ title: 'pnpm' }} -pnpm add @formbricks/js -``` - -```shell {{ title: 'yarn' }} -yarn add @formbricks/js -``` - - - - - -```js -import formbricks from "@formbricks/js/website"; - -if (typeof window !== "undefined") { - formbricks.init({ - environmentId: "", - apiHost: "", - }); -} - -export default formbricks; -``` - - - - - -```js -// other imports -import formbricks from "@/formbricks"; - -const app = createApp(App); - -app.use(router); - -app.mount("#app"); - -router.afterEach((to, from) => { - if (typeof formbricks !== "undefined") { - formbricks.registerRouteChange(); - } -}); -``` - - - -### Required customizations to be made - - - - Formbricks Environment ID. - - - - - URL of the hosted Formbricks instance. - - - -Refer to our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! - -## 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: - - - -To this: - - - -## Debugging Formbricks Integration - -Enabling Formbricks debug mode in your browser is a useful troubleshooting step for identifying and resolving complex issues. This section outlines how to activate debug mode, covers common use cases, and provides insights into specific debug log messages. - -### Activate Debug Mode - -To activate Formbricks debug mode: - -1. **Via URL Parameter:** - - - Enable debug mode mode by adding `?formbricksDebug=true` to your application's URL (e.g. `https://example.com?formbricksDebug=true` or `https://example.com?page=123&formbricksDebug=true`). This parameter will enable debugging for the current page. - -2. **View Debug Logs:** - - - Open your browser's developer tools by pressing `F12` or right-clicking and selecting "Inspect." - - Navigate to the "Console" tab to view Formbricks debugging information. - - **How to Open Browser Console:** - - - **Google Chrome:** Press `F12` or right-click, select "Inspect," and go to the "Console" tab. - - **Firefox:** Press `F12` or right-click, select "Inspect Element," and go to the "Console" tab. - - **Safari:** Press `Option + Command + C` to open the developer tools and navigate to the "Console" tab. - - **Edge:** Press `F12` or right-click, select "Inspect Element," and go to the "Console" tab. - -### Common Use Cases - -Debug mode is beneficial for scenarios such as: - -- Verifying Formbricks initialization. -- Identifying survey trigger issues. -- Troubleshooting unexpected behavior. - -### Debug Log Messages - -Debug log messages provide insights into: - -- API calls and responses. -- Event tracking, survey triggers and form interactions. -- Initialization errors. - -**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)** - ---- diff --git a/apps/docs/app/website-surveys/quickstart/images/I1.webp b/apps/docs/app/website-surveys/quickstart/images/I1.webp deleted file mode 100644 index b607cc0ec8..0000000000 Binary files a/apps/docs/app/website-surveys/quickstart/images/I1.webp and /dev/null differ diff --git a/apps/docs/app/website-surveys/quickstart/images/I2.webp b/apps/docs/app/website-surveys/quickstart/images/I2.webp deleted file mode 100644 index 4102110058..0000000000 Binary files a/apps/docs/app/website-surveys/quickstart/images/I2.webp and /dev/null differ diff --git a/apps/docs/app/website-surveys/quickstart/images/I3.webp b/apps/docs/app/website-surveys/quickstart/images/I3.webp deleted file mode 100644 index 3e2d7fbedc..0000000000 Binary files a/apps/docs/app/website-surveys/quickstart/images/I3.webp and /dev/null differ diff --git a/apps/docs/app/website-surveys/quickstart/images/I4.webp b/apps/docs/app/website-surveys/quickstart/images/I4.webp deleted file mode 100644 index f7bae96938..0000000000 Binary files a/apps/docs/app/website-surveys/quickstart/images/I4.webp and /dev/null differ diff --git a/apps/docs/app/website-surveys/quickstart/images/I5.webp b/apps/docs/app/website-surveys/quickstart/images/I5.webp deleted file mode 100644 index 33c217013f..0000000000 Binary files a/apps/docs/app/website-surveys/quickstart/images/I5.webp and /dev/null differ diff --git a/apps/docs/app/website-surveys/quickstart/images/I6.webp b/apps/docs/app/website-surveys/quickstart/images/I6.webp deleted file mode 100644 index a24c2af56d..0000000000 Binary files a/apps/docs/app/website-surveys/quickstart/images/I6.webp and /dev/null differ diff --git a/apps/docs/app/website-surveys/quickstart/images/I7.webp b/apps/docs/app/website-surveys/quickstart/images/I7.webp deleted file mode 100644 index 4a3a352d2d..0000000000 Binary files a/apps/docs/app/website-surveys/quickstart/images/I7.webp and /dev/null differ diff --git a/apps/docs/app/website-surveys/quickstart/images/I8.webp b/apps/docs/app/website-surveys/quickstart/images/I8.webp deleted file mode 100644 index e5c0ab7442..0000000000 Binary files a/apps/docs/app/website-surveys/quickstart/images/I8.webp and /dev/null differ diff --git a/apps/docs/app/website-surveys/quickstart/page.mdx b/apps/docs/app/website-surveys/quickstart/page.mdx deleted file mode 100644 index 7395a19d53..0000000000 --- a/apps/docs/app/website-surveys/quickstart/page.mdx +++ /dev/null @@ -1,115 +0,0 @@ -import { MdxImage } from "@/components/MdxImage"; - -import I1 from "./images/I1.webp"; -import I2 from "./images/I2.webp"; -import I3 from "./images/I3.webp"; -import I4 from "./images/I4.webp"; -import I5 from "./images/I5.webp"; -import I6 from "./images/I6.webp"; -import I7 from "./images/I7.webp"; -import I8 from "./images/I8.webp"; - -export const metadata = { - title: "Formbricks Quickstart Guide: Website Surveys Made Easier & Faster", - description: - "Formbricks is the easiest way to create and manage website surveys. This quickstart guide will show you how to create your first website survey in under 5 minutes.", -}; - -#### Website Surveys - -# Quickstart - -Website Surveys make it easy for your public website visitors to give you feedback. They are a great way to get feedback from your users, without interrupting their workflow. This quickstart guide will show you how to create your first website survey in under 5 minutes. - - - Website Surveys are ideal for **public facing websites**. If you are looking to run surveys in your app where you have user identification & want advanced user targeting, head over to the [App Surveys Quickstart Guide](/app-surveys/quickstart). - - -1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and you'll be guided to our onboarding like below: - - - Website & App Surveys have the same integration process. The difference will come when we setup our survey. - - - - -2. **Connect your App/Website**: Once you get through a couple of onboarding steps, you’ll be asked to connect your app or website. This is where you’ll find the code snippet for both HTML as well as the npm package which you need to embed in your app: - - - -Paste the code snippet in your app and reload the page. You should now see the Formbricks widget in the lower right corner of your app! The integration is now complete. - - - -Onboarding is complete! Now let’s create our first survey as you should see templates to choose from after clicking on **Next**: - - - -3. **Create your first survey**: To be able to see a survey in your app, you need to create one. We’ll choose one of the templates and head over to the survey settings: - -Pick the Survey Type as **Website Survey**. - - - -1. **Set Trigger for the Survey**: Scroll down to Survey Trigger and click on **+ Add action**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new session: - - - -5. **Set Recontact Options for debugging**: In Recontact Options we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once for each session to prevent survey fatigue: - - - Please change this setting later on after testing your survey to prevent survey fatigue for your users. - - - - -6. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey. - - - ---- - -- We offer framework guides for various frontend tech, head over to the the [Website Survey Framework Guides](/website-survey/framework-guides) to get started with your public facing website surveys. -- Head over to our Website Survey SDK documentation to get started with the [Website Survey JS SDK](/developer-docs/website-survey-sdk). - -Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you! diff --git a/apps/docs/components/Header.tsx b/apps/docs/components/Header.tsx index f109b2a6a3..3e9d314a14 100644 --- a/apps/docs/components/Header.tsx +++ b/apps/docs/components/Header.tsx @@ -3,7 +3,7 @@ import { Logo } from "@/components/Logo"; import { Search } from "@/components/Search"; import clsx from "clsx"; -import { motion, useScroll, useTransform } from "framer-motion"; +import { type MotionStyle, motion, useScroll, useTransform } from "framer-motion"; import Link from "next/link"; import { forwardRef } from "react"; import { Button } from "./Button"; @@ -46,7 +46,7 @@ export const Header = forwardRef, { className?: string } { "--bg-opacity-light": bgOpacityLight, "--bg-opacity-dark": bgOpacityDark, - } as React.CSSProperties + } as MotionStyle }>
{ const isInsideMobileNavigation = useIsInsideMobileNavigation(); const pathname = usePathname(); - const isActiveGroup = activeGroup?.title === group.title; + const [isActiveGroup, setIsActiveGroup] = useState(false); + + useEffect(() => { + setIsActiveGroup(activeGroup?.title === group.title); + }, [activeGroup?.title, group.title]); const toggleParentTitle = (title: string) => { if (openGroups.includes(title)) { setOpenGroups(openGroups.filter((t) => t !== title)); } else { - setOpenGroups([...openGroups, title]); + setOpenGroups([title]); } setActiveGroup(group); }; @@ -193,7 +197,11 @@ const NavigationGroup = ({
    {sortedLinks.map((link) => ( - + setIsActiveGroup(true)}> {link.href ? ( ) : ( -
    toggleParentTitle(link.title)}> +
    toggleParentTitle(`${group.title}-${link.title}`)}> pathname.startsWith(child.href)) ) }> {link.title} - {isParentOpen(link.title) ? ( + {isParentOpen(`${group.title}-${link.title}`) ? ( ) : ( @@ -223,7 +231,7 @@ const NavigationGroup = ({
    )} - {isActiveGroup && link.children && isParentOpen(link.title) && ( + {isActiveGroup && link.children && isParentOpen(`${group.title}-${link.title}`) && ( = ({ surveyUrl }) => { + return ( +
    +