diff --git a/apps/web/.env b/apps/web/.env index 63728dde8..9378972b6 100644 --- a/apps/web/.env +++ b/apps/web/.env @@ -57,3 +57,6 @@ JITSU_BROWSER_WRITE_KEY= # Github Integration NEXT_PUBLIC_GITHUB_APP_NAME=ever-github + +# Chatwoot +NEXT_PUBLIC_CHATWOOT_API_KEY= diff --git a/apps/web/lib/features/integrations/chatwoot/index.tsx b/apps/web/lib/features/integrations/chatwoot/index.tsx new file mode 100644 index 000000000..9bcce5240 --- /dev/null +++ b/apps/web/lib/features/integrations/chatwoot/index.tsx @@ -0,0 +1,42 @@ +import React, { useEffect } from 'react'; + +declare global { + interface Window { + chatwootSettings: any; + chatwootSDK: any; + } +} + +export default function ChatwootWidget() { + useEffect(() => { + const websiteToken = process.env.NEXT_PUBLIC_CHATWOOT_API_KEY; + if (!websiteToken) { + return; + } + + window.chatwootSettings = { + hideMessageBubble: false, + position: 'right', + locale: 'en', + type: 'standard' + }; + + (function (d, t) { + const BASE_URL = 'https://app.chatwoot.com'; + const g = d.createElement(t) as HTMLScriptElement; + const s = d.getElementsByTagName(t)[0]; + + g.src = BASE_URL + '/packs/js/sdk.js'; + s.parentNode && s.parentNode.insertBefore(g, s); + g.async = !0; + g.onload = function () { + window.chatwootSDK.run({ + websiteToken: websiteToken, + baseUrl: BASE_URL + }); + }; + })(document, 'script'); + }, []); + + return <>; +} diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx index 4702f2251..0642f3b2a 100644 --- a/apps/web/pages/_app.tsx +++ b/apps/web/pages/_app.tsx @@ -14,10 +14,10 @@ import { JitsuProvider } from '@jitsu/jitsu-react'; import React from 'react'; import { JitsuAnalytics } from '../lib/components/services/jitsu-analytics'; import { jitsuConfiguration } from '@app/constants'; +import ChatwootWidget from 'lib/features/integrations/chatwoot'; export default function MyApp({ Component, pageProps }: AppProps) { - const isJitsuEnvsPresent = - jitsuConfiguration.host && jitsuConfiguration.writeKey; + const isJitsuEnvsPresent = jitsuConfiguration.host && jitsuConfiguration.writeKey; return ( <>