update feedback button

apps/demo/pages/demos/feedback.tsx

@@ -25,7 +25,7 @@ export default function Feedback() {
         },
       },
     };
-    require("@formbricks/feedback");
+    import("@formbricks/feedback");
   }, []);
   return <AppPage onClickFeedback={(event) => window.formbricks.open(event)} />;
 }

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

@@ -9,7 +9,7 @@ declare global {
   }
 }
 
-export default function FeedbackButton() {
+export function FeedbackButton() {
   const plausible = usePlausible();
   const [isOpen, setIsOpen] = useState(false);
   const feedbackRef = useRef<HTMLInputElement>(null);
@@ -29,27 +29,29 @@ export default function FeedbackButton() {
     };
   }, [feedbackRef, isOpen]);
 
+  useEffect(() => {
+    window.formbricks = {
+      ...window.formbricks,
+      config: {
+        hqUrl: process.env.NEXT_PUBLIC_FORMBRICKS_URL,
+        formId: process.env.NEXT_PUBLIC_FORMBRICKS_FORM_ID,
+        divId: "formbricks-feedback-wrapper",
+        contact: {
+          name: "Matti",
+          position: "Co-Founder",
+          imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
+        },
+      },
+    };
+    // @ts-ignore
+    import("@formbricks/feedback");
+  }, []);
+
   return (
     <>
-      <Script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.2.1/dist/index.umd.js" defer />
-
-      <Script id="feedback-setup">{`
-      window.formbricks = {
-        ...window.formbricks,
-        config: {
-          hqUrl: "https://app.formbricks.com",
-          formId: "cldipnvz80002le0ha2a3zhgl",
-          divId: "formbricks-feedback-wrapper",
-          contact: {
-            name: "Matti",
-            position: "Co-Founder",
-            imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
-          },
-        },
-    };`}</Script>
       <div
         className={clsx(
-          "xs:flex-row xs:right-0 xs:top-1/2 xs:w-[18rem] xs:-translate-y-1/2 fixed bottom-0 z-50 h-fit w-full transition-all duration-500 ease-in-out",
+          "xs:flex-row xs:right-0 xs:top-1/2 xs:w-[18rem] xs:-translate-y-1/2 fixed bottom-0 z-50 h-[22rem] w-full flex-1 transition-all duration-500 ease-in-out",
           isOpen ? "xs:-translate-x-0 translate-y-0" : "xs:translate-x-full xs:-mr-1 translate-y-full"
         )}>
         <div
@@ -73,7 +75,7 @@ export default function FeedbackButton() {
             {isOpen ? "Close" : "Feedback"}
           </button>
           <div
-            className="xs:rounded-bl-lg xs:rounded-tr-none h-full w-full  overflow-hidden rounded-bl-none rounded-tr-lg rounded-tl-lg  bg-slate-50 shadow-lg"
+            className="xs:rounded-bl-lg xs:rounded-tr-none h-full w-full overflow-hidden rounded-bl-none rounded-tr-lg rounded-tl-lg bg-slate-50 shadow-lg"
             id="formbricks-feedback-wrapper"></div>
         </div>
       </div>

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

@@ -1,4 +1,4 @@
-import FeedbackButton from "./FeedbackButton";
+import { FeedbackButton } from "@/components/shared/FeedbackButton";
 import Footer from "./Footer";
 import Header from "./Header";
 import MetaInformation from "./MetaInformation";

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

@@ -1,7 +1,6 @@
-import FeedbackButton from "./FeedbackButton";
+import { FeedbackButton } from "@/components/shared/FeedbackButton";
 import Footer from "./Footer";
 import Header from "./Header";
-import Layout from "./Layout";
 import MetaInformation from "./MetaInformation";
 import { Prose } from "./Prose";
 

apps/formbricks-com/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@docsearch/react": "^3.3.2",
     "@formbricks/engine-react": "workspace:*",
+    "@formbricks/feedback": "workspace:*",
     "@formbricks/pmf": "workspace:*",
     "@formbricks/react": "workspace:*",
     "@formbricks/ui": "workspace:*",

apps/formbricks-com/pages/blog/weekly-update-060123/index.mdx

@@ -8,8 +8,6 @@ import Result from "./feedback-result.png";
 import Pipeline from "./feedback-pipelines.png";
 import CalcomPreview from "./calcom-integration-preview.png";
 
-import FeedbackButton from "@/components/shared/FeedbackButton";
-
 export const meta = {
   title: "Weekly Summary - 6th Jan 2023",
   description:

apps/web/src/components/FeedbackButton.tsx

@@ -13,9 +13,10 @@ const feedbackEnabled = !!(
 );
 
 export function FeedbackButton() {
+  const [initialized, setInitialized] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const feedbackRef = useRef<HTMLInputElement>(null);
-  const { data: session } = useSession();
+  const { data: session, status } = useSession();
 
   useEffect(() => {
     if (feedbackEnabled) {
@@ -36,7 +37,7 @@ export function FeedbackButton() {
   }, [feedbackRef, isOpen]);
 
   useEffect(() => {
-    if (session && feedbackEnabled) {
+    if (status !== "loading" && feedbackEnabled && !initialized) {
       window.formbricks = {
         ...window.formbricks,
         config: {
@@ -48,12 +49,13 @@ export function FeedbackButton() {
             position: "Co-Founder",
             imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
           },
-          customer: session.user,
+          customer: session?.user,
         },
       };
-      require("@formbricks/feedback");
+      import("@formbricks/feedback");
+      setInitialized(true);
     }
-  }, [session]);
+  }, [status, session, initialized]);
 
   if (!feedbackEnabled) return null;
 
@@ -61,7 +63,7 @@ export function FeedbackButton() {
     <>
       <div
         className={clsx(
-          "xs:flex-row xs:right-0 xs:top-1/2 xs:w-[18rem] xs:-translate-y-1/2 fixed bottom-0 z-50 h-fit w-full transition-all duration-500 ease-in-out",
+          "xs:flex-row xs:right-0 xs:top-1/2 xs:w-[18rem] xs:-translate-y-1/2 fixed bottom-0 z-50 h-[22rem] w-full transition-all duration-500 ease-in-out",
           isOpen ? "xs:-translate-x-0 translate-y-0" : "xs:translate-x-full xs:-mr-1 translate-y-full"
         )}>
         <div
@@ -84,7 +86,7 @@ export function FeedbackButton() {
             {isOpen ? "Close" : "Feedback"}
           </button>
           <div
-            className="xs:rounded-bl-lg xs:rounded-tr-none h-full w-full  overflow-hidden rounded-bl-none rounded-tr-lg rounded-tl-lg  bg-slate-50 shadow-lg"
+            className="xs:rounded-bl-lg xs:rounded-tr-none h-full h-full w-full overflow-hidden rounded-bl-none rounded-tr-lg rounded-tl-lg  bg-slate-50 shadow-lg"
             id="formbricks-feedback-wrapper"></div>
         </div>
       </div>

packages/feedback/package.json

@@ -9,8 +9,10 @@
   "type": "module",
   "license": "Apache-2.0",
   "exports": {
-    ".": "./dist"
+    "require": "./dist/index.cjs",
+    "default": "./dist/index.modern.js"
   },
+  "module": "./dist/index.module.js",
   "scripts": {
     "build": "node ./html-to-ts && microbundle --define process.env.NODE_ENV=production",
     "dev": "node ./html-to-ts && microbundle watch --define process.env.NODE_ENV=production",