@envive-ai/react-widgets-v3 0.3.11 → 0.3.13

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.js

@@ -10,21 +10,21 @@ import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoadi
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.tsx
 const TypingAnimationFlowWidget = ({ widgetConfigId }) => {
 	const { userHasInteractedValue, userHasNotInteractedValue, isLoadingValue, isProductComparisonValue } = useGetWidgetStatus_default();
-	if (userHasInteractedValue) return /* @__PURE__ */ jsx(ChatPreviewWidgetWithBaseWidget, {
+	if (userHasInteractedValue && isLoadingValue) return /* @__PURE__ */ jsx(ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.ChatPreviewV3
+		widgetType: WidgetTypeV3.ChatPreviewLoadingV3
 	});
-	if (userHasNotInteractedValue) return /* @__PURE__ */ jsx(TypingAnimationWithBaseWidget, {
+	if (userHasInteractedValue && isProductComparisonValue) return /* @__PURE__ */ jsx(ChatPreviewComparisonWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.TypingAnimationV3
+		widgetType: WidgetTypeV3.ChatPreviewComparisonV3
 	});
-	if (isLoadingValue) return /* @__PURE__ */ jsx(ChatPreviewLoadingWidgetWithBaseWidget, {
+	if (userHasInteractedValue) return /* @__PURE__ */ jsx(ChatPreviewWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.ChatPreviewLoadingV3
+		widgetType: WidgetTypeV3.ChatPreviewV3
 	});
-	if (isProductComparisonValue) return /* @__PURE__ */ jsx(ChatPreviewComparisonWidgetWithBaseWidget, {
+	if (userHasNotInteractedValue) return /* @__PURE__ */ jsx(TypingAnimationWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.ChatPreviewComparisonV3
+		widgetType: WidgetTypeV3.TypingAnimationV3
 	});
 	return /* @__PURE__ */ jsx(ChatPreviewLoading, { fullIsLoading: true });
 };

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime2.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime7.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime2.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime7.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/dist/SearchResults/SearchResultsWidget.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime2.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts
 //#region src/SearchZeroState/SearchZeroStateWidget.d.ts
@@ -11,7 +11,7 @@ declare const SearchZeroStateWidget: ({
   initialIsOpen,
   widgetConfigId,
   entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime0.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",

package/src/CXIntegration/hooks/useUnifiedCXButton.ts

@@ -9,7 +9,8 @@ interface UseUnifiedCXButtonProps {
   enabled: boolean;
   provider: CustomerServiceType;
   suppressMerchantButton?: boolean;
-  onSwitchToAgent?: () => void;
+  onSwitchToAgent: () => void;
+  onCXClose?: () => void;
 }
 
 export const useUnifiedCXButton = ({
@@ -17,6 +18,7 @@ export const useUnifiedCXButton = ({
   provider = CustomerServiceType.unsupported,
   suppressMerchantButton = false,
   onSwitchToAgent,
+  onCXClose,
 }: UseUnifiedCXButtonProps): UnifiedCXButton | undefined => {
   const { isSupported } = usePage();
   const hasParsedVariantInfo = useAtomValue(hasParsedVariantInfoAtom);
@@ -25,6 +27,7 @@ export const useUnifiedCXButton = ({
 
   const selectedCustomerService = customerService({
     onSwitchToAgent,
+    onCXClose,
     suppressMerchantButton,
   });
 

package/src/CXIntegration/implementations/useEightByEightUnifiedCXButton.ts

@@ -0,0 +1,91 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+interface UseEightByEightUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+const EIGHT_BY_EIGHT_BUBBLE_SELECTOR = 'div[id^="__8x8-chat-button-container-script"]';
+
+const EIGHT_BY_EIGHT_BUTTON_SELECTOR = `${EIGHT_BY_EIGHT_BUBBLE_SELECTOR} a[data-type="online"], ${EIGHT_BY_EIGHT_BUBBLE_SELECTOR} a[data-type="offline"]`;
+
+const EIGHT_BY_EIGHT_CHAT_WINDOW_SELECTOR = 'div.__8x8Chat-Container';
+
+export const useEightByEightUnifiedCXButton = ({
+  onSwitchToAgent,
+  onCXClose,
+  suppressMerchantButton,
+}: UseEightByEightUnifiedCXButtonProps): UnifiedCXButton => {
+  const eightByEightBubble = useElementObserver(
+    SelectorFactory.query(EIGHT_BY_EIGHT_BUBBLE_SELECTOR),
+  );
+  const eightByEightChatWindow = useElementObserver(
+    SelectorFactory.query(EIGHT_BY_EIGHT_CHAT_WINDOW_SELECTOR),
+  );
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const isEightByEightEnabled = () => !!document.querySelector(EIGHT_BY_EIGHT_BUTTON_SELECTOR);
+
+  const toggle = () => {
+    const button = document.querySelector(EIGHT_BY_EIGHT_BUTTON_SELECTOR) as HTMLElement | null;
+
+    if (!button) {
+      return;
+    }
+
+    onSwitchToAgent();
+    enviveFloatingButton.hide();
+
+    button.click();
+  };
+
+  const isSwitchEnabled = () => isEightByEightEnabled();
+
+  eightByEightBubble.onAdd(el => {
+    if (suppressMerchantButton && el) {
+      eightByEightBubble.hide();
+    }
+    enviveFloatingButton.show();
+  });
+
+  eightByEightBubble.onChange(el => {
+    if (!el || !suppressMerchantButton) return;
+
+    const styles = window.getComputedStyle(el);
+    const display = styles.getPropertyValue('display');
+    if (display !== 'none') {
+      eightByEightBubble.hide();
+    }
+  });
+
+  eightByEightChatWindow.onChange(el => {
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const isOpen = rect.width > 50 && rect.height > 50;
+
+    if (isOpen) {
+      enviveFloatingButton.hide();
+      return;
+    }
+
+    onCXClose?.();
+    if (suppressMerchantButton) {
+      eightByEightBubble.hide();
+    }
+    enviveFloatingButton.show();
+  });
+
+  eightByEightChatWindow.onRemove(() => {
+    onCXClose?.();
+    if (suppressMerchantButton) {
+      eightByEightBubble.hide();
+    }
+    enviveFloatingButton.show();
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useGladlyUnifiedCXButton.ts

@@ -1,3 +1,6 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 interface UseGladlyUnifiedCXButtonProps extends CustomerServiceImplProps {}
@@ -6,9 +9,11 @@ export const useGladlyUnifiedCXButton = ({
   onSwitchToAgent,
 }: UseGladlyUnifiedCXButtonProps): UnifiedCXButton => {
   const gladlyButton = document.querySelector('[data-aid*="gladlyChatChatButton"]');
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
     onSwitchToAgent();
+    enviveFloatingButton.hide();
     if (gladlyButton && gladlyButton instanceof HTMLElement) {
       gladlyButton.click();
     }

package/src/CXIntegration/implementations/useGorgiasUnifiedCXButton.ts

@@ -11,6 +11,7 @@ interface UseGorgiasUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useGorgiasUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseGorgiasUnifiedCXButtonProps): UnifiedCXButton => {
   const chatWindow = useElementObserver(SelectorFactory.id(CHAT_WINDOW_ID));
@@ -22,10 +23,7 @@ export const useGorgiasUnifiedCXButton = ({
     onSwitchToAgent();
     chatButton.show();
     trigger.fire('click');
-
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
   };
 
   const isSwitchEnabled = () => !!SelectorFactory.chain(GORGIAS_BUTTON_SELECTOR).parse();
@@ -38,23 +36,28 @@ export const useGorgiasUnifiedCXButton = ({
   });
 
   chatWindow.onAdd(el => {
-    if (el && suppressMerchantButton) {
+    if (el) {
       const styles = window.getComputedStyle(el);
       const chatWindowDisplay = styles.getPropertyValue('display');
       const chatButtonDisplay = chatButton.targetNode?.style.display;
 
       if (chatWindowDisplay === 'block' && chatButtonDisplay === 'none') {
-        chatButton.show();
+        if (suppressMerchantButton) {
+          chatButton.show();
+        }
         enviveFloatingButton.hide();
       }
     }
   });
 
   chatWindow.onChange(el => {
-    if (el && suppressMerchantButton) {
+    if (el) {
       const styles = window.getComputedStyle(el);
       if (styles.getPropertyValue('display') === 'none') {
-        chatButton.hide();
+        onCXClose?.();
+        if (suppressMerchantButton) {
+          chatButton.hide();
+        }
         enviveFloatingButton.show();
       }
     }

package/src/CXIntegration/implementations/useGrooveUnifiedCXButton.ts

@@ -22,6 +22,7 @@ interface UseGrooveUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useGrooveUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseGrooveUnifiedCXButtonProps): UnifiedCXButton => {
   const grooveChatContainer = useElementObserver(
@@ -32,10 +33,7 @@ export const useGrooveUnifiedCXButton = ({
   const previousIsOpenRef = useRef<boolean | undefined>(undefined);
 
   const toggle = () => {
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
-
+    enviveFloatingButton.hide();
     onSwitchToAgent();
     if (windowGrooveWidget) {
       windowGrooveWidget.open();
@@ -48,30 +46,29 @@ export const useGrooveUnifiedCXButton = ({
 
   const hideEnviveFloatingButton = () => {
     enviveFloatingButton.hide();
-    if (windowGrooveWidget) {
+    if (suppressMerchantButton && windowGrooveWidget) {
       windowGrooveWidget.open();
     }
   };
 
   const showEnviveFloatingButton = () => {
+    onCXClose?.();
     enviveFloatingButton.show();
-    if (windowGrooveWidget) {
+    if (suppressMerchantButton && windowGrooveWidget) {
       windowGrooveWidget.close();
     }
   };
 
   grooveChatContainer.onChange(() => {
-    if (suppressMerchantButton) {
-      const isOpen = windowGrooveWidget?.shim.isOpen;
+    const isOpen = windowGrooveWidget?.shim.isOpen;
 
-      if (isOpen !== previousIsOpenRef.current) {
-        previousIsOpenRef.current = isOpen;
+    if (isOpen !== previousIsOpenRef.current) {
+      previousIsOpenRef.current = isOpen;
 
-        if (isOpen) {
-          hideEnviveFloatingButton();
-        } else {
-          showEnviveFloatingButton();
-        }
+      if (isOpen) {
+        hideEnviveFloatingButton();
+      } else {
+        showEnviveFloatingButton();
       }
     }
   });

package/src/CXIntegration/implementations/useKustomerUnifiedCXButton.ts

@@ -7,6 +7,7 @@ interface UseKustomerUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useKustomerUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseKustomerUnifiedCXButtonProps): UnifiedCXButton => {
   const kustomerButton = useElementObserver(
@@ -24,9 +25,7 @@ export const useKustomerUnifiedCXButton = ({
 
   const toggle = () => {
     onSwitchToAgent();
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
     kustomerButton.show();
     kustomerButton.fire('click');
   };
@@ -53,16 +52,17 @@ export const useKustomerUnifiedCXButton = ({
   });
 
   kustomerWidgetRoot.onChange(async el => {
-    if (suppressMerchantButton) {
-      for (const child of el?.children || []) {
-        if ([...child.classList].some(cls => cls.includes('widget__widgetWrapper'))) {
-          enviveFloatingButton.hide();
+    for (const child of el?.children || []) {
+      if ([...child.classList].some(cls => cls.includes('widget__widgetWrapper'))) {
+        enviveFloatingButton.hide();
+        if (suppressMerchantButton) {
           kustomerButton.show();
           kustomerNotification.show();
-        } else if (
-          [...child.classList].some(cls => cls.includes('chatRootIcon__chatIconWrapper'))
-        ) {
-          enviveFloatingButton.show();
+        }
+      } else if ([...child.classList].some(cls => cls.includes('chatRootIcon__chatIconWrapper'))) {
+        onCXClose?.();
+        enviveFloatingButton.show();
+        if (suppressMerchantButton) {
           kustomerButton.hide();
           kustomerNotification.hide();
         }

package/src/CXIntegration/implementations/useReDoUnifiedCXButton.ts

@@ -13,6 +13,7 @@ interface UseReDoUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useReDoUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseReDoUnifiedCXButtonProps): UnifiedCXButton => {
   const chatContainer = useElementObserver(SelectorFactory.id(REDO_CHAT_CONTAINER_SELECTOR));
@@ -25,10 +26,7 @@ export const useReDoUnifiedCXButton = ({
     onSwitchToAgent();
     chatButton.show();
     chatButton.fire('click');
-
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
   };
 
   const isReDoButtonEnabled = () => !!SelectorFactory.chain(REDO_BUTTON_SELECTOR).parse();

package/src/CXIntegration/implementations/useRichpanelUnifiedCXButton.ts

@@ -7,6 +7,7 @@ interface UseRichpanelUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useRichpanelUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseRichpanelUnifiedCXButtonProps): UnifiedCXButton => {
   const chatWindow = useElementObserver(
@@ -21,21 +22,16 @@ export const useRichpanelUnifiedCXButton = ({
   const toggle = () => {
     chatWindow.show();
     onSwitchToAgent();
+    enviveFloatingButton.hide();
 
     if (chatButton) {
       chatButton.show();
       chatButton.fire('click');
-      if (suppressMerchantButton) {
-        enviveFloatingButton.hide();
-      }
     }
 
     if (chatAlternativeButton) {
       chatAlternativeButton.show();
       chatAlternativeButton.fire('click');
-      if (suppressMerchantButton) {
-        enviveFloatingButton.hide();
-      }
     }
   };
 
@@ -62,16 +58,19 @@ export const useRichpanelUnifiedCXButton = ({
   });
 
   chatWindow.onChange(el => {
-    if (el && suppressMerchantButton) {
+    if (el) {
       const { classList } = el;
       if (classList.contains('opened')) {
         enviveFloatingButton.hide();
         chatWindow.show();
       } else if (classList.length === 1 && classList.contains('rp-messenger-container')) {
+        onCXClose?.();
         enviveFloatingButton.show();
-        chatButton.hide();
-        chatAlternativeButton.hide();
-        chatWindow.hide();
+        if (suppressMerchantButton) {
+          chatButton.hide();
+          chatAlternativeButton.hide();
+          chatWindow.hide();
+        }
       }
     }
   });

package/src/CXIntegration/implementations/useShopifyChatUnifiedCXButton.ts

@@ -7,6 +7,7 @@ interface UseShopifyChatUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useShopifyChatUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseShopifyChatUnifiedCXButtonProps): UnifiedCXButton => {
   const shopifyChatContainer = useElementObserver(SelectorFactory.id('ShopifyChat'));
@@ -16,9 +17,7 @@ export const useShopifyChatUnifiedCXButton = ({
   const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
     shopifyButton.show();
     onSwitchToAgent();
     shopifyButton.fire('click');
@@ -30,45 +29,36 @@ export const useShopifyChatUnifiedCXButton = ({
 
   const isSwitchEnabled = () => isShopifyButtonEnabled();
 
-  const hideEnviveFloatingButton = () => {
-    enviveFloatingButton.hide();
-    shopifyButton.show();
-  };
-
-  const showEnviveFloatingButton = () => {
-    enviveFloatingButton.show();
-    shopifyButton.hide();
-    shopifyChatContainer.hide();
-  };
-
   const handleChatStateChange = async (isOpen: boolean) => {
     if (isOpen) {
-      hideEnviveFloatingButton();
+      enviveFloatingButton.hide();
+      if (suppressMerchantButton) {
+        shopifyButton.show();
+      }
       return;
     }
 
-    showEnviveFloatingButton();
+    onCXClose?.();
+    enviveFloatingButton.show();
+    if (suppressMerchantButton) {
+      shopifyButton.hide();
+      shopifyChatContainer.hide();
+    }
   };
 
   shopifyButton.onAdd(() => {
-    if (suppressMerchantButton) {
-      const isOpen = shopifyChatContainer.targetNode?.getAttribute('is-open') === 'true';
-      handleChatStateChange(isOpen);
-    }
+    const isOpen = shopifyChatContainer.targetNode?.getAttribute('is-open') === 'true';
+    handleChatStateChange(isOpen);
   });
 
   shopifyChatContainer.onAdd(el => {
-    if (suppressMerchantButton) {
-      const isOpen = el?.getAttribute('is-open') === 'true';
-      handleChatStateChange(isOpen);
-    }
+    const isOpen = el?.getAttribute('is-open') === 'true';
+    handleChatStateChange(isOpen);
   });
 
   shopifyChatContainer.onChange(el => {
-    if (suppressMerchantButton) {
-      const isOpen = el?.getAttribute('is-open') === 'true';
-      handleChatStateChange(isOpen);
-    }
+    const isOpen = el?.getAttribute('is-open') === 'true';
+    handleChatStateChange(isOpen);
   });
 
   return {

package/src/CXIntegration/implementations/useTidioUnifiedCXButton.ts

@@ -1,3 +1,6 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 declare global {
@@ -15,9 +18,11 @@ export const useTidioUnifiedCXButton = ({
   onSwitchToAgent,
 }: UseTidioUnifiedCXButtonProps): UnifiedCXButton => {
   const tidioButton = window.tidioChatApi;
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
     onSwitchToAgent();
+    enviveFloatingButton.hide();
     if (tidioButton) {
       tidioButton.open();
     }

package/src/CXIntegration/implementations/useZendeskUnifiedCXButton.ts

@@ -7,20 +7,21 @@ interface UseZendeskUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useZendeskUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseZendeskUnifiedCXButtonProps): UnifiedCXButton => {
-  const zendeskButton = useElementObserver(SelectorFactory.chain('id|launcher @ query|button'));
+  const zendeskButton = useElementObserver(
+    SelectorFactory.chain('query|iframe#launcher @ query|button'),
+  );
   const zendeskAlternativeIframe = useElementObserver(SelectorFactory.chain('id|webWidget'));
   const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
-  const zendeskIframe = useElementObserver(SelectorFactory.id('launcher'));
+  const zendeskIframe = useElementObserver(SelectorFactory.query('iframe#launcher'));
 
   const toggle = () => {
     zendeskIframe.hide();
     onSwitchToAgent();
     zendeskButton.fire('click');
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
   };
 
   const isZendeskButtonEnabled = () => {
@@ -40,22 +41,28 @@ export const useZendeskUnifiedCXButton = ({
   });
 
   zendeskButton.onChange(el => {
-    if (el && suppressMerchantButton) {
+    if (el) {
       const ariaLabel = el.getAttribute('aria-label');
 
       if (ariaLabel === 'Open messaging window') {
+        onCXClose?.();
         enviveFloatingButton.show();
-        zendeskIframe.hide();
+        if (suppressMerchantButton) {
+          zendeskIframe.hide();
+        }
       }
 
       if (ariaLabel === 'Close messaging window') {
         enviveFloatingButton.hide();
-        zendeskIframe.show();
+        if (suppressMerchantButton) {
+          zendeskIframe.show();
+        }
       }
     }
   });
 
   zendeskAlternativeIframe.onRemove(() => {
+    onCXClose?.();
     if (suppressMerchantButton) {
       enviveFloatingButton.show();
       zendeskIframe.hide();

package/src/CXIntegration/implementations/useZowieUnifiedCXButton.ts

@@ -1,3 +1,6 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 declare global {
@@ -15,9 +18,11 @@ export const useZowieUnifiedCXButton = ({
   onSwitchToAgent,
 }: UseZowieUnifiedCXButtonProps): UnifiedCXButton => {
   const zowieButton = window?.Zowie;
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
     onSwitchToAgent();
+    enviveFloatingButton.hide();
     if (zowieButton) {
       zowieButton?.open();
     }