Merge pull request #24 from shapeshift/add-chatwoot

feat: add chatwoot

.env

@@ -1,2 +1,9 @@
-VITE_FOO=bar
+# Feature flags
 VITE_FEATURE_MIXPANEL=true
+VITE_FEATURE_CHATWOOT=false
+
+VITE_FOO=bar
+
+# chat woot
+VITE_CHATWOOT_TOKEN=jmoXp9BPMSPEYHeJX5YKT15Q
+VITE_CHATWOOT_URL=https://app.chatwoot.com

src/App.tsx

@@ -2,6 +2,7 @@ import './App.css'
 
 import { Center } from '@chakra-ui/react'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { ChatwootButton } from 'components/Chatwoot'
 import { SelectPair } from 'components/SelectPair'
 import { Status } from 'components/Status/Status'
 import { TradeInput } from 'components/TradeInput'
@@ -27,6 +28,7 @@ function App() {
   return (
     <Center width='full' height='100vh' flexDir='column'>
       <RouterProvider router={router} />
+      <ChatwootButton />
     </Center>
   )
 }

src/components/Chatwoot.tsx

@@ -0,0 +1,38 @@
+import { Button } from '@chakra-ui/react'
+import { useCallback, useEffect } from 'react'
+
+export const ChatwootButton: React.FC = () => {
+  const chatWootEnabled = import.meta.env.VITE_FEATURE_CHATWOOT
+  useEffect(() => {
+    if (!chatWootEnabled) return // Add Chatwoot Settings
+    ;(window as any).chatwootSettings = {
+      hideMessageBubble: true,
+      position: 'left', // This can be left or right
+      locale: 'en', // Language to be set
+      type: 'standard', // [standard, expanded_bubble]
+    }
+
+    // Paste the script from inbox settings except the <script> tag
+    ;(function (d: Document) {
+      const BASE_URL = import.meta.env.VITE_CHATWOOT_URL
+      const g = d.createElement('script')
+      const s = d.getElementsByTagName('script')[0]
+      g.src = BASE_URL + '/packs/js/sdk.js'
+      s.parentNode?.insertBefore(g, s)
+      g.async = true
+      g.onload = function () {
+        ;(window as any).chatwootSDK.run({
+          websiteToken: import.meta.env.VITE_CHATWOOT_TOKEN,
+          baseUrl: BASE_URL,
+        })
+      }
+    })(document)
+  }, [chatWootEnabled])
+
+  const handleChatWoot = useCallback(() => {
+    // @ts-ignore
+    if (window.$chatwoot) window.$chatwoot.toggle()
+  }, [])
+
+  return chatWootEnabled ? <Button onClick={handleChatWoot}>Get support</Button> : null
+}

src/env.d.ts

@@ -4,6 +4,9 @@ interface ImportMetaEnv {
   readonly VITE_FOO: string
   readonly VITE_FEATURE_MIXPANEL: boolean
   readonly VITE_MIXPANEL_TOKEN: string
+  readonly VITE_CHATWOOT_URL: string
+  readonly VITE_CHATWOOT_TOKEN: string
+  readonly VITE_FEATURE_CHATWOOT: boolean
 }
 
 interface ImportMeta {