diff --git a/apps/formbricks-com/components/docs/FeedbackBoxDummy.tsx b/apps/formbricks-com/components/docs/FeedbackBoxDummy.tsx new file mode 100644 index 0000000000..5217a9476a --- /dev/null +++ b/apps/formbricks-com/components/docs/FeedbackBoxDummy.tsx @@ -0,0 +1,82 @@ +import clsx from "clsx"; +import { usePlausible } from "next-plausible"; +import Script from "next/script"; +import { useEffect, useRef, useState } from "react"; + +declare global { + interface Window { + formbricks: any; + } +} + +export default function FeedbackButton() { + const plausible = usePlausible(); + const [isOpen, setIsOpen] = useState(false); + const feedbackRef = useRef(null); + + useEffect(() => { + // Close the feedback form if the user clicks outside of it + function handleClickOutside(event: any) { + if (feedbackRef.current && !feedbackRef.current.contains(event.target)) { + if (isOpen) setIsOpen(false); + } + } + // Bind the event listener + document.addEventListener("mousedown", handleClickOutside); + return () => { + // Unbind the event listener on clean up + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [feedbackRef, isOpen]); + + return ( + <> + +
+
{ + e.stopPropagation(); + }} + ref={feedbackRef}> + +
+
+
+ + ); +} diff --git a/apps/formbricks-com/components/docs/FeedbackButtonPopover.tsx b/apps/formbricks-com/components/docs/FeedbackButtonPopover.tsx new file mode 100644 index 0000000000..7e834657d6 --- /dev/null +++ b/apps/formbricks-com/components/docs/FeedbackButtonPopover.tsx @@ -0,0 +1,33 @@ +import { Button } from "@formbricks/ui"; +import { useEffect, useRef, useState } from "react"; + +declare global { + interface Window { + formbricks: any; + } +} + +export function FeedbackButton() { + useEffect(() => { + window.formbricks = { + ...window.formbricks, + config: { + hqUrl: process.env.NEXT_PUBLIC_FORMBRICKS_URL, + formId: process.env.NEXT_PUBLIC_FORMBRICKS_FORM_ID, + contact: { + name: "Matti", + position: "Co-Founder", + imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4", + }, + }, + }; + // @ts-ignore + import("@formbricks/feedback"); + }, []); + + return ( + + ); +} diff --git a/apps/formbricks-com/components/docs/Layout.tsx b/apps/formbricks-com/components/docs/Layout.tsx index ed98092835..c8fa03d14d 100644 --- a/apps/formbricks-com/components/docs/Layout.tsx +++ b/apps/formbricks-com/components/docs/Layout.tsx @@ -2,7 +2,6 @@ import { useCallback, useEffect, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import clsx from "clsx"; - import { Hero } from "@/components/shared/Hero"; import { FooterLogo, Logomark } from "@/components/shared/Logo"; import { MobileNavigation } from "@/components/shared/MobileNavigation"; @@ -42,7 +41,7 @@ function Header({ navigation }: any) { className={clsx( "sticky top-0 z-50 flex flex-wrap items-center justify-between bg-slate-100 px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8", isScrolled - ? "bg-slate-100/90 backdrop-blur dark:bg-slate-900/90 [@supports(backdrop-filter:blur(0))]:bg-slate-100/75 dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75" + ? "[@supports(backdrop-filter:blur(0))]:bg-slate-100/75 dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75 bg-slate-100/90 backdrop-blur dark:bg-slate-900/90" : "dark:bg-transparent" )}>
@@ -61,7 +60,7 @@ function Header({ navigation }: any) { @@ -125,6 +124,15 @@ export function Layout({ children, meta }: LayoutProps) { )} {children} +
+

Need help?

+

+ Join our Discord and ask away. We're happy to help where we can! +

+ +
{previousPage && ( diff --git a/apps/formbricks-com/components/shared/PmfDummy.tsx b/apps/formbricks-com/components/docs/PmfDummy.tsx similarity index 100% rename from apps/formbricks-com/components/shared/PmfDummy.tsx rename to apps/formbricks-com/components/docs/PmfDummy.tsx diff --git a/apps/formbricks-com/components/shared/APILayout.tsx b/apps/formbricks-com/components/shared/APILayout.tsx index b578682b78..a12496d68c 100644 --- a/apps/formbricks-com/components/shared/APILayout.tsx +++ b/apps/formbricks-com/components/shared/APILayout.tsx @@ -27,7 +27,7 @@ interface APICallProps { } export function APILayout({ method, url, description, queries, bodies, responses, example }: APICallProps) { - const [switchState, setSwitchState] = useState(false); + const [switchState, setSwitchState] = useState(true); function handleOnChange() { setSwitchState(!switchState); } @@ -50,16 +50,16 @@ export function APILayout({ method, url, description, queries, bodies, responses
{method}
-
- http://localhost:300/api - {url} +
+ http://localhost:300 + {url}
-
{description}
+
{description}

Parameters

@@ -88,7 +88,11 @@ export function APILayout({ method, url, description, queries, bodies, responses {example && (

Body Example

-
{example}
+
+ 
+                        {example}
+
+
)}
@@ -187,7 +191,9 @@ function Response({ color, statusCode, description, example }: RespProps) {
{example && toggleExample && ( -
{example}
+
+ {example} +
)}
); diff --git a/apps/formbricks-com/components/shared/HeaderPMF.tsx b/apps/formbricks-com/components/shared/HeaderPMF.tsx index ec8fe48e8c..2543632b2c 100644 --- a/apps/formbricks-com/components/shared/HeaderPMF.tsx +++ b/apps/formbricks-com/components/shared/HeaderPMF.tsx @@ -35,6 +35,11 @@ export default function Header() { className="text-base font-medium text-slate-400 hover:text-slate-700 dark:hover:text-slate-300"> Pricing

50%

+ + Docs +
@@ -80,6 +85,7 @@ export default function Header() {
How it works Pricing + Docs