Listen signal

This page details the requirements to integrate the listen signal which is used to respond to user interaction with the panel and perform your application specific logic.

Using listen signal

To determine when the user has selected an option for coverage you need to use the listen signal passing an onChange property that takes a function to handle the change event.

This is similar to addEventListener() difference being we are using XCE Signals instead.

Call signalLayer.push() with listen as the value for the signal property and add onChange as in the following example:

/* protection-offer example */
window.signalLayer.push({
  signal: "listen",
  element: "xce-protection-offer",
  onChange: (args) => {
    if(args.selectedOption !== "reject"){
      //Customer has selected a policy
      //List of selected policies available in args.selectedPolicies
    } else {
      //Customer has said no to a policy
    }
  },
});

selectedOption

The selectedOption property is a string value returned in the callback arguments object will match the radio input value attribute that the customer selected.

The input value attribute varies depending on your integration.

• For option 'YES' the radio input value and the selectedOption property equals the product id value.

• For option 'NO' the radio input value and the selectedOption property equals reject.

selectedProducts

The selectedProducts property is an array of objects returned in the callback arguments object that can have the selected products metadata.

• For option 'YES' the selected products metadata will be appended to the selectedProducts array with the ones they wish to book.

• For option 'NO' the selectedProducts array will return empty.

Use the selectedProducts metadata to filter the products before confirming the offer.

We recommend using the id property in the metadata when filtering products.

XCover product metadata schema:

id	string
type	string
start_date	string
end_date	string
policy_version_id	string
price_total_amount	float
price_total_amount_formatted	string

Example:

{
    id: 'c345196d-a760-4222-87c3-d7f04c2549d3',
    type: 'XCover',
    start_date: '2026-05-03T09:25:00+10:00',
    end_date: '2026-06-03T09:25:00+10:00',
    policy_version_id: '2ce2c6b1-b266-40b3-a62e-ae054a8a9671,
    price_total_amount: 85.6,
    price_total_amount_formatted: '$85.6'
}

Access the args object in the onChange callback function to access the selectedProducts object array as in the following example:

/* multiple policy offer example */
window.signalLayer.push({
  signal: "listen",
  element: "xce-protection-offer",
  onChange: (args) => {
    if (args.selectedProducts?.length) {
      // your data filtering logic here..
    }
    // your enable checkout logic here..
  },
});

Modal element

When working with our modal element the onSubmit property will be expected as part of the object pushed to the signal layer array.

This handler function will be triggered every time the modal element is closed by the user and will return the same arguments object including selectedOption.

/* protection-offer-modal example */
window.signalLayer.push({
  signal: "listen",
  element: "xce-protection-offer-modal",
  onChange: (args) => { // onChange runs on every input option change event
    if(args.selectedOption !== "reject"){
      //Customer has selected a product
      //List of selected products available in args.selectedProducts
    }
    // your enable checkout logic here..
  },
  onSubmit: (args) => { // onSubmit runs on modal close event
    if(args.selectedOption !== "reject"){
      //Customer has selected a product
      //List of selected products available in args.selectedProducts
    }
    // your enable checkout logic here..
  },
});

From here, you can perform whatever add-to-cart functionality is required and unblock the checkout journey that was preventing them from continuing until they selected an option.

The onChange and onSubmit handler function arguments will not include the native HTML Event object