cc-digital-interactions — Consumer Guide

This package provides a React component for Webex Engage conversations and a helper to initialize API/auth configuration.

• Default export: Engage (React component)
• Named export: initializeApp(dataCenter, jwtToken)

Use:

import Engage, { initializeApp } from "cc-digital-interactions";

Install

Install the package and its peer dependencies.

npm install cc-digital-interactions react react-dom @momentum-ui/web-components
# or
yarn add cc-digital-interactions react react-dom @momentum-ui/web-components
# or
pnpm add cc-digital-interactions react react-dom @momentum-ui/web-components

Then register Momentum UI Web Components once in your app (usually at the root):

// e.g., src/main.tsx or src/index.tsx
import "@momentum-ui/web-components";

Quick Start (React)

import React, { useEffect } from "react";
import ReactDOM from "react-dom/client";
import Engage, { initializeApp } from "cc-digital-interactions";

function ConversationsView() {
  useEffect(() => {
    // 1) Initialize API endpoints + fetch access token using a short-lived JWT
    //    Call this once (e.g., on app start or when JWT rotates)
    initializeApp("qa", "<JWT_FROM_YOUR_BACKEND>");
  }, []);

  return (
    <Engage
      conversationId="<CONVERSATION_ID>"
      interactionId="<INTERACTION_ID_OR_EMPTY>"
      readonly={false}
      theme="LIGHT" // LIGHT | DARK
      isVisualRebrand={true} // optional UI style
      dataCenter="qa" // must match initializeApp's dataCenter
    />
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <ConversationsView />,
);

API

• initializeApp(dataCenter: string, jwtToken: string): Promise<void>

  • Sets the REST base URL and retrieves/stores an access token using your short-lived jwtToken.
  • Call before rendering Engage and whenever your JWT rotates.

• Engage component props:

  • conversationId: string — Target conversation ID (or use interactionId).
  • interactionId: string — Optional interaction ID if available.
  • readonly: boolean — When true, disables authoring actions.
  • theme?: "LIGHT" | "DARK" — Visual theme; defaults to LIGHT.
  • isVisualRebrand?: boolean — Enables the newer visual look and feel.
  • dataCenter?: string — Selects the SignalR endpoint region; should match the value passed to initializeApp.

Supported dataCenter values

Use one of the following keys for both initializeApp(dataCenter, ...) and the Engage prop dataCenter:

• intgus1
• qa
• prodanz1
• prodca1
• prodeu1
• prodeu2
• prodsg1
• produs1

These map internally to REST and SignalR endpoints (see source config in src/app/apiConfig.ts).

Auth Model

• Your backend issues a short-lived JWT per agent/session.
• Call initializeApp(dataCenter, jwtToken) with that JWT to exchange for an access token used by the SDK.
• Tokens and agent info are stored in session storage; the SDK refreshes as needed.

Notes & Troubleshooting

• Make sure @momentum-ui/web-components is imported once at app startup; otherwise some UI elements may not render.
• Always call initializeApp before first rendering Engage, and again if your JWT rotates or expires.
• Provide either a valid conversationId or interactionId.
• Ensure dataCenter is consistent between initializeApp and the Engage component to establish SignalR connections correctly.

TypeScript

This package ships with type definitions. Props for Engage are derived from the component’s TypeScript source in src/app/App.tsx.

For advanced usage (events, storage, or lower-level APIs), refer to the source modules within src/ in this repository.