diff --git a/frontend/src/app-components/widget/ChatWidget.tsx b/frontend/src/app-components/widget/ChatWidget.tsx
index 201d5edd..9b958fcd 100644
--- a/frontend/src/app-components/widget/ChatWidget.tsx
+++ b/frontend/src/app-components/widget/ChatWidget.tsx
@@ -9,7 +9,7 @@
 import { Avatar, Box } from "@mui/material";
 import UiChatWidget from "hexabot-chat-widget/src/UiChatWidget";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 
 import { getAvatarSrc } from "@/components/inbox/helpers/mapMessages";
 import { useAuth } from "@/hooks/useAuth";
@@ -17,7 +17,6 @@ import { useConfig } from "@/hooks/useConfig";
 import { useSetting } from "@/hooks/useSetting";
 import i18n from "@/i18n/config";
 import { EntityType, RouterType } from "@/services/types";
-import { generateId } from "@/utils/generateId";
 
 import { ChatWidgetHeader } from "./ChatWidgetHeader";
 
@@ -30,11 +29,10 @@ export const ChatWidget = () => {
   const isVisualEditor = pathname.startsWith(`/${RouterType.VISUAL_EDITOR}`);
   const allowedDomainsSetting = useSetting(SETTING_TYPE, "allowed_domains");
   const themeColorSetting = useSetting(SETTING_TYPE, "theme_color");
-  const [key, setKey] = useState(generateId());
-
-  useEffect(() => {
-    setKey(generateId());
-  }, [allowedDomainsSetting, themeColorSetting]);
+  const key = useMemo(
+    () => `${allowedDomainsSetting}_${themeColorSetting}`,
+    [allowedDomainsSetting, themeColorSetting],
+  );
 
   return isAuthenticated ? (
     <Box