Merge pull request #1109 from tailwarden/integrate-formbricks

feat: integrate formbricks in-app survey
tailwarden · Oct 17, 2023 · 89fa3fb · 89fa3fb
2 parents ee90608 + 5c5719f
commit 89fa3fb
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 121 deletions.
diff --git a/dashboard/environments/environment.ts b/dashboard/environments/environment.ts
@@ -5,7 +5,8 @@ const environment = {
     : '',
   GA_TRACKING_ID: 'G-9HF3HT6S6W',
   SENTRY_URL:
-    'https://b4b98ad60a89468284cf8aa5d66cf2cd@o1267000.ingest.sentry.io/4504797672701952'
+    'https://b4b98ad60a89468284cf8aa5d66cf2cd@o1267000.ingest.sentry.io/4504797672701952',
+  FORMBRICKS_ENV_ID: 'clnmmpeg01ci3o50fu5wy89zn'
 };
 
 export default environment;
diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -15,6 +15,7 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@formbricks/js": "^1.1.2",
     "@sentry/react": "^7.41.0",
     "@sentry/tracing": "^7.41.0",
     "@tippyjs/react": "^4.2.6",

diff --git a/dashboard/pages/_app.tsx b/dashboard/pages/_app.tsx
@@ -1,6 +1,10 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
+import formbricks from '@formbricks/js';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import Layout from '../components/layout/Layout';
+import environment from '../environments/environment';
 
 const printHiringMessage = () => {
   // eslint-disable-next-line no-console
@@ -22,9 +26,25 @@ const printHiringMessage = () => {
 
 if (typeof window !== 'undefined') {
   printHiringMessage();
+  formbricks.init({
+    environmentId: environment.FORMBRICKS_ENV_ID,
+    apiHost: 'https://app.formbricks.com',
+    debug: false // remove when in production
+  });
 }
 
 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 (
     <Layout>
       <Component {...pageProps} />