chatwoot integration

ever-co · Oct 24, 2023 · 749c7c9 · 749c7c9
1 parent 3fa899c
commit 749c7c9
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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 (
 		<>
 			<Script
@@ -32,26 +32,23 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 			</Script>
 			<Head>
 				<link rel="preconnect" href="https://fonts.googleapis.com" />
-				<link
-					rel="preconnect"
-					href="https://fonts.gstatic.com"
-					crossOrigin=""
-				/>
+				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
 			</Head>
 			<JitsuProvider
 				options={
 					isJitsuEnvsPresent
 						? { ...jitsuConfiguration }
 						: {
 								disabled: true
-							}
+						  }
 				}
 			>
 				<RecoilRoot>
 					<ThemeProvider attribute="class">
 						<SkeletonTheme baseColor="#F0F0F0" enableAnimation={false}>
 							<AppState />
 							<JitsuAnalytics user={pageProps?.user} />
+							<ChatwootWidget />
 							<Component {...pageProps} />
 						</SkeletonTheme>
 					</ThemeProvider>