Checking access…

Skip to main content
Version: v1

Embedded Experience Containers

Overview​

This documentation outlines the different types of containers supported by our widget and their respective capabilities. The widget can be configured to use either a primary container only or a combination of primary and secondary containers.

Container Types​

Primary Only Containers​

Primary only containers mean that the entire widget usage is done within that primary container.

  • Types: inline, modal, drawer

Primary and Secondary Containers​

Primary and secondary containers are used when the primary container is inline. This configuration allows the primary container to show the initial view of the session, while the secondary container is used for additional actions that are not part of the primary session capability.

  • Primary Type: inline
  • Secondary Types: modal, drawer

Widget Capabilities by Container Type​

Primary only​

InlineModalDrawer
Payment with wallet✅✅✅
Payment✅✅✅
Wallet management✅✅✅
Add payment method✅✅✅
Payment method selector✅❌❌
Payment method display✅❌❌

Primary (inline) and Secondary (modal, drawer)​

Primary
(inline)		Secondary
(modal, drawer)
Payment method selectorWallet management
Payment with walletWallet management
Wallet Management
  • Add payment method
  • Edit payment method
  • Remove payment method

Examples​

Here are a few examples to illustrate the combinations:

Example 1: Primary Only - Inline​

const options: OptumCCGWidgetInitializerParams = {
  appEnv: "prod",
  checkoutSessionId: "checkout-session-id",
  rootElement: document.getElementById("ccgWidgetContainer")!,
  containerConfig: {
    type: "inline",
  },
};
const ccgWidget = OptumCCGWidgetInitializer(options);

Example 2: Primary and Secondary - Inline with Drawer​

const options: OptumCCGWidgetInitializerParams = {
  appEnv: "prod",
  checkoutSessionId: "checkout-session-id",
  rootElement: document.getElementById("ccgWidgetContainer")!,
  containerConfig: {
    type: "inline",
    secondaryContainer: {
      type: "drawer",
    },
  },
};
const ccgWidget = OptumCCGWidgetInitializer(options);

Example 3: Primary and Secondary - Inline with Modal​

const options: OptumCCGWidgetInitializerParams = {
  appEnv: "prod",
  checkoutSessionId: "checkout-session-id",
  rootElement: document.getElementById("ccgWidgetContainer")!,
  containerConfig: {
    type: "inline",
    secondaryContainer: {
      type: "modal",
    },
  },
};
const ccgWidget = OptumCCGWidgetInitializer(options);

Example 4: Primary Only - How to Enable Auto Scroll for Inline​

const options: OptumCCGWidgetInitializerParams = {
  appEnv: "prod",
  checkoutSessionId: "checkout-session-id",
  rootElement: document.getElementById("ccgWidgetContainer")!,
  containerConfig: {
    type: "inline",
    autoScrollEnabled: true,
  },
};
const ccgWidget = OptumCCGWidgetInitializer(options);