diff --git a/src/components/crisp-chat.tsx b/src/components/crisp-chat.tsx
index d2703a7f0..7b718063b 100644
--- a/src/components/crisp-chat.tsx
+++ b/src/components/crisp-chat.tsx
@@ -28,7 +28,7 @@ export const ChatButton: React.VoidFunctionComponent<{ text?: string }> = ({
   );
 };
 
-const CrispChat: React.VoidFunctionComponent = () => {
+export const useCrispChat = () => {
   React.useEffect(() => {
     if (!crispWebsiteId) {
       return;
@@ -44,8 +44,4 @@ const CrispChat: React.VoidFunctionComponent = () => {
       window.$crisp.push(["safe", true]); // disable warning about other event listeners
     })();
   });
-
-  return null;
 };
-
-export default CrispChat;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 0af00c10b..f6b1047ed 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -4,7 +4,6 @@ import "~/style.css";
 
 import { NextPage } from "next";
 import { AppProps } from "next/app";
-import dynamic from "next/dynamic";
 import Head from "next/head";
 import { appWithTranslation } from "next-i18next";
 import PlausibleProvider from "next-plausible";
@@ -13,14 +12,13 @@ import { Toaster } from "react-hot-toast";
 
 import Maintenance from "@/components/maintenance";
 
+import { useCrispChat } from "../components/crisp-chat";
 import { absoluteUrl } from "../utils/absolute-url";
 import { trpcNext } from "../utils/trpc";
 
-const CrispChat = dynamic(() => import("@/components/crisp-chat"), {
-  ssr: false,
-});
-
 const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
+  useCrispChat();
+
   if (process.env.NEXT_PUBLIC_MAINTENANCE_MODE === "1") {
     return <Maintenance />;
   }
@@ -57,7 +55,6 @@ const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
           content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
         />
       </Head>
-      <CrispChat />
       <Toaster />
       <Component {...pageProps} />
     </PlausibleProvider>