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

package/src/stories/FullPageSalesAgentWidget.stories.tsx

@@ -0,0 +1,68 @@
+import {
+  PageVisitCategory,
+  useSalesAgent,
+} from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
+import { FullPageSalesAgentWidget } from '../widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget';
+
+const meta = {
+  title: 'Widgets V3/FullPageSalesAgentWidget',
+  component: FullPageSalesAgentWidget,
+  tags: ['autodocs'],
+  args: {
+    widgetConfigId: 'full-page-sales-agent-widget',
+  },
+  argTypes: {
+    widgetConfigId: {
+      control: 'text',
+      description:
+        'Unique identifier for the widget configuration. The widget will fetch the widget config and hardcopy content based on this ID.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'FullPageSalesAgentWidget is a widget wrapper around the FullPageSalesAgent component that includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget renders a full-page sales agent experience.',
+      },
+    },
+  },
+  decorators: [
+    Story => {
+      const { logPageVisit, logUserEvent } = useSalesAgent();
+
+      useEffect(() => {
+        logUserEvent({
+          eventId: uuid(),
+          category: UserEventCategory.AppLoaded,
+          createdAt: new Date().toISOString(),
+        });
+        logPageVisit({ pageVisitCategory: PageVisitCategory.Homepage });
+      }, []);
+
+      return (
+        <div style={{ height: '100vh' }}>
+          <Story />
+        </div>
+      );
+    },
+  ],
+} satisfies Meta<typeof FullPageSalesAgentWidget>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Experiment with different widgetConfigId values. The widget will fetch configuration from the widget config based on the widgetConfigId.',
+      },
+    },
+  },
+};

package/src/stories/SalesAgentTest/SalesAgentTest.tsx

@@ -61,7 +61,11 @@ export const SalesAgentTest = () => {
           onChange={e => setQuery(e.target.value)}
           onKeyDown={e => {
             if (e.key === 'Enter') {
-              onTypedMessageSubmitted({ query, userTyped: true });
+              onTypedMessageSubmitted({
+                query,
+                userTyped: true,
+                displayLocation: ChatElementDisplayLocationV3.FLOATING_CHAT_TEXT_INPUT,
+              });
               setQuery('');
             }
           }}
@@ -70,7 +74,11 @@ export const SalesAgentTest = () => {
         <button
           type="button"
           onClick={() => {
-            onTypedMessageSubmitted({ query, userTyped: true });
+            onTypedMessageSubmitted({
+              query,
+              userTyped: true,
+              displayLocation: ChatElementDisplayLocationV3.FLOATING_CHAT_TEXT_INPUT,
+            });
             setQuery('');
           }}
         >

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,4 +1,4 @@
-import { Suspense, lazy, useEffect, useMemo, useRef } from 'react';
+import { ReactNode, Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
 import {
   FloatingChatConfig,
   LookAndFeelConfig,
@@ -20,6 +20,7 @@ import {
 } from '@envive-ai/react-toolkit-v3/FloatingButton';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { DebugBar } from 'src/debug/debugBar';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { FloatingChatOverlay } from './FloatingChatOverlay';
 import useGetWidgetStatus from '../hooks/useGetWidgetStatus';
@@ -27,11 +28,44 @@ import { useUnifiedCXButton } from '../../CXIntegration/hooks/useUnifiedCXButton
 import { FLOATING_BUTTON_ID } from './constants';
 import { CustomerServiceType } from '../../CXIntegration/types';
 import { useFloatingButtonVisibility } from './hooks/useFloatingButtonVisibility';
+import { useAutoPopup } from './hooks/useAutoPopup';
 
 const FloatingChat = lazy(async () => ({
   default: (await import('@envive-ai/react-toolkit-v3/FloatingChat')).FloatingChat,
 }));
 
+/**
+ * Wrapper component that isolates the useUnifiedCXButton hook call.
+ * Provider implementations use different React hooks internally, so the
+ * provider value must be stable across renders. Use a `key` prop based on
+ * provider to force a clean remount when the provider changes.
+ */
+const CXButtonProvider = ({
+  provider,
+  enabled,
+  suppressMerchantButton,
+  onSwitchToAgent,
+  onCXClose,
+  children,
+}: {
+  provider: CustomerServiceType;
+  enabled: boolean;
+  suppressMerchantButton: boolean;
+  onSwitchToAgent: () => void;
+  onCXClose: () => void;
+  children: (cxButton: { isSwitchEnabled?: () => boolean; toggle?: () => void }) => ReactNode;
+}) => {
+  const unifiedCXButton = useUnifiedCXButton({
+    provider,
+    enabled,
+    suppressMerchantButton,
+    onSwitchToAgent,
+    onCXClose,
+  });
+  const { isSwitchEnabled, toggle } = unifiedCXButton ?? {};
+  return <>{children({ isSwitchEnabled, toggle })}</>;
+};
+
 interface FloatingChatWidgetHandlerProps extends BaseWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
@@ -46,26 +80,21 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   // TODO: Get hardcopy
   const { uiConfig, isUiConfigLoading, hardcopyContent } = props;
 
-  // TODO: Figure out the issue and reenable this functionality
-  // const { customerServiceIntegration } = uiConfig ?? {};
-  // const unifiedCXButton = useUnifiedCXButton({
-  //   provider: customerServiceIntegration?.provider as CustomerServiceType,
-  //   enabled: customerServiceIntegration?.enabled,
-  //   suppressMerchantButton: customerServiceIntegration?.suppressMerchantButton,
-  // });
-  const unifiedCXButton = useUnifiedCXButton({
-    provider: CustomerServiceType.unsupported,
-    enabled: false,
-    suppressMerchantButton: false,
-  });
-
-  const { isSwitchEnabled, toggle } = unifiedCXButton ?? {};
-
-  const { floatingButton } = uiConfig ?? {};
+  const { customerServiceIntegration, floatingButton, floatingChat } = uiConfig ?? {};
+  const cxProvider =
+    (customerServiceIntegration?.provider as CustomerServiceType) ??
+    CustomerServiceType.unsupported;
 
   // TODO: Get hardcopy content
   const { isOpen, openChat, closeChat } = useChatToggle();
 
+  const [isCXOpen, setIsCXOpen] = useState(false);
+
+  // Reset CX open state when the envive widget is reopened
+  useEffect(() => {
+    if (isOpen) setIsCXOpen(false);
+  }, [isOpen]);
+
   const { shouldShowFloatingButton } = useFloatingButtonVisibility({
     floatingButtonShowConfig: floatingButton?.showOption as FloatingButtonShow,
     isChatOpen: isOpen,
@@ -75,7 +104,9 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   // Override isOpen for preview modes
   const effectiveIsOpen = previewChatAlwaysOpen ? true : isOpen;
   const effectiveShouldRenderFloatingButton = !effectiveIsOpen && shouldShowFloatingButton;
-  const buttonShouldRender = previewButtonOnly ? true : effectiveShouldRenderFloatingButton;
+  const buttonShouldRender = previewButtonOnly
+    ? true
+    : effectiveShouldRenderFloatingButton && !isCXOpen;
 
   const theme = useMemo(() => {
     if (isUiConfigLoading || !uiConfig) {
@@ -85,6 +116,8 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
     return (uiConfig?.lookAndFeel?.theme as Theme) ?? Theme.GLOBAL_CUSTOM;
   }, [isUiConfigLoading, uiConfig]);
 
+  useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
+
   const { trackEvent } = useAmplitude();
   const hasTrackedEvent = useRef(false);
   // When we add support for initially hidden floating buttons, we will need to update this to handle that case
@@ -102,59 +135,71 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   }, [trackEvent, buttonShouldRender]);
 
   return (
-    <>
-      {/* Render chat when always open preview OR when normally open */}
-      {(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && (
-        <FloatingChatOverlay
-          isOpened={effectiveIsOpen}
-          onClose={
-            previewChatAlwaysOpen
-              ? () => {}
-              : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY)
-          }
-          previewMode={!!previewChatAlwaysOpen}
-        >
-          <Suspense>
-            <FloatingChat
-              theme={theme}
-              salesAgentData={salesAgentData}
-              hardcopyContent={hardcopyContent}
-              floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
-              lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
-              isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
-              isFloatingChatOpen={effectiveIsOpen}
-              onToggleCXButton={toggle}
+    <CXButtonProvider
+      key={cxProvider}
+      provider={cxProvider}
+      enabled={customerServiceIntegration?.enabled ?? false}
+      suppressMerchantButton={customerServiceIntegration?.suppressMerchantButton ?? false}
+      onSwitchToAgent={() => setIsCXOpen(true)}
+      onCXClose={() => setIsCXOpen(false)}
+    >
+      {({ isSwitchEnabled, toggle }) => (
+        <>
+          {/* Render chat when always open preview OR when normally open */}
+          {(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && (
+            <FloatingChatOverlay
+              isOpened={effectiveIsOpen}
               onClose={
                 previewChatAlwaysOpen
                   ? () => {}
-                  : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+                  : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY)
               }
+              previewMode={!!previewChatAlwaysOpen}
+            >
+              <Suspense>
+                <FloatingChat
+                  theme={theme}
+                  salesAgentData={salesAgentData}
+                  hardcopyContent={hardcopyContent}
+                  floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
+                  lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
+                  isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
+                  isFloatingChatOpen={effectiveIsOpen}
+                  onToggleCXButton={toggle}
+                  debugBar={<DebugBar />}
+                  onClose={
+                    previewChatAlwaysOpen
+                      ? () => {}
+                      : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+                  }
+                />
+              </Suspense>
+            </FloatingChatOverlay>
+          )}
+
+          {/* Render button when preview button only OR when chat is closed */}
+          {buttonShouldRender && (
+            <FloatingButton
+              id={FLOATING_BUTTON_ID}
+              variant={floatingButton?.style as FloatingButtonVariant}
+              mode={floatingButton?.mode as FloatingButtonMode}
+              backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
+              onClick={
+                previewButtonOnly
+                  ? () => {}
+                  : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
+              }
+              customIcon={floatingButton?.iconSVGSrc}
+              show={floatingButton?.showOption as FloatingButtonShow}
+              location={floatingButton?.position as FloatingButtonLocation}
+              hasInteractionHappened={userHasInteractedValue}
+              ariaLabel="Open chat"
+              previewMode={!!previewButtonOnly}
             />
-          </Suspense>
-        </FloatingChatOverlay>
-      )}
-
-      {/* Render button when preview button only OR when chat is closed */}
-      {buttonShouldRender && (
-        <FloatingButton
-          id={FLOATING_BUTTON_ID}
-          variant={floatingButton?.style as FloatingButtonVariant}
-          mode={floatingButton?.mode as FloatingButtonMode}
-          backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
-          onClick={
-            previewButtonOnly
-              ? () => {}
-              : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
-          }
-          customIcon={floatingButton?.iconSVGSrc}
-          show={floatingButton?.showOption as FloatingButtonShow}
-          location={floatingButton?.position as FloatingButtonLocation}
-          hasInteractionHappened={userHasInteractedValue}
-          ariaLabel="Open chat"
-          previewMode={!!previewButtonOnly}
-        />
+          )}
+        </>
       )}
-    </>
+    </CXButtonProvider>
   );
 };
 

package/src/widgets/FloatingChatWidget/hooks/useAutoPopup.ts

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
+import { AutoPopupConfig } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
+
+export const useAutoPopup = ({ autoPopupConfig }: { autoPopupConfig?: AutoPopupConfig }) => {
+  const { isOpen, openChat } = useChatToggle();
+  const { featureFlagService } = useFeatureFlagService();
+  const hasBeenOpenedRef = useRef(false);
+  const autoPopupTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const isReferrerBasedPromptEnabled = useMemo(
+    () => featureFlagService.isFeatureGateEnabled(FeatureGates.IsReferrerBasedPromptEnabled),
+    [featureFlagService],
+  );
+
+  useEffect(() => {
+    if (!hasBeenOpenedRef.current && isOpen) {
+      hasBeenOpenedRef.current = true;
+    }
+  }, [isOpen]);
+
+  const openChatSafely = useCallback(
+    (triggerLocation: ChatElementDisplayLocationV3) => {
+      if (!hasBeenOpenedRef.current) {
+        hasBeenOpenedRef.current = true;
+        openChat(triggerLocation);
+      }
+    },
+    [openChat],
+  );
+  useEffect(() => {
+    const cleanup = () => {
+      if (autoPopupTimerRef.current) {
+        clearTimeout(autoPopupTimerRef.current);
+      }
+    };
+    if (!autoPopupConfig || hasBeenOpenedRef.current) {
+      return cleanup;
+    }
+    for (const trigger of autoPopupConfig.triggers) {
+      if (trigger.trigger.type === 'referrer') {
+        if (!isReferrerBasedPromptEnabled) {
+          break;
+        }
+        const utmSource = new URLSearchParams(window.location.search).get('utm_source');
+        if (trigger.trigger.referrers.includes(utmSource)) {
+          autoPopupTimerRef.current = setTimeout(() => {
+            openChatSafely(ChatElementDisplayLocationV3.REFERRER_BASED_PROMPT);
+          }, trigger.delay);
+        }
+      }
+      if (trigger.trigger.type === 'automatic') {
+        autoPopupTimerRef.current = setTimeout(() => {
+          openChatSafely(ChatElementDisplayLocationV3.AUTOMATIC_PROMPT);
+        }, trigger.delay);
+      }
+    }
+    return cleanup;
+  }, [autoPopupConfig, isOpen, isReferrerBasedPromptEnabled, openChatSafely]);
+};

package/src/widgets/FloatingChatWidget/hooks/useFloatingButtonVisibility.ts

@@ -1,8 +1,9 @@
-import { useMemo } from 'react';
-import { useAtomValue } from 'jotai';
-import { featureFlagServiceAtom } from '@envive-ai/react-hooks/atoms/org';
 import { FeatureGates } from '@envive-ai/react-hooks/application/models';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { featureFlagServiceAtom } from '@envive-ai/react-hooks/atoms/org';
 import { FloatingButtonShow } from '@envive-ai/react-toolkit-v3/FloatingButton';
+import { useAtom, useAtomValue } from 'jotai';
+import { useMemo } from 'react';
 
 export interface UseFloatingButtonVisibilityProps {
   floatingButtonShowConfig?: FloatingButtonShow;
@@ -21,6 +22,10 @@ export const useFloatingButtonVisibility = ({
   userHasInteracted,
 }: UseFloatingButtonVisibilityProps): UseFloatingButtonVisibilityReturn => {
   const featureFlagService = useAtomValue(featureFlagServiceAtom);
+  const [variantInfo] = useAtom(variantInfoAtom);
+
+  const internalfloatingButtonShowConfig =
+    variantInfo.floatingButtonOverride ?? floatingButtonShowConfig;
 
   const isSalesAgentEnabled = useMemo(
     () =>
@@ -33,8 +38,9 @@ export const useFloatingButtonVisibility = ({
   const shouldShowFloatingButton =
     (isSalesAgentEnabled || isSalesAgentEnabled === undefined) &&
     !isChatOpen &&
-    (floatingButtonShowConfig === FloatingButtonShow.ALWAYS ||
-      (floatingButtonShowConfig === FloatingButtonShow.POST_INTERACTION && userHasInteracted));
+    (internalfloatingButtonShowConfig === FloatingButtonShow.ALWAYS ||
+      (internalfloatingButtonShowConfig === FloatingButtonShow.POST_INTERACTION &&
+        userHasInteracted));
 
   return {
     shouldShowFloatingButton,

package/src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.tsx

@@ -0,0 +1,46 @@
+import {
+  FloatingChatConfig,
+  FullPageSalesAgentWidgetV3Config,
+  LookAndFeelConfig,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { FullPageSalesAgent } from '@envive-ai/react-toolkit-v3/FullPageSalesAgent';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { BaseWidgetProps, withBaseWidget } from 'src/hocs/withBaseWidget';
+
+const FullPageSalesAgentHandler = ({
+  uiConfig,
+  hardcopyContent,
+  widgetConfig,
+}: BaseWidgetProps) => {
+  const { headerContainer, autoHeight } = (widgetConfig as FullPageSalesAgentWidgetV3Config) || {};
+
+  return (
+    <FullPageSalesAgent
+      theme={Theme.STANDARD}
+      floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
+      lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
+      hardcopyContent={hardcopyContent}
+      headerContainer={headerContainer}
+      autoHeight={autoHeight}
+    />
+  );
+};
+
+export const FullPageSalesAgentBaseWidget =
+  withBaseWidget<BaseWidgetProps>(FullPageSalesAgentHandler);
+
+export interface FullPageSalesAgentBaseWidgetProps {
+  widgetConfigId: string;
+}
+
+export const FullPageSalesAgentWidget = ({ widgetConfigId }: FullPageSalesAgentBaseWidgetProps) => {
+  return (
+    <FullPageSalesAgentBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.FullPageSalesAgentV3}
+    />
+  );
+};
+
+FullPageSalesAgentWidget.displayName = 'FullPageSalesAgentWidget';

package/src/widgets/FullPageSalesAgentWidget/index.ts

@@ -0,0 +1 @@
+export { FullPageSalesAgentWidget } from './FullPageSalesAgentWidget';

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -64,7 +64,11 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
 
   const handleSelect = useCallback(
     (prompt: string) => {
-      onTypedMessageSubmitted({ query: prompt, userTyped: false });
+      onTypedMessageSubmitted({
+        query: prompt,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON,
+      });
       openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
     },
     [onTypedMessageSubmitted, openChat],

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -60,7 +60,12 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
 
   const handlePromptButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation:
+          ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON,
+      });
       openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON);
     },
     [onTypedMessageSubmitted, openChat],

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -7,6 +7,7 @@ import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useCallback, useEffect } from 'react';
 import {
+  EnviveMetricsEventName,
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
@@ -17,6 +18,20 @@ import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { PromptCarousel } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 
+type RawWidgetString = { id: string; value: string };
+type RawValues = Record<string, RawWidgetString | RawWidgetString[]>;
+
+/** Finds the string_id (id) from raw widget text values for the given display text */
+function getStringIdForText(rawValues: RawValues | undefined, text: string): string | undefined {
+  if (!rawValues) return undefined;
+  for (const raw of Object.values(rawValues)) {
+    const list = Array.isArray(raw) ? raw : [raw];
+    const found = list.find((s: RawWidgetString) => s.value === text);
+    if (found) return found.id;
+  }
+  return undefined;
+}
+
 const mockButtonTexts = [
   'Loading button 1',
   'Loading button 2',
@@ -41,7 +56,7 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
   const promptButtonType = promptCarouselWidgetConfig?.promptButtonType as PromptButtonVariant;
   const promptCarouselRows = promptCarouselWidgetConfig?.promptCarouselRows;
   const animationSpeed = isLoading
-    ? AnimationSpeed.FAST
+    ? AnimationSpeed.NONE
     : promptCarouselWidgetConfig?.animationSpeed;
 
   const { trackEvent } = useAmplitude();
@@ -58,10 +73,24 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   const handleButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.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.PROMPT_CAROUSEL,
+      });
       openChat(ChatElementDisplayLocationV3.PROMPT_CAROUSEL);
     },
-    [onTypedMessageSubmitted, openChat],
+    [trackEvent, hardcopyContent, onTypedMessageSubmitted, openChat],
   );
 
   return (

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -102,7 +102,11 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const handlePrimaryButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON,
+      });
       openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
     },
     [onTypedMessageSubmitted, openChat],
@@ -110,7 +114,11 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const handleSecondaryButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON,
+      });
       openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
     },
     [onTypedMessageSubmitted, openChat],

package/src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.tsx

@@ -50,7 +50,7 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
     titledPromptCarouselWidgetConfig?.promptButtonType as PromptButtonVariant;
   const promptCarouselRows = titledPromptCarouselWidgetConfig?.promptCarouselRows;
   const animationSpeed = isLoading
-    ? AnimationSpeed.FAST
+    ? AnimationSpeed.NONE
     : titledPromptCarouselWidgetConfig?.animationSpeed;
 
   const { trackEvent } = useAmplitude();
@@ -67,7 +67,11 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   const handleButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL,
+      });
       openChat(ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL);
     },
     [onTypedMessageSubmitted, openChat],

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -72,7 +72,11 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
 
   const handleButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.TYPING_ANIMATION,
+      });
       onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
     },
     [onTypedMessageSubmitted, onToggle],