move feedback widget on formbricks.com to own component, add plausible tracking on feedback click

apps/formbricks-com/components/shared/FeedbackButton.tsx

@@ -0,0 +1,42 @@
+import { usePlausible } from "next-plausible";
+import Script from "next/script";
+import { useState } from "react";
+
+declare global {
+  interface Window {
+    formbricks: any;
+  }
+}
+
+export default function FeedbackButton() {
+  const plausible = usePlausible();
+  const [scriptReady, setScriptReady] = useState(false);
+  return (
+    <>
+      <Script src="https://unpkg.com/@formbricks/feedback@0.1.2" defer onReady={() => setScriptReady(true)} />
+      <Script id="feedback-setup">{`
+      window.formbricks = {
+      config: {
+        hqUrl: "https://xm.formbricks.com",
+        formId: "clchup08o0000lj08526vdujt",
+        contact: {
+          name: "Matti",
+          position: "Co-Founder",
+          imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
+        },
+      },
+      ...window.formbricks,
+    };`}</Script>
+      {scriptReady && (
+        <button
+          className="bg-brand fixed top-1/2 -right-8 z-40 hidden -translate-y-1/2 -rotate-90 rounded p-4 font-medium text-white sm:block"
+          onClick={(event) => {
+            window.formbricks.open(event);
+            plausible("openFeedback");
+          }}>
+          Feedback
+        </button>
+      )}
+    </>
+  );
+}

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

@@ -1,3 +1,4 @@
+import FeedbackButton from "./FeedbackButton";
 import Footer from "./Footer";
 import Header from "./Header";
 import MetaInformation from "./MetaInformation";
@@ -13,6 +14,7 @@ export default function Layout({ title, description, children }: LayoutProps) {
     <div className="flex h-screen flex-col justify-between">
       <MetaInformation title={title} description={description} />
       <Header />
+      <FeedbackButton />
       <main className="max-w-8xl relative mx-auto mb-auto flex flex-col justify-center sm:px-2 lg:px-8 xl:px-12">
         {children}
       </main>

apps/formbricks-com/components/shared/LayoutMdx.tsx

@@ -1,3 +1,4 @@
+import FeedbackButton from "./FeedbackButton";
 import Footer from "./Footer";
 import Header from "./Header";
 import Layout from "./Layout";
@@ -17,6 +18,7 @@ export default function LayoutMdx({ meta, children }: Props) {
     <div className="flex h-screen flex-col justify-between">
       <MetaInformation title={meta.title} description={meta.description} />
       <Header />
+      <FeedbackButton />
       <main className="min-w-0 max-w-2xl flex-auto px-4 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16">
         <article className="mx-auto my-16 max-w-3xl px-2">
           {meta.title && (

apps/formbricks-com/pages/_app.tsx

@@ -1,36 +1,10 @@
-import type { AppProps } from "next/app";
 import PlausibleProvider from "next-plausible";
+import type { AppProps } from "next/app";
 import "../styles/globals.css";
-import Script from "next/script";
-
-declare global {
-  interface Window {
-    formbricks: any;
-  }
-}
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <PlausibleProvider domain="formbricks.com" selfHosted={true}>
-      <Script src="https://unpkg.com/@formbricks/feedback@0.1.2" defer />
-      <Script id="feedback-setup">{`
-      window.formbricks = {
-      config: {
-        hqUrl: "https://xm.formbricks.com",
-        formId: "clchup08o0000lj08526vdujt",
-        contact: {
-          name: "Matti",
-          position: "Co-Founder",
-          imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
-        },
-      },
-      ...window.formbricks,
-    };`}</Script>
-      <button
-        className="bg-brand fixed top-1/2 -right-8 z-40 hidden -translate-y-1/2 -rotate-90 rounded p-4 font-medium text-white sm:block"
-        onClick={(event) => window.formbricks.open(event)}>
-        Feedback
-      </button>
       <Component {...pageProps} />
     </PlausibleProvider>
   );