@envive-ai/react-widgets-v3 0.3.12 → 0.3.14

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.cjs

@@ -11,21 +11,21 @@ let __envive_ai_react_toolkit_v3_ChatPreviewLoading = require("@envive-ai/react-
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.tsx
 const TypingAnimationFlowWidget = ({ widgetConfigId }) => {
 	const { userHasInteractedValue, userHasNotInteractedValue, isLoadingValue, isProductComparisonValue } = require_useGetWidgetStatus.default();
-	if (userHasInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewWidget.ChatPreviewWidgetWithBaseWidget, {
+	if (userHasInteractedValue && isLoadingValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewLoadingWidget.ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewLoadingV3
 	});
-	if (userHasNotInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TypingAnimationWidget.TypingAnimationWithBaseWidget, {
+	if (userHasInteractedValue && isProductComparisonValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewComparisonWidget.ChatPreviewComparisonWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.TypingAnimationV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewComparisonV3
 	});
-	if (isLoadingValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewLoadingWidget.ChatPreviewLoadingWidgetWithBaseWidget, {
+	if (userHasInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewWidget.ChatPreviewWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewLoadingV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewV3
 	});
-	if (isProductComparisonValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewComparisonWidget.ChatPreviewComparisonWidgetWithBaseWidget, {
+	if (userHasNotInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TypingAnimationWidget.TypingAnimationWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewComparisonV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.TypingAnimationV3
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ChatPreviewLoading.ChatPreviewLoading, { fullIsLoading: true });
 };

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts
 interface TypingAnimationFlowWidgetProps {
@@ -7,7 +7,7 @@ interface TypingAnimationFlowWidgetProps {
 declare const TypingAnimationFlowWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationFlowWidgetProps): react_jsx_runtime1.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts
 interface TypingAnimationFlowWidgetProps {
@@ -7,7 +7,7 @@ interface TypingAnimationFlowWidgetProps {
 declare const TypingAnimationFlowWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationFlowWidgetProps): react_jsx_runtime8.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime1.JSX.Element;
   displayName: string;
 };
 //#endregion

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.cjs

@@ -1,6 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
+const require_functions = require('../utils/functions.cjs');
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -28,7 +29,7 @@ const mockHintText = "Ask me anything";
 const TypingAnimationWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const onToggle = (0, jotai.useSetAtom)(__envive_ai_react_hooks_atoms_chat_chatState.chatOnToggleAtom);
-	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+	const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
 	const titleLabel = hardcopyContent?.values?.titleLabel || "";
 	const headlineText = hardcopyContent?.values?.headlineText || "";
 	const animatedTextSequence = hardcopyContent?.values?.animatedTextSequence || [];
@@ -43,6 +44,8 @@ const TypingAnimationWidgetHandler = (props) => {
 	const promptButtonType = typingAnimationWidgetConfig?.promptButtonType || __envive_ai_react_toolkit_v3_PromptButton_types.PromptButtonVariant.LIGHT;
 	const promptCarouselRows = typingAnimationWidgetConfig?.promptCarouselRows || __envive_ai_react_toolkit_v3_PromptCarousel.PromptCarouselRows.ALWAYS_ONE;
 	const showTextField = typingAnimationWidgetConfig?.showTextField !== false;
+	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
+	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
 	(0, react.useEffect)(() => {
 		trackEvent({
@@ -54,13 +57,28 @@ const TypingAnimationWidgetHandler = (props) => {
 		});
 	}, [trackEvent, widgetConfigId]);
 	const handleButtonClick = (0, react.useCallback)((text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		const stringId = require_functions.getStringIdForText(rawValues, text);
+		trackEvent({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetTextClicked,
+			eventProps: {
+				response_id: hardcopyContent?.responseId,
+				string_id: stringId,
+				text
+			}
+		});
 		onTypedMessageSubmitted({
 			query: text,
 			userTyped: false,
 			displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION
 		});
 		onToggle(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
-	}, [onTypedMessageSubmitted, onToggle]);
+	}, [
+		hardcopyContent,
+		trackEvent,
+		onTypedMessageSubmitted,
+		onToggle
+	]);
 	const handleTextFieldClick = (0, react.useCallback)(() => {
 		onToggle(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
 	}, [onToggle]);
@@ -72,7 +90,9 @@ const TypingAnimationWidgetHandler = (props) => {
 			animatedTextSequence: isLoading ? mockAnimatedTextSequence : animatedTextSequence,
 			promptButtonTexts: buttonTexts,
 			hintText: isLoading ? mockHintText : hintText,
-			textFieldAriaLabel
+			textFieldAriaLabel,
+			logoSrc: logoSrc ?? void 0,
+			hideLogo: hideLogo ?? false
 		},
 		widgetStyleProps: {
 			widgetVariant,

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

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

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.js

@@ -1,7 +1,8 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
+import { getStringIdForText } from "../utils/functions.js";
 import { useCallback, useEffect } from "react";
-import { SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useSetAtom } from "jotai";
@@ -27,7 +28,7 @@ const mockHintText = "Ask me anything";
 const TypingAnimationWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = useSalesAgent();
 	const onToggle = useSetAtom(chatOnToggleAtom);
-	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+	const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
 	const titleLabel = hardcopyContent?.values?.titleLabel || "";
 	const headlineText = hardcopyContent?.values?.headlineText || "";
 	const animatedTextSequence = hardcopyContent?.values?.animatedTextSequence || [];
@@ -42,6 +43,8 @@ const TypingAnimationWidgetHandler = (props) => {
 	const promptButtonType = typingAnimationWidgetConfig?.promptButtonType || PromptButtonVariant.LIGHT;
 	const promptCarouselRows = typingAnimationWidgetConfig?.promptCarouselRows || PromptCarouselRows.ALWAYS_ONE;
 	const showTextField = typingAnimationWidgetConfig?.showTextField !== false;
+	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
+	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	const { trackEvent } = useAmplitude();
 	useEffect(() => {
 		trackEvent({
@@ -53,13 +56,28 @@ const TypingAnimationWidgetHandler = (props) => {
 		});
 	}, [trackEvent, widgetConfigId]);
 	const handleButtonClick = useCallback((text) => {
+		const rawValues = hardcopyContent?.rawValues;
+		const stringId = getStringIdForText(rawValues, text);
+		trackEvent({
+			eventName: EnviveMetricsEventName.WidgetTextClicked,
+			eventProps: {
+				response_id: hardcopyContent?.responseId,
+				string_id: stringId,
+				text
+			}
+		});
 		onTypedMessageSubmitted({
 			query: text,
 			userTyped: false,
 			displayLocation: ChatElementDisplayLocationV3.TYPING_ANIMATION
 		});
 		onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
-	}, [onTypedMessageSubmitted, onToggle]);
+	}, [
+		hardcopyContent,
+		trackEvent,
+		onTypedMessageSubmitted,
+		onToggle
+	]);
 	const handleTextFieldClick = useCallback(() => {
 		onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
 	}, [onToggle]);
@@ -71,7 +89,9 @@ const TypingAnimationWidgetHandler = (props) => {
 			animatedTextSequence: isLoading ? mockAnimatedTextSequence : animatedTextSequence,
 			promptButtonTexts: buttonTexts,
 			hintText: isLoading ? mockHintText : hintText,
-			textFieldAriaLabel
+			textFieldAriaLabel,
+			logoSrc: logoSrc ?? void 0,
+			hideLogo: hideLogo ?? false
 		},
 		widgetStyleProps: {
 			widgetVariant,

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

@@ -1,5 +1,5 @@
 import { SearchResultsEntryPointWidgetConfig } from "./types.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 import { SearchResultsHocProps } from "@envive-ai/react-hooks/hooks/Search";
 
 //#region ../widgets/dist/SearchResults/SearchResults.d.ts
@@ -7,7 +7,7 @@ import { SearchResultsHocProps } from "@envive-ai/react-hooks/hooks/Search";
 interface SearchResultsProps extends SearchResultsHocProps {
   widgetConfig: SearchResultsEntryPointWidgetConfig;
 }
-declare const SearchResults: (props: Omit<SearchResultsProps, string | number | symbol>) => react_jsx_runtime0.JSX.Element;
+declare const SearchResults: (props: Omit<SearchResultsProps, string | number | symbol>) => react_jsx_runtime1.JSX.Element;
 //#endregion
 
 //#endregion

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

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

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 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_runtime3.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SuggestionBar/SuggestionBar.d.cts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.cjs";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
 import { Message } from "postcss";
 
@@ -30,7 +30,7 @@ declare function SuggestionBar({
   buttonBorderRadius,
   handleReply,
   dataTestId
-}: Readonly<SuggestionBarProps>): react_jsx_runtime2.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/dist/widgets/utils/functions.cjs

@@ -44,11 +44,20 @@ const isProductComparison = (lastMsg) => {
 	if (lastMsg) return lastMsg?.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product).length === 2;
 	return (0, __envive_ai_react_hooks_atoms_atomStore.getAtomStore)().get(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom)?.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product).length === 2;
 };
+/** Finds the string_id (id) from raw widget text values for the given display text */
+const getStringIdForText = (rawValues, text) => {
+	if (!rawValues) return void 0;
+	for (const raw of Object.values(rawValues)) {
+		const found = (Array.isArray(raw) ? raw : [raw]).find((s) => s.value === text);
+		if (found) return found.id;
+	}
+};
 
 //#endregion
 exports.getMessageText = getMessageText;
 exports.getProductImageUrl = getProductImageUrl;
 exports.getRecentProductImageUrls = getRecentProductImageUrls;
+exports.getStringIdForText = getStringIdForText;
 exports.isLoading = isLoading;
 exports.isProductComparison = isProductComparison;
 exports.userHasInteracted = userHasInteracted;

package/dist/widgets/utils/functions.js

@@ -43,6 +43,14 @@ const isProductComparison = (lastMsg) => {
 	if (lastMsg) return lastMsg?.filter((msg) => msg.type === MessageType.Product).length === 2;
 	return getAtomStore().get(lastAssistantMessageAtom)?.filter((msg) => msg.type === MessageType.Product).length === 2;
 };
+/** Finds the string_id (id) from raw widget text values for the given display text */
+const getStringIdForText = (rawValues, text) => {
+	if (!rawValues) return void 0;
+	for (const raw of Object.values(rawValues)) {
+		const found = (Array.isArray(raw) ? raw : [raw]).find((s) => s.value === text);
+		if (found) return found.id;
+	}
+};
 
 //#endregion
-export { getMessageText, getProductImageUrl, getRecentProductImageUrls, isLoading, isProductComparison, userHasInteracted, userHasNotInteracted };
+export { getMessageText, getProductImageUrl, getRecentProductImageUrls, getStringIdForText, isLoading, isProductComparison, userHasInteracted, userHasNotInteracted };

package/package.json

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

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/useHelpScoutUnifiedCXButton.ts

@@ -0,0 +1,108 @@
+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';
+
+const BEACON_CONTAINER_ID = 'beacon-container';
+
+interface UseHelpScoutUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useHelpScoutUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseHelpScoutUnifiedCXButtonProps): UnifiedCXButton => {
+  const beaconContainer = useElementObserver(SelectorFactory.id(BEACON_CONTAINER_ID));
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const toggle = () => {
+    onSwitchToAgent();
+
+    // Try using the Help Scout Beacon API first
+    if (typeof (window as any).Beacon !== 'undefined') {
+      (window as any).Beacon('open');
+    } else {
+      // Fallback: Find and click the FAB button
+      const container = document.getElementById(BEACON_CONTAINER_ID);
+      const fabButton = container?.querySelector('.BeaconFabButtonFrame') as HTMLElement;
+      if (fabButton) {
+        fabButton.style.display = '';
+        fabButton.click();
+      }
+    }
+
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
+  };
+
+  const isHelpScoutButtonEnabled = () => {
+    // Check for the main Help Scout Beacon container
+    const beaconContainerEl = document.getElementById('beacon-container');
+    if (!beaconContainerEl) return false;
+
+    // Check for the FAB button (Floating Action Button) or the global Beacon API
+    const fabButton = beaconContainerEl.querySelector('.BeaconFabButtonFrame');
+    const hasBeaconAPI = typeof (window as any).Beacon !== 'undefined';
+
+    return !!(fabButton || hasBeaconAPI);
+  };
+
+  const isSwitchEnabled = () => isHelpScoutButtonEnabled();
+
+  // Hide Help Scout FAB button when beacon container is added
+  beaconContainer.onAdd(() => {
+    if (suppressMerchantButton) {
+      const fabButton = document
+        .getElementById(BEACON_CONTAINER_ID)
+        ?.querySelector('.BeaconFabButtonFrame') as HTMLElement;
+      if (fabButton) {
+        fabButton.style.display = 'none';
+      }
+      enviveFloatingButton.show();
+    }
+  });
+
+  // Observe the beacon container for visibility changes
+  // Help Scout Beacon adds/removes classes to show/hide the widget
+  beaconContainer.onChange(el => {
+    if (el && suppressMerchantButton) {
+      // Check if the BeaconContainer widget is open
+      const beaconWidget = el.querySelector('.BeaconContainer');
+      const fabButton = el.querySelector('.BeaconFabButtonFrame') as HTMLElement;
+
+      if (beaconWidget && fabButton) {
+        const { classList } = beaconWidget;
+
+        // When beacon is open (has enter-done class)
+        if (
+          classList.contains('BeaconContainer-enter-done') ||
+          classList.contains('BeaconContainer-enter-active')
+        ) {
+          fabButton.style.display = '';
+          enviveFloatingButton.hide();
+        }
+
+        // When beacon is closed (has exit class)
+        if (
+          classList.contains('BeaconContainer-exit') ||
+          classList.contains('BeaconContainer-exit-active')
+        ) {
+          fabButton.style.display = 'none';
+          enviveFloatingButton.show();
+        }
+      }
+    }
+  });
+
+  // Cleanup when container is removed
+  beaconContainer.onRemove(() => {
+    if (suppressMerchantButton) {
+      enviveFloatingButton.show();
+    }
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};