add crisp.chat support widget

package-lock.json

@@ -26,6 +26,7 @@
         "@types/recordrtc": "^5.6.11",
         "@upstash/qstash": "^0.3.6",
         "axios": "^1.3.5",
+        "crisp-sdk-web": "^1.0.18",
         "dayjs": "^1.11.7",
         "file-saver": "^2.0.5",
         "fix-webm-duration": "^1.0.5",
@@ -3112,6 +3113,11 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/crisp-sdk-web": {
+      "version": "1.0.18",
+      "resolved": "https://registry.npmjs.org/crisp-sdk-web/-/crisp-sdk-web-1.0.18.tgz",
+      "integrity": "sha512-QjmtIY/GOhQenW9liswMAhzaZUKTn8JQjqLZkzMcnhdm3AlrMB83r2gIBUOxSZmSL80K3pl8U1ATadpC0ImEeA=="
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -9438,6 +9444,11 @@
         "is-what": "^4.1.8"
       }
     },
+    "crisp-sdk-web": {
+      "version": "1.0.18",
+      "resolved": "https://registry.npmjs.org/crisp-sdk-web/-/crisp-sdk-web-1.0.18.tgz",
+      "integrity": "sha512-QjmtIY/GOhQenW9liswMAhzaZUKTn8JQjqLZkzMcnhdm3AlrMB83r2gIBUOxSZmSL80K3pl8U1ATadpC0ImEeA=="
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

package.json

@@ -34,6 +34,7 @@
     "@types/recordrtc": "^5.6.11",
     "@upstash/qstash": "^0.3.6",
     "axios": "^1.3.5",
+    "crisp-sdk-web": "^1.0.18",
     "dayjs": "^1.11.7",
     "file-saver": "^2.0.5",
     "fix-webm-duration": "^1.0.5",

src/components/CrispChat.tsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { Crisp } from "crisp-sdk-web";
+import { env } from "~/env.mjs";
+
+export default function CrispChat() {
+  useEffect(() => {
+    Crisp.configure(env.NEXT_PUBLIC_CRISP_WEBSITE_ID);
+  }, []);
+
+  return null;
+}

src/env.mjs

@@ -41,6 +41,7 @@ const server = z.object({
 const client = z.object({
   // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string(),
+  NEXT_PUBLIC_CRISP_WEBSITE_ID: z.string(),
 });
 
 /**
@@ -70,6 +71,7 @@ const processEnv = {
   STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
   STRIPE_MONTHLY_PRICE_ID: process.env.STRIPE_MONTHLY_PRICE_ID,
   STRIPE_ANNUAL_PRICE_ID: process.env.STRIPE_ANNUAL_PRICE_ID,
+  NEXT_PUBLIC_CRISP_WEBSITE_ID: process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID,
 };
 
 // Don't touch the part below

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import { SessionProvider } from "next-auth/react";
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
+import CrispChat from "~/components/CrispChat";
 
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
@@ -13,6 +14,7 @@ const MyApp: AppType<{ session: Session | null }> = ({
   return (
     <SessionProvider session={session}>
       <Component {...pageProps} />
+      <CrispChat />
     </SessionProvider>
   );
 };