How to make the AWS CTI Telephone Bar color customizable

General
, , ,
1

Hi,
I am working on a requirement to make the AWS CTI Telephone Bar color customizable by the end user.

The AWS telephone bar is rendered using the EmbeddedCcpHeader section. Currently, the bar color is controlled by a static Content CSS Class configured on the Dynamic Layout.

Requirement:

  • Allow users to select their preferred AWS telephone bar color (for example, Red, Blue, Green, or Black).

  • Whenever the user selects a different color, the CTI header bar in the EmbeddedCcpHeader section should immediately reflect the new color, even while the user is actively working on a CTI call. The UI should update without requiring a page refresh, reopening the CTI panel, or logging out and back in.

    Is there any recommended approach or best practice to achieve this requirement in a UI Kit-based application?

    image
    image800×327 46.7 KB

2

The recommended pattern is to make the CTI header color depend on a property-driven CSS class and then refresh only the layout/section that renders ‘EmbeddedCcpHeader’ when that property changes. Use ‘Refresh on change’ on a dynamic layout or section, rather than broader manual refresh logic.

  • Store the user’s selected color in a property on the operator or a requestor-scope data page.
  • Map each allowed value like Red, Blue, Green, Black to a CSS class.
  • Bind the Dynamic Layout’s Content CSS Class to that property-driven value instead of a hard-coded class.
  • Configure Refresh on change so when the user changes the preference, the layout containing EmbeddedCcpHeader re-renders immediately

Implementation:

  • Add a property lime ‘.OperatorPreferences.TelephoneBarColor.’
  • Use a data transform or declare expression to derive a CSS class such as ‘ctiHeaderRed’, ‘ctiHeaderBlue’ etc. from that value.
  • On the Dynamic Layout that wraps ‘EmbeddedCcpHeader’, use that derived property in the Content CSS Class if your rule configuration supports property references.
  • Put the CTI header in its own refreshable layout/section and use Refresh on change tied to the color property.
  • Define the actual CSS classes in the Skin rule or an included stylesheet.

Avoid dynamically rewriting inline styles with custom JavaScript if a property-driven CSS class + section refresh can solve it