anchorBefore you begin

• Join the Webex Developer Beta Program and use an approved Contact Center organization and agent.
• Confirm that the organization has an AI Assistant entitlement and that agent wellbeing and wellness break reminders are enabled. The widget uses the effective SDK enablement flag; your application does not need a separate wellness feature toggle.
• Use @webex/cc-widgets 1.28.0-next.62 and @webex/contact-center 3.12.0-next.133. Use the webex aggregate package 3.12.0-next.220 if your application uses it. Pin these package versions for this beta.
• Use @momentum-ui/react-collaboration 26.201.9. The published Station Login package requires this version. Install the other peer dependencies required by your widget package, including compatible React, React DOM, and @momentum-ui/web-components versions.
• Complete the Webex Contact Center Web Widgets Quickstart. Initialize the shared store once and complete Station Login before testing.
• Use a React host with enough space for the break overlay. An iframe can cover only its own viewport unless its parent supplies an overlay.

Watch the Widgets wellness demonstration for an example of the test flow.

anchorTest with the Widgets sample application

Use the beta React sample build supplied with your invitation. Confirm that it includes the versions listed above. The widget responds to live wellness events; there is no control to create a mock offer.

1. Sign in as the beta test agent and initialize the sample with a temporary developer access token. Do not put the token in a screenshot or test report.

2. Select AI Assistant, complete Station Login, and set the agent to Available. Before a wellness event, confirm that the assistant shows its landing content.

3. Wait for a wellness suggestion. Select Take wellbeing break once. Confirm that the request remains pending until the service approves or denies it. A later suggestion is required before another manual request is available.

   

4. Test a direct offer with the assistant open. Confirm that the offer appears in the panel. Repeat with the panel closed or minimized. Confirm that one actionable notification shows Take a break and Later.

   

   

5. Select Later and confirm that the agent state does not change. Test an unanswered offer and confirm that it expires after five minutes without changing the state.

6. Accept a direct offer. Confirm that the agent enters WellbeingBreak, sees a five-second start countdown, a 60-second break, and a five-second ending countdown, and then returns to Available.

   

7. Accept while a voice or digital task is active. Confirm that the break waits until the task and required wrap-up finish. During the break, confirm that User State shows the timed WellbeingBreak state but does not list it as a selectable idle code.

8. Review wellness history. Select Clear and confirm that it removes displayed history without cancelling an active offer or break.

9. Test keyboard focus, reduced motion, and a blocked audio or animation request. Confirm that the break remains usable and still returns the agent to Available.

10. Repeat after logout, a station-session change, a browser refresh during the break, and a connection interruption. Confirm that stale offers do not reappear and that old-session work does not continue.

The test passes when the suggestion and offer actions work, active work delays the timer, and every completed break returns the agent to Available.

anchorAdd the widget to a React application

Keep the shared store and Station Login flow from the Widgets quickstart. Import AIAssistant from the existing @webex/cc-widgets aggregate. Your application does not need to call the wellness SDK methods when it uses this widget.

import {AIAssistant} from '@webex/cc-widgets';

<AIAssistant
  wellnessBreakOverlayTarget="viewport"
  onWellnessBreakOffered={() => recordLifecycle('offered')}
  onWellnessBreakAccepted={() => recordLifecycle('accepted')}
  onWellnessBreakStarted={() => recordLifecycle('started')}
  onWellnessBreakEnded={() => recordLifecycle('ended')}
  onWellnessBreakError={(error) => recordErrorCode(error.code)}
/>

The callbacks are optional. recordLifecycle() and recordErrorCode() represent your application's handlers. Do not record notification text, agent identifiers, or customer data.

wellnessBreakOverlayTarget defaults to "viewport". Use "assistant" to cover the assistant root, or pass an HTMLElement for a custom React host container. The active overlay stays in place if the assistant panel is closed or minimized. If the widget is inside an iframe, viewport coverage stops at the iframe boundary.

The widget supplies its wellness animation and audio. It loads the media when the break needs it. If audio cannot play or animation cannot load, the break continues with a silent or static presentation. You can set wellnessAudioUrl if your application uses an approved audio URL.

anchorValidate the integration

• Before a live suggestion or offer arrives, the widget shows no wellness action. A consumed suggestion is not reused.
• An open assistant shows one offer card. A closed or minimized assistant shows one actionable notification.
• A direct offer changes the agent to WellbeingBreak before it sends ACCEPTED. Later sends REJECTED; an unanswered offer sends NO_RESPONSE once.
• An approved manual request starts the break without a second ACCEPTED action.
• Active tasks and required wrap-up finish before the timed break starts. Completion returns the agent to Available with aux code 0.
• The overlay traps focus during the break, Escape does not dismiss it, and focus returns after completion. Reduced motion uses a static treatment.
• A media failure does not block Available restoration. Logout, session changes, and unmount stop work for the old session.

anchorTroubleshoot the test

• No suggestion or offer appears: Check the organization settings, package versions, Station Login, effective wellness enablement, and AI Assistant real-time connection. The widget needs a live backend event.
• A suggestion is hidden: Check whether active Real Time Assist content has priority in the assistant panel.
• The offer appears in an unexpected place: Check whether the panel is open, closed, or minimized. Set wellnessBreakOverlayTarget for the host layout you use.
• The break has not started: Check for an active task or required wrap-up. The timer starts only after the agent enters the wellness state and work is safe.
• The overlay does not cover the full app: Check the target element and any iframe boundary. A child iframe cannot cover its parent page by itself.
• The UI looks incomplete: Check that the application uses @momentum-ui/react-collaboration 26.201.9 and the package peer dependencies.

anchorShare feedback

Use the feedback channel supplied with your beta invitation. Include the test time and time zone, package versions, browser, host layout, lifecycle phase, expected result, actual result, and a non-sensitive error code. Do not include access tokens, agent names, notification text, or customer content.