feat(app): ✨ Add support bubble

apps/builder/components/share/codeSnippets/params.ts

@@ -139,4 +139,4 @@ export const parseInitBubbleCode = ({
   )
 }
 
-export const typebotJsHtml = `<script src="https://unpkg.com/typebot-js@2.0.20"></script>`
+export const typebotJsHtml = `<script src="https://unpkg.com/typebot-js@2.1.0"></script>`

apps/builder/components/shared/SupportBubble.tsx

@@ -0,0 +1,19 @@
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+import { initBubble } from 'typebot-js'
+
+export const SupportBubble = () => {
+  const router = useRouter()
+
+  useEffect(() => {
+    initBubble({
+      publishId: 'typebot-support',
+      viewerHost: process.env.NEXT_PUBLIC_VIEWER_HOST,
+      backgroundColor: '#ffffff',
+      button: { color: '#0042DA' },
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router])
+
+  return <></>
+}

apps/builder/package.json

@@ -75,7 +75,7 @@
     "styled-components": "^5.3.3",
     "svg-round-corners": "^0.3.0",
     "swr": "^1.2.0",
-    "typebot-js": "2.0.21",
+    "typebot-js": "^2.1.0",
     "use-debounce": "^7.0.1",
     "use-immer": "^0.6.0",
     "utils": "*"

apps/builder/pages/_app.tsx

@@ -16,6 +16,7 @@ import { useRouter } from 'next/router'
 import { KBarProvider } from 'kbar'
 import { actions } from 'libs/kbar'
 import { enableMocks } from 'mocks'
+import { SupportBubble } from 'components/shared/SupportBubble'
 
 if (process.env.NEXT_PUBLIC_AUTH_MOCKING === 'enabled') enableMocks()
 
@@ -36,6 +37,7 @@ const App = ({ Component, pageProps }: AppProps) => {
             ) : (
               <Component {...pageProps} />
             )}
+            <SupportBubble />
           </UserContext>
         </SessionProvider>
       </KBarProvider>

yarn.lock

@@ -9380,11 +9380,16 @@ type-fest@^1.2.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
   integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
 
-typebot-js@2.0.21, typebot-js@^2.0.21:
+typebot-js@^2.0.21:
   version "2.0.21"
   resolved "https://registry.yarnpkg.com/typebot-js/-/typebot-js-2.0.21.tgz#1211ef4ffbf8f69facf538721073ec17660283b9"
   integrity sha512-7a0vODc1MLYe2u9TtaO7u0Sz9V9+3Tk+YeY2cXjDgWEhFWNcUPyBZOJZMB5EDir5/togTMTIYr/TCm6fyGRi2Q==
 
+typebot-js@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/typebot-js/-/typebot-js-2.1.0.tgz#e6e53e2fe83b7ac0f19cebfbba645fccc62ef8d3"
+  integrity sha512-0TavPmB8TFnmzopb9CaUCWjf0HZ6YYElnz7S6FJ08qE82SmUkx/vJ6+EhClVbV0ERBbNt5iSiSFFc8hnw1Xarg==
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"