Feedback Box on formbricks.com (#180)

* build and integrate feedback widget on formbricks-com

Co-authored-by: knugget <johannes@knugget.de>

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

@@ -1,6 +1,7 @@
+import clsx from "clsx";
 import { usePlausible } from "next-plausible";
 import Script from "next/script";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 declare global {
   interface Window {
@@ -10,20 +11,35 @@ declare global {
 
 export default function FeedbackButton() {
   const plausible = usePlausible();
-  const [scriptReady, setScriptReady] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const feedbackRef = useRef<HTMLInputElement>(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 (
     <>
-      <Script
-        src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.1.5/dist/index.umd.js"
-        defer
-        onReady={() => setScriptReady(true)}
-      />
+      <Script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.1.9/dist/index.umd.js" defer />
+
       <Script id="feedback-setup">{`
       window.formbricks = {
         ...window.formbricks,
         config: {
           hqUrl: "https://xm.formbricks.com",
-          formId: "clchup08o0000lj08526vdujt",
+          formId: "clcrjztwl0000mi08e26rzjkg",
+          divId: "formbricks-feedback-wrapper",
           contact: {
             name: "Matti",
             position: "Co-Founder",
@@ -31,16 +47,36 @@ export default function FeedbackButton() {
           },
         },
     };`}</Script>
-      {scriptReady && (
-        <button
-          className="bg-brand rounded p-4 font-medium text-white sm:block"
-          onClick={(event) => {
-            window.formbricks.open(event);
-            plausible("openFeedback");
-          }}>
-          Feedback
-        </button>
-      )}
+      <div
+        className={clsx(
+          "xs:right-0 xs:top-1/2 xs:w-[26rem] xs:-translate-y-1/2 fixed bottom-0 z-50 h-96 w-full transition-transform duration-500 ease-in-out",
+          isOpen ? "xs:-translate-x-0 translate-y-0" : "xs:translate-x-[21.2rem] translate-y-[21.8rem]"
+        )}>
+        <div
+          className="xs:flex-row flex h-full flex-col"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          ref={feedbackRef}>
+          <button
+            className="bg-brand xs:-rotate-90 xs:-mr-7 xs:my-auto z-30 mx-auto -mb-2 max-h-16 w-32 rounded p-4 font-medium text-white"
+            onClick={() => {
+              if (!isOpen) {
+                plausible("openFeedback");
+                if (window) {
+                  window.formbricks.render();
+                  window.formbricks.resetForm();
+                }
+              }
+              setIsOpen(!isOpen);
+            }}>
+            {isOpen ? "Close" : "Feedback"}
+          </button>
+          <div
+            className="z-40 h-full w-full overflow-hidden rounded-lg bg-[#f8fafc] shadow-lg"
+            id="formbricks-feedback-wrapper"></div>
+        </div>
+      </div>
     </>
   );
 }

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

@@ -14,7 +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 /> */}
+      <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

@@ -18,7 +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 /> */}
+      <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/blog/weekly-update-060123/index.mdx

@@ -62,9 +62,7 @@ config: {
         },
 ```
 
-The config above spits out the following feedback box. Play around with it:
-
-<FeedbackButton />
+The config above spits out the following feedback box. Play around with it!
 
 It's working, feel free to submit your feedback :)
 

apps/formbricks-com/tailwind.config.js

@@ -41,6 +41,9 @@ module.exports = {
       maxWidth: {
         "8xl": "88rem",
       },
+      screens: {
+        xs: "390px",
+      },
     },
   },
   plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],