Skip to main content

Widgets Overview

What Are Widgets?​

Widgets are self-contained UI components that run inside the Candescent Digital Banking platform. They use the CDX (Candescent Developer Experience) extensibility SDK for platform integration (user context, branding, HTTP calls). Widgets support both web and mobile platforms.

On web, widgets are React applications that run inside the Online Banking (OLB) web application. They use Module Federation to load at runtime and appear on the OLB homepage.

On mobile, features and widgets are React Native applications that run inside the host mobile banking application. These features and widgets are distributed as npm packages, built with tsup, and tested locally using an Expo-based sandbox app. Features and widgets have two different functions on the mobile banking application:

  • A feature is a full-screen experience with its own navigation route in the mobile banking app.
  • A widget is a component embedded only in the existing home screen of the mobile banking app.
info

The CDX Extensibility SDK uses the same three-package architecture on both web and mobile: a core orchestration layer (@cdx-extensions/di-sdk), shared type definitions (@cdx-extensions/di-sdk-types), and a platform-specific harness (@cdx-extensions/di-sdk-web for web, @cdx-extensions/di-sdk-mobile for mobile). Your feature or widget always imports from @cdx-extensions/di-sdk — the SDK selects the correct platform implementation at runtime. For the full package breakdown, see SDK Reference.

Template Repository​

The CDX Extensibility Apps monorepo is the starter kit for building widgets. It uses Nx as the build system and npm as the package manager.

Clone the repo and install dependencies:

Bash
git clone <repository-url>
cd cdx-extensibility-apps
npm install

Reference Widgets​

The repo contains three reference widgets that demonstrate different integration patterns with the CDX Extensibility SDK. Use them as a starting point when building your own widget.

agent-widget​

An AI-powered chat assistant widget that demonstrates:

  • Routing all API calls through the platform's secure HTTP client via getHttpClient()
  • Reading user context via useUserContext() to personalise the experience (e.g. greeting the logged-in user by name)
  • Applying platform branding so the widget adapts its look-and-feel to the host application's theme

qa-automation-widget (Web)​

A QA/testing utility widget that validates end-to-end SDK integration. It demonstrates:

  • All three core SDK hooks in a single widget: useUserContext(), useBranding(), and getHttpClient()
  • Displaying user information retrieved from the platform
  • Firing positive and negative HTTP test calls and inspecting responses to verify getHttpClient() behaviour
  • Rendering branding theme values to confirm useBranding() integration

investment-portfolio-widget​

A portfolio widget that displays a user's investment overview using mock data. It demonstrates:

  • useUserContext() to display the authenticated user's details
  • getHttpClient() to fetch portfolio data from a configured API endpoint
  • Interactive data visualisation (SVG donut chart with colour-coded legend and percentage breakdowns)

Next Steps​