SecureCall WebexCC

These are the widgets required to integrate SecureCall into the WebexCC desktop.

SecureCall can be integrated into WebexCC by using the widgets in this package. There are two widgets needed:

• securecall-webexcc-telephony
• securecall-webexcc-widget

securecall-webexcc-telephony is installed in the header and handles controlling the customer call to secure and potentially unsecure the call.

securecall-webexcc-widget displays the data entry point of SecureCall including the customer entered secure fields and allows the agent to submit a transaction to SecureCall.

Desktop Layouts

The widgets need to be incorporated into your WebexCC desktop layout. You would add them to the agent or supervisorAgent sections. Usually there would be no need to add them to the supervisor section as supervisors are typically not answering calls.

NOTE: the following examples will pick up the latest widgets. This is NOT what you would want to do in a production environment. You should always specify a version as changes may be pushed that could affect your environment. If you want to pick up any bug fixes automatically, then specify the major and minor versions only i.e. 1.2 rather than 1.2.3

You can specify a version like this:

"script": "https://cdn.jsdelivr.net/npm/@securecall/client-webex@version/dist/bundle.js",

For example:

"script": "https://cdn.jsdelivr.net/npm/@securecall/[email protected]/dist/bundle.js",

jsdelivr is a well-known CDN which uses multiple underlying CDNs to provide service but makes no reliability guarantees. If you are concerned about ensuring reliability, you can download and host this package in your own environment.

securecall-webexcc-telephony

securecall-webexcc-telephony is placed in the advancedHeader section. For example:

"advancedHeader": [
  {
    "comp": "agentx-webex"
  },
  {
    "comp": "agentx-outdial"
  },
  {
    "comp": "agentx-notification"
  },
  {
    "comp": "agentx-state-selector"
  },
  {
    "comp": "securecall-webexcc-telephony",
    "script": "https://cdn.jsdelivr.net/npm/@securecall/client-webex/dist/bundle.js",
    "properties": {
      "apiLocation": "https://client.au.securecallapi.cloud",
      "agentEmailId": "$STORE.agent.agentEmailId",
      "orgId": "$STORE.agent.orgId"
    }
  }
],

securecall-webexcc-widget

securecall-webexcc-widget can be placed in either the nav section or as a screenpop section in the panel section. It depends on your agent's workflow. You can have it in both areas if you want.

For example, if you want the widget in the screenpop panel then the following would be placed in the panel section in the children array. It contains the tab header as well as the SecureCall widget.

{
  "comp": "md-tab",
  "attributes": {
    "slot": "tab"
  },
  "children": [
    {
      "comp": "md-icon",
      "attributes": {
        "name": "end-to-end-encryption_16"
      }
    },
    {
      "comp": "span",
      "textContent": "SecureCall"
    }
  ]
},
{
  "comp": "md-tab-panel",
  "attributes": {
    "slot": "panel"
  },
  "children": [
    {
      "comp": "dynamic-area",
      "properties": {
        "area": {
          "id": "dw-panel-two",
          "widgets": {
            "securecall": {
              "comp": "securecall-webexcc-widget",
              "script": "https://cdn.jsdelivr.net/npm/@securecall/client-webex/dist/bundle.js",
              "properties": {
                "apiLocation": "https://client.au.securecallapi.cloud",
                "agentEmailId": "$STORE.agent.agentEmailId",
                "orgId": "$STORE.agent.orgId",
                "darkMode": "$STORE.app.darkMode",
                "currentInteraction": "$STORE.agentContact.taskSelected",  
                "requestMapping": "invAmount=amount&invReference=paymentReference",
                "responseMapping": "scReceipt=response.receipt",
                "readOnlyIfMapped": true,
                "requestMappingOverride": true,
                "responseMappingOverride": true
              }
            }
          },
          "layout": {
            "areas": [
              [
                "securecall"
              ]
            ],
            "size": {
              "cols": [
                1
              ],
              "rows": [
                1
              ]
            }
          }
        }
      }
    }
  ]
}

Widgets

securecall-webexcc-telephony

Properties

| Property | Type | Description | |-------------------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | apiLocation | string | The SecureCall Client API URL. This is dependant on the SecureCall PoP you are running out of. Valid values are:https://client.au.securecallapi.cloudhttps://client.us.securecallapi.cloudhttps://client.uk.securecallapi.cloud | | agentEmailId | string | The user's email address used to login into SecureCall. This should always be $STORE.agent.agentEmailId | | orgId | string | The user's Webex Org ID used to identify and authenticate the user to SecureCall. This should always be $STORE.agent.orgId | | allowIconClick | boolean | If set to true (the default) then the icon in the header can be clicked to secure or unsecure the call. | | responseMapping | object | See below for details. Please note you can configure this here or in the securecall-webexcc-widget configuration but not both | | responseMappingOverride | boolean | Set to true to allow SecureCall settings to override response mapping. Please note you can configure this here or in the securecall-webexcc-widget configuration but not both | | webhookURL | string | The URL to send the transaction response to. This is optional. | | webhookServiceKey | string | The service key to use when sending the transaction response to the webhookURL. This is optional. This is sent in the "Key" header as is | | webhookCustomerCAD | string | The name of a CAD variable that is used to send the customer id to the webhook. See below for more details | | accessToken | string | Set to STORE.auth.accessToken to dynamically pick up the access token needed to write to CJDS | | wxccUrl | string | The URL for the Webex CC API. The appropriate one for your region can be found here https://developer.webex.com/webex-contact-center/docs/frequently-asked-questions-cc#discovery--availability | | cjdsWorkspaceId | string | This is required if you want to send a transaction response to Customer Journey. This is the value when you setup Customer Journey in Control Hub | | cjdsFields | object | This is a mapping of CJDS labels to SecureCall fields. It is in the format "CJDS Label": "SecureCall field name". The format of the message is described in the Webhook section and a dotted notation like the responseMapping is used to lookup the field value | | cjdsAgentName | string | This is optional. If set, then the agent name will be added with the label "Agent". This can be set to STORE.agent.agentName or STORE.agent.agentEmailId |

securecall-webexcc-widget

Properties

| Property | Mandatory | Type | Description | |-------------------------|-----------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | apiLocation | Yes | string | The SecureCall Client API URL. This is dependant on the SecureCall PoP you are running out of. Valid values are:https://client.au.securecallapi.cloudhttps://client.us.securecallapi.cloudhttps://client.uk.securecallapi.cloud | | agentEmailId | Yes | string | The user's email address used to login into SecureCall. This should always be $STORE.agent.agentEmailId | | orgId | Yes | string | The user's Webex Org ID used to identify and authenticate the user to SecureCall. This should always be $STORE.agent.orgId | | darkMode | Yes | boolean | Used to control the widgets reaction to the WebexCC desktop darkMode switch. This should always be set to $STORE.app.darkMode | | currentInteraction | Yes | string | Passes the current Task information to the widget. This should always be $STORE.agentContact.taskSelected | | requestMapping | No | object | See below for details | | responseMapping | No | object | See below for details. Please note you can configure this here or in the securecall-webexcc-widget configuration but not both | | readOnlyIfMapped | No | boolean | Defaults to false. If set to true then the SecureCall field will be set to read-only if the CAD variable exists and is used to fill the field | | requestMappingOverride | No | boolean | Set to true to allow SecureCall settings to override request mapping | | responseMappingOverride | No | boolean | Set to true to allow SecureCall settings to override response mapping. Please note you can configure this here or in the securecall-webexcc-widget configuration but not both | | requestFields | No | object | An object containing field names and configuration. This allows configuration of new fields or adjustment of existing fields. | | responseFields | No | object | An object containing field names and configuration. This allows configuration of new fields or adjustment of existing fields. |

Mapping

Mapping SecureCall field values to and from WebexCC CAD fields can be done in two ways:

• Using the externalMapping field in the SecureCall settings by setting "requestMappingOverride": true and/or "responseMappingOverride": true
• Using the requestmapping or reponseMapping properties

Which one you use is up to you. If you have simple mapping that can be set for everyone in your tenant, then the SecureCall configuration could be suitable. If you want to configure based on teams, then the desktop layout properties may be more suitable. You can also use a combination of both if you want to set some things at a global level and adjust them per team.

The requestMapping and responseMapping is in object format with the CAD name as the key and the SecureCall field name as the value.

For example

{
  "cadname1": "securecallfield1",
  "cadname2": "securecallfield2"
}

Response Mapping

Response mapping uses a dotted notation for the SecureCall field. This is used to traverse into the SecureCall event data to collect the information required.

Typically, the first part will be "response" to get data the payment gateway has responded with such as "response.receipt".

However, it can also be:

• "request" to get data you sent to the payment gateway in the submission like "request.amount" or "request.metadata.customerNumber"
• "secureData" to get customer entered information such as the masked PAN "secureData.pan.value"

Request Fields

Request fields duplicate the configuration of the request fields in the SecureCall organisation settings. Please refer to the SecureCall documentation at https://securepii.cloud for details.

Note if you want to use the externalMapping in these settings, then you should also have requestMappingOverride set to true as it uses the same mechanism as the settings to configure the fields and mapping.

Response Fields

Response fields duplicate the configuration of the response fields in the SecureCall organisation settings. Please refer to the SecureCall documentation at https://securepii.cloud for details.

Note if you want to use the externalMapping in these settings, then you should also have responseMappingOverride set to true

Webhook

The SecureCall widget can send a transaction response to a webhook. This is usually a WebexConnect Inbound Webhook to send a receipt SMS or write to Customer Journey.

The customer is identified by the webhookCustomerCAD CAD variable. If that isn't set or the CAD can't be found, it will fall back to using the ani for an inbound call or the DN for an outbound call. These represent the customer phone number.

The format of the message sent to the webhook is:

{
  "state": "success",
  "request": {
    "metadata": {
    },
    "transaction_type": "pay",
    "amount": "13.56",
    "payment_reference": "inv#1758771160",
    "token_reference": "cust#1234",
    "source_ip": "1.1.1.1",
    "request_id": "52576e7c-0a56-4e10-a88d-e5b2454e8df7"
  },
  "response": {
    "transaction_id": "1234567890",
    "receipt": "0987654321"
  },
  "secureData": {
    "pan": {
      "valid": true,
      "brands": [
        "visa"
      ],
      "value": "4111********1111"
    },
    "expiry": {
      "valid": true,
      "value": "1230"
    },
    "cvv": {
      "valid": true,
      "value": "***"
    },
    "state": "complete"
  },
  "customerId": "+61355551234",
  "session": "79610379-7e75-4e4c-9347-4d346fe216b2"
}

There may be extra data in the metadata object. This is dependent on the SecureCall configuration.

Customer Journey

The SecureCall widget can send a transaction response to Customer Journey directly. This is done by setting the accessToken, wxccUrl, cjdsWorkspaceId and cjdsFields properties. Optionally, you can also set the cjdsAgentName property.

The cjdsFields property is an object containing CJDS labels and SecureCall field names. The format of the message is described in the Webhook section, and a dotted notation like the responseMapping is used to look up the field value.

If the value of the SecureCall field is empty, then the CJDS label won't be sent. This allows for the error message below to only be sent to CJDS on a failure and the receipt number to only be shown on a success.

Please note that as at this time (Oct 2025) CJDS doesn't honour the order of the fields and may be displayed in a different order when viewing them via the CJDS widget or other reporting tools.

{
  "cjdsFields": {
    "Amount": "request.amount",
    "Receipt": "response.receipt",
    "Reference": "request.payment_reference",
    "SecureCall Session": "session",
    "PAN": "secureData.pan.value",
    "Expiry": "secureData.expiry.value",
    "Card Type": "secureData.pan.brands[0]",
    "Failure Message": "response.error_message"
  }
}