openFrameAPI - Client
The openFrameAPI provides methods that interact with OpenFrame. OpenFrame is an omni-present frame that communication partners can use to integrate their systems into the ServiceNow platform.
One of the core requirements is the ability to connect and serve code from different domains that can connect seamlessly with partner subsystems. This cross domain connection is required to keep connections and callbacks registered into communication systems without any cross domain issues.
openFrameAPI - getAWAAgentPresence(String success, String failure)
Returns the logged in agent’s current presence state.
| Name | Type | Description |
|---|---|---|
| success | String | If the method is successful, name of the callback function to invoke. |
| failure | String | If the method fails, name of the callback function to invoke. |
| Type | Description |
|---|---|
| presence | Results passed to the success callback function by the openFrame infrastructure. Data type: Object |
| presence.available | Flag that indicates whether the associated agent is available. Valid values:
Data type: Boolean |
| presence.channels | List of available channels of communication with the agent. Data type: Array of Objects
|
| presence.channels.available | Flag that indicates whether the channel is available. Valid values:
Data type Boolean |
| presence.channels.name | Name of the channel, such as Chat or Phone. Data type: String |
| presence.channels.restrict_update | Flag that indicates whether the user can restrict updates to the channel. Valid values:
Data type Boolean |
| presence.channels.service_channel_type | Type of the service channel. Data type: String |
| presence.channels.sys_id | Sys_id of the channel record. Data type: String Table: Service Channels [awa_service_channel] |
| presence.name | Name of the agent's presence state. Data type: String |
| presence.sys_id | Sys_id of the presence state record. Data type: String Table: Presence States [awa_presence_state] |
The following code example shows how to call this method.
function failure(data)
{
console.log("failure: " + JSON.stringify(data));
}
function success(data)
{
console.log("success: " + JSON.stringify(data));
}
openFrameAPI.getAWAAgentPresence(success, failure)
Response to success callback function:
success: {
"presence": {
"name": "Available",
"sys_id": "0b10223c57a313005baaaa65ef94f970",
"available": true,
"channels": [
{
"name": "Chat",
"available": true,
"sys_id": "27f675e3739713004a905ee515f6a7c3",
"restrict_update": false,
"service_channel_type": "chat"
}
]
}
}
openFrameAPI - hide()
Hides the OpenFrame in the TopFrame.
| Name | Type | Description |
|---|---|---|
| None |
| Type | Description |
|---|---|
| void |
openFrameAPI.hide()
openFrameAPI - init(Object config, function successCallback, function failureCallback)
Initializes OpenFrame. This must be the first method that you call.
This method initializes communication to TopFrame and initializes any visual elements passed in the config parameter.
| Name | Type | Description |
|---|---|---|
| config | Object | Name-value pairs to use during the initialization process. Possible keys: All keys are optional. Pass an empty object if you don't want to set these key-value pairs.
|
| successCallback | function | Name of the callback function to use if the init method succeeds. The OpenFrame configuration stored in the system is passed as a parameter to the callback function. |
| failureCallback | function | Name of the callback function to use if the init method fails. |
| Type | Description |
|---|---|
| void |
var config = {
height: 300,
width: 200
}
function handleCommunicationEvent(context) {
console.log("Communication from Topframe", context);
}
function initSuccess(snConfig) {
console.log("openframe configuration", snConfig);
//register for communication event from TopFrame
openFrameAPI.subscribe(openFrameAPI.EVENTS.COMMUNICATION_EVENT,
handleCommunicationEvent);
}
function initFailure(error) {
console.log("OpenFrame init failed...", error);
}
openFrameAPI.init(config, initSuccess, initFailure);
openFrameAPI - isVisible(function callback)
Checks to see if the OpenFrame is visible in the TopFrame.
| Name | Type | Description |
|---|---|---|
| callback | function | The callback function receives a parameter with a value of true or false. True if OpenFrame is visible and false if not visible. |
| Type | Description |
|---|---|
| void |
function callback(isVisible) {
console.log(isVisible)
}
openFrameAPI.isVisible(callback)
openFrameAPI - openCustomURL(String details)
Opens a custom URL in the UI16 interface.
| Name | Type | Description |
|---|---|---|
| Url | String | Text of the custom URL. Maximum size: 2083 characters |
| Type | Description |
|---|---|
| void |
openFrameAPI.openCustomURL('10_cool_things.do');
openFrameAPI - openServiceNowForm(Object details)
Opens a form URL.
- In the platform interface, this API opens a form URL in TopFrame.
- For Agent Workspace, this API supports interaction tab management. In Agent Workspace, an interaction record opens in a parent tab and the specified entity record opens in a child tab under the interaction tab.
| Name | Type | Description |
|---|---|---|
| details | Object | Key-value pairs that identify the form URL to open.
|
| details.entity | String | Table or entity name. |
| details.interaction_sys_id | String | Optional. Sys_id of the interaction record to open as parent tab in Agent Workspace. Note: In the platform interface the
interaction_sys_id is ignored. |
| details.query | String | Query to identify the record to open, such as:
query:'sys_id=<record_sys_id>'. |
| Type | Description |
|---|---|
| void |
The following example shows basic usage in platform:
openFrameAPI.openServiceNowForm({entity:'customer_account',
query:'sys_id=447832786f0331003b3c498f5d3ee452', 'interaction_sys_id':'3be092313b711300758ce9b534efc4dd'});
The following example shows how to use the query parameter to create a new record with data provided in the form by using sysparm_query and an encoded query to populate the first and last name fields in Workspace:
openFrameAPI.openServiceNowForm({ entity: 'sys_user',
query: 'sys_id=-1&sysparm_query=first_name=Ivan^last_name=Greggor' });
openFrameAPI - openServiceNowFormwithChildTab()
Opens a ServiceNow form with a child tab if invoked in a workspace or opens an entity if invoked in the UI16 interface.
| Name | Type | Description |
|---|---|---|
| openServiceNowFormwithChildTab | Object | Defines if the API opens a ServiceNow form with a child tab if invoked in a workspace or opens an entity if invoked in the UI16 interface. |
| openServiceNowFormwithChildTab.entity | String | Name of the table that contains the record to open. |
| openServiceNowFormwithChildTab.sys_id | String | Sys_id of the record to open. |
| openServiceNowFormwithChildTab.parent_entity | String | Name of the table to open as a parent tab. |
| openServiceNowFormwithChildTab.parent_entity_sys_id | String | Sys_id of the parent record to open. |
| Type | Description |
|---|---|
| None |
The following example opens the parent entity as a parent tab on a configured workspace, or opens just the entity if invoked in UI16.
openFrameAPI.openServiceNowFormwithChildTab({
entity: "customer_account",
sys_id: "447832786f0331003b3c498f5d3ee452",
parent_entity: "interaction",
parent_entity_sys_id: "3be092313b711300758ce9b534efc4dd"
});
openFrameAPI - openServiceNowList(Object details)
Opens a list URL in the UI16 interface.
| Name | Type | Description |
|---|---|---|
| details | Object | Key value pairs that describe the content to use when opening the list URL. Valid values:
|
| Type | Description |
|---|---|
| void |
openFrameAPI.openServiceNowList({entity:'case', query:'active=true'});
openFrameAPI - setFrameMode(mode)
Sets the OpenFrame mode.
- Sets the appropriate icon in the header: collapse or expand
- Raises the relevant event for CTI:
- openFrameAPI.EVENTS.COLLAPSE
- openFrameAPI.EVENTS.EXPAND
| Name | Type | Description |
|---|---|---|
| Mode | String | Set OpenFrame Mode. Enumerated options:
|
| Type | Description |
|---|---|
| void |
openFrameAPI.setFrameMode(openFrameAPI.FRAME_MODE.COLLAPSE);
openFrameAPI - setHeight(height)
Sets the OpenFrame height.
| Name | Type | Description |
|---|---|---|
| Height | Number | Height in pixels |
| Type | Description |
|---|---|
| void |
openFrameAPI.setHeight(100);
openFrameAPI - setICContext(String Type, Object <Context>)
Sets the context data related to the interaction controls on the client. Use this context data to determine the client UI to display in OpenFrame.
For additional information on interactive controls, see Interaction Controls Component.
For additional information on interaction records, see CSM voice interaction record page.
| Name | Type | Description |
|---|---|---|
| Type | String | Type of context data to set. Valid values:
|
| <Context> | Object | Context data to set. Each context data type is a unique set of input data. Valid Context data objects:
|
| activeCall | Array of Objects | Context details about an active call. Each object represents an ongoing active call. |
| activeCall.callbackContext | Object | Only used if the activeCall.type property is callback. Callback context information for the ongoing callback component. |
| activeCall. callbackContext. callAttemptedByAgent | Boolean | Flag that indicates whether callback was attempted by a customer service agent. Valid values:
Default: False |
| activeCall. callbackContext. callbackNumbers | Array | List of phone numbers provided as strings. |
| activeCall. callbackContext. closeInEndTime | String | Set only if callAttemptedByAgent is true. End time for callback in UTC format. |
| activeCall. callbackContext. customerName | String | Name of the customer. |
| activeCall. callbackContext. dialInEndTime | String | Set only if callAttemptedByAgent is false and the type of callback is auto-dial. Dial-in end time for callback in UTC format. |
| activeCall.currentParticipant | Object | Required. Details about the current participant's call capabilities and call status. |
| activeCall.currentParticipant.actor | String | Type of participant on the call. Valid values:
Note: Other participant types to be added in the future. |
| activeCall.currentParticipant.callStartTime | String | Date and time that the call started. Time standard: UTC Format: RSS - "<day of week>, dd mmm yyyy hh:MM:ss GMT". For example: "Wed, 17 Dec 2024 05:23:41 GMT" |
| activeCall.currentParticipant.capabilities | Object | Details about the capabilities that the current (agent) participant can perform during a call. The associated icons appear in the Active call component for the capabilities that are enabled. |
| activeCall.currentParticipant.capabilities.callbackTransferStatus | String | CCaaS (Contact Center as a Service) callback transfer status. Possible values:
|
| activeCall.currentParticipant.capabilities.cancelCallbackTransferEligible | Boolean | Flag that indicates if the cancel callback transfer option is enabled. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.closeCallback | Boolean | Flag that indicates whether the close callback button is enabled. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.dtmf | Boolean | Flag that indicates whether the agent has dual tone multi-frequency (DTMF) capability for the current call. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.endCall | Boolean | Flag that indicates whether the associated participant can end the call. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.flag | Boolean | Flag that indicates whether the participant can flag the call for quality issues, such as voice quality problems. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.hold | Boolean | Flag that indicates whether the participant can put the call on hold. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.initiateCall | Boolean | Flag that indicates whether the associated participant can start the call. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.leaveAndTransfer | Boolean | Flag that indicates whether the participant can transfer the call to another agent and then drop off the call. Enable this capability for actions such as consult transfers, where the user who is consulted is not the
owner of the call. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.mergeCall | Boolean | Flag that indicates whether the participant can merge the call. Use this capability when the participant's call legs are capable of merging. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.mute | Boolean | Flag that indicates whether the participant can mute the call. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.resumeRecording | Boolean | Flag that indicates whether the participant can resume recording the call. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.pauseRecording | Boolean | Flag that indicates whether the participant can pause recording the call. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.startRecording | Boolean | Flag that indicates whether the participant can start recording the call. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.stopRecording | Boolean | Flag that indicates whether the participant can stop recording the call. Valid values:
Default: false |
| activeCall.currentParticipant.capabilities.transfer | Boolean | Flag that indicates whether the participant can transfer the call. Valid values:
Default: false |
| activeCall.currentParticipant.connectedTime | String | Date and time that the call initially connected. Time base: UTC Format: RSS - "<day of week>, dd mmm yyyy hh:MM:ss GMT". For example: "Wed, 17 Dec 2024 05:23:41 GMT" |
| activeCall.currentParticipant.custom-capability-state-1 | Boolean | Flag that indicates whether there are any current participants on the call. Valid values:
Default: false |
| activeCall.currentParticipant.flagged | Boolean | Flag that indicates whether the call is flagged for an issue, such as a voice quality issue. Valid values:
Default: false |
| activeCall.currentParticipant.held | Boolean | Flag that indicates the participant’s held state. Valid values:
Default: false |
| activeCall.currentParticipant.id | String | Required. Sys_id of the associated participant record, such as the sys_id of the agent. Table: User [sys_user] |
| activeCall.currentParticipant.muted | Boolean | Flag that indicates the participant’s muted state. Valid values:
Default: false |
| activeCall.currentParticipant.name | String | Participant's name. |
| activeCall.currentParticipant.paused | Boolean | Flag that indicates the participant’s paused state. Valid values:
Default: false |
| activeCall.currentParticipant.recording | String | Current recording state of the call. Valid values:
|
| activeCall.currentParticipant.wrapUP | Object | Future use. |
| activeCall.customPayload | Object | Custom payload to pass to OpenFrame as part of OpenFrame events. This is a free-form object and can contain any data needed to customize the active call component, such as adding buttons or text. |
| activeCall.direction | String | Direction of the call for the associated participant. Valid values:
|
| activeCall.externalId | Required. Unique value that identifies the current active call on the associated external system. | |
| activeCall.nowRecordId | String | Required. Sys_id of the active call record. Table: Interaction [interaction] Only supported option for base system. |
| activeCall.nowRecordTable | String | Required. Table to which the active call belongs. Table: Interaction [interaction] Only supported option for base system. |
| activeCall.participants | Array of Objects | Required. List of the additional participants on the call. A participant can be an agent, a customer, an external person who is not an agent or a customer, or a queue. |
| activeCall.participants.actor | String | Type of actor for the associated participant. For example:
|
| activeCall.participants.ani | Automatic number identification. Telephone number to display to the receiver of the phone call. | |
| activeCall.participants.address | String | Participant's telephone number. |
| activeCall.participants.capabilities | Object | Details about the type of capabilities that the participant has for the associated call. |
| activeCall.participants.capabilities.endCall | Boolean | Flag that indicates whether the associated participant can end the call. Valid values:
Default: false |
| activeCall.participants.capabilities.hold | Boolean | Flag that indicates whether the participant can put the call on hold. Valid values:
Default: false |
| activeCall.participants.capabilities.mute | Boolean | Flag that indicates whether the participant can mute the call. Valid values:
Default: false |
| activeCall.participants.connectedTime | String | Required. Date and time that the participant initially connected to the call. Time standard: UTC Format: RSS - "<day of week>, dd mmm yyyy hh:MM:ss GMT". For example: "Wed, 17 Dec 2024 05:23:41 GMT" |
| activeCall.participants.customPayload | Object | Custom payload to pass to OpenFrame as part of Open Frame custom events. This is a free-form object and can contain any data needed to customize the Active call component, such as adding buttons or text. |
| activeCall.participants.dnis | String | Dialed Number Identification Service. Telephone number the participant dialed. |
| activeCall.participants.held | Boolean | Flag that indicates the participant’s held state. Valid values:
Default: false |
| activeCall.participants.heldAtTime | String | Date and time that the participant's connection to the call was put on hold. Time base: UTC Format: RSS - "<day of week>, dd mmm yyyy hh:MM:ss GMT". For example: "Wed, 17 Dec 2024 05:23:41 GMT" |
| activeCall.participants.id | String | Required. Participant's unique ID from the Contact Center as a Service (CCaaS) system. |
| activeCall.participants.muted | Boolean | Flag that indicates the participant’s mute state. Valid values:
Default: false |
| activeCall.participants.name | String | Name of the participant. |
| activeCall.participants.requestACW | Boolean | For agent use case only - only valid when the activeCall.currentParticipant.actor is "agent". Flag that indicates whether the participant is to follow up with the customer. Valid values:
Default: false |
| activeCall.participants.requireWrapup | Boolean | For agent use case only - only valid when the activeCall.currentParticipant.actor is "agent". Flag that indicates whether to display the Wrap up component once the call is complete. Valid values:
Default: false |
| activeCall.participants.state | String | State of the participant's call leg. Appears beneath the phone number in the Active call component. This can be any meaningful text, such as:
|
| activeCall.type | String | Type of call. Valid values:
|
| idleState | Object | Describes the idle state context of the agent. This context data determines the information that appears on the dial pad when an agent is waiting for a call and the capabilities they have through this dial
pad. |
| idleState.capability | Object | Description of the current user's idle state capabilities. |
| idleState.capability.globalContactSerarch | Boolean | Flag that indicates whether to display the global contact list while in the idle state. Valid values:
Default: false |
| idleState.capability.logOut | Boolean | Flag that indicates whether the user can logout while in the idle state. Valid values:
Default: false |
| idleState.capability.outBoundCall | Boolean | Flag that indicates whether the user can make an outbound call while in the idle state. Valid values:
Default: false |
| idleState.currentInboundId | String | Inbound identifier of the provider application used to create the outbound call interaction. Table: Located in the id field of the Provider Channel Identities [sys_cs_provider_application] table. Default: Base system provider application |
| idleState.dialpadInfoMessage | Object | Details about the information message to display on the user's dial pad, such as the currently selected queue.In the following example, the label is Selected queue: and the value is Customer Inquiries. You can also just use either the label or the value parameter with Selected queue: Customer Inquiries. |
| idleState.dialpadInfoMessage.label | String | Free-form label to display on the dial pad. |
| idleState.dialpadInfoMessage.value | String | Free-form message text to display after the label on the dial pad. |
| idleState.enableState | Object | Details about the enable state of the buttons on the dial pad. |
| idleState.enableState.logOut | Boolean | Flag that indicates whether to enable the logout button in the UI while in the idle state. Valid values:
Default: false |
| idleState.enableState.outBoundCall | Boolean | Flag that indicates whether to enable the outbound call button in the UI while in the idle state. Valid values:
Default: false |
| offerContext | Object | Details about the current participant's offer context for resiliency. |
| offerContext.assignment | Object | Details about the agent assignment. |
| offerContext.assignment. allowedToDecline | Boolean | Required. Flag that indicates whether the agent is allowed to decline the assignment. Valid values:
Default: false |
| offerContext.assignment. enableAutoAssign | Boolean | Required. Flag that indicates whether an agent receive the assignment automatically. Valid values:
Default: false |
| offerContext.assignment. offeredOn | String | Date at which the offer was made in UTC format (Www, dd Mmm yyyy HH:mm:ss GMT). |
| offerContext.assignment. timeout | String | Time in milliseconds to assign to an agent before timeout. |
| offerContext.creationTime | String | Optional. Call creation date and time in UTC format (YYYY-MM-DDTHH:MM:SS). |
| offerContext.description | String | Optional. Description of the offer. |
| offerContext.displayContent | Object | Optional. Unique JSON payload values representing values displayed on screen. |
| offerContext.externalId | String | Unique value that identifies the current active call on the associated external system. |
| offerContext.isResilient | Boolean | Optional. Flag that indicates whether the offer context is resilient. Valid values:
Default: true |
| offerContext.metadata | Object | Optional. Free-form custom JSON payload values. |
| offerContext.nowRecordId | String | Required. Sys_id of the active call record. Table: Interaction [interaction] Only supported option for base system. |
| offerContext.nowRecordTable | String | Optional. Use this property to set the work item and segment for transfers. |
| offerContext. providerAppInboundId | String | Optional. Unique ID from the inbound third-party provider. |
| offerContext.queueId | String | Required for regular (non-transfer) assignments. Unique ID representing the assignment queue. Use the transferContent.targetId property for transfer assignments. |
| offerContext.requesterId | String | Required. Unique ID of the offer requester. For voice, this value can be the phone number of the user. |
| offerContext.transferContent | Object | Details required for transfer assignments. |
| offerContext.transferContent. sourceQueueId | String | The sys_id or external ID of the assignment queue. |
| offerContext.transferContent. targetId | String | The sys_id or external ID of the queue transfer. |
| offerContext.transferContent. targetType | String | Type of transfer target. Valid values:
|
| offerContext.transferContent. transferType | String | Type of transfer. Valid values:
|
| offerContext.type | String | Type of call. Valid values:
|
| searchTargetList | Array of Objects | Context details of the transfer related data for a ServiceNow table. |
| searchTargetList.externalId | String | Unique identifier of the associated call on the CCaaS system. |
| searchTargetList.nowRecordId | String | Required. Sys_id of the record to which the searchTargetList belongs. Note: Only records in the Interaction [interaction] table are currently supported. |
| searchTargetList.nowRecordTable | String | Required. ServiceNow table to which the searchTargetList belongs. Table: Only valid value - |
| searchTargetList.participantID | String | Unique identifier for the participant from the CCaaS system. |
| searchTargetList.targets | Array of Objects | Details about the agents, external users, and/or queues to whom the call can be transferred. |
| searchTargetList.targets.payload | Object | Details about the information to display in the transfer call control. The following is an example of a Transfer call control that contains a list of agents that the call can be transferred to. The screen shot shows what elements of the UI that each parameter in the list.payload controls. This example shows an agent payload ( The following shows an example of a queue payload ( |
| searchTargetList.targets.payload.list | Array of Objects | Details about the payload for each type of target. |
| searchTargetList.targets.payload.list.hasStats | Boolean | Flag that indicates whether the associated target has additional statistics such as a wait-time for a queue. Valid values:
Default: false |
| searchTargetList.targets.payload.list.id | String | Unique identifier of the agent or queue in the CCaaS system. |
| searchTargetList.targets.payload.list.moreInfo | Array of Objects | Required if searchTargetList.targets.payload.list.hasStats is set to "true". List of skills that the agent or queue has. This information appears in a pop-up window when the user
selects the information icon at the end of the entities name. |
| searchTargetList.targets.payload.list.moreInfo.label | String | Free-form label for the information to display in the pop-up window, such as a Skill or Language. |
| searchTargetList.targets.payload.list.moreInfo.value | String | Text to display in the pop-up window after the label, such as CRM certified or German. |
| searchTargetList.targets.payload.list.name | String | Name of the agent, external user, or queue. Located in the CCaaS system. |
| searchTargetList.targets.payload.list.presence | String | Presence state of the associated agent. This parameter is only valid for a searchTargetList.targets.type of "agent".Valid values:
|
| searchTargetList.targets.transferSubtypes | Array of Objects | Details about the type of transfer supported for the specified searchTargetList.targets.type. This information appears when the user clicks the ellipse next to the target's name in the UI. For example, if only a consult type is supported for the current target type, say queue, this array will contain one object to denote the consult type of transfer. |
| searchTargetList.targets.transferSubtypes.id | String | Identifier of the transfer subtype. Valid values:
This must correspond to the value in searchTargetList.targets.transferSubtypes.label. |
| searchTargetList.targets.transferSubtypes.label | String | Label of the transfer subtype. If you don't pass a label, nothing appears in the UI for transfer subtype. Valid values:
This must correspond to the value in searchTargetList.targets.transferSubtypes.id. |
| searchTargetList.targets.type | String | Type of target. Valid values:
|
| Type | Description |
|---|---|
| None | |
| Error (offerContext) | Error messages associated with the offerContext object used for resiliency. To view these messages, use the subscribe() method to subscribe to openframe_awa_client_offer event. Context values are represented as follows:
|
The following code example shows how to set the active state context.
openFrameAPI.setICContext("activeCall", {
"activeCall": [
{
"nowRecordTable": "interaction",
"nowRecordId": "12345675678903456",
"externalId": "1234567890",
"type": "call",
"direction": "inbound",
"currentParticipant": {
"id": "participant1",
"name": "John 1",
"actor": "agent",
"state": "connected",
"connectedTime": "Fri, 12 Jul 2024 05:23:41 GMT",
"callStartTime": "Fri, 12 Jul 2024 04:20:22 GMT",
"muted": false,
"held": true,
"paused": true,
"flagged": true,
"recording": "in_progress",
"capabilities": {
"hold": false,
"mute": true,
"endCall": true,
"startRecording": true,
"pauseRecording": true,
"stopRecording": true,
"resumeRecording": true,
"transfer": true,
"mergeCall": true,
"leaveAndTransfer": true,
"dtmf": true,
"flag": true
}
},
"participants": [
{
"id": "customer1",
"name": "Gilly 1",
"actor": "customer",
"address": "+18582359874",
"ani": "+16193287356",
"dnis": "+18004346258",
"state": "connected",
"connectedTime": "Fri, 12 Jul 2024 00:23:41 GMT",
"callStartTime": "Fri, 12 Jul 2024 20:55:04 GMT",
"muted": false,
"held": false,
"heldAtTime": "Fri, 12 Jul 2024 20:55:04 GMT",
"capabilities": {
"mute": true,
"hold": true,
"endCall": true
}
},
{
"id": "agent2",
"name": "Ned",
"actor": "agent",
"address": "+3134787324",
"ani": "+13134787324",
"dnis": "+14773286943",
"state": "Ringing...",
"requireWrapup": true,
"requestACW": true,
"connectedTime": "Fri, 12 Jul 2024 20:24:41 GMT",
"callStartTime": "Fri, 12 Jul 2024 20:56:34 GMT",
"muted": true,
"held": true,
"heldAtTime": "Fri, 12 Jul 2024 20:55:41 GMT",
"capabilities": {
"mute": true,
"endCall": true,
"hold": true
}
}
]
},
{
"nowRecordTable": "interaction",
"nowRecordId": "12345yhedfh534576u5",
"externalId": "1234567890",
"type": "call",
"direction": "inbound",
"currentParticipant": {
"id": "participant1",
"name": "John 1",
"actor": "agent",
"state": "connected",
"muted": true,
"held": false,
"recording": "in_progress",
"paused": true,
"flagged": true,
"capabilities": {
"hold": false,
"mute": true,
"endCall": true,
"record": true,
"startRecording": true,
"stopRecording": true,
"transfer": true,
},
"mergeCall": false,
"dtmf": true,
"flag": true
}
},
"participants": [
{
"id": "customer1",
"name": "Gilly 2",
"actor": "customer",
"address": "+123456789",
"state": "connected",
"connectedTime": "Wed, 04 Dec 2024 00:23:41 GMT",
"muted": true,
"held": false,
"heldAtTime": "Fri, 12 Jul 2024 20:24:41 GMT”,
"capabilities": {
"mute": true,
"hold": true,
"endCall": true
}
},
{
"id": "agent2",
"name": "Ned 2",
"actor": "agent",
"address": "+123456789",
"state": "Ringing...",
"connectedTime": "Fri, 12 Jul 2024 20:24:41 GMT",
"muted": true,
"held": true,
"heldaAtTime": "Fri, 12 Jul 2024 20:24:41 GMT”,
"capabilities": {
"mute": true,
"endCall": true,
"hold": true
}
}
]
}
]
}
);
The following example shows how to set the idle state context.
openFrameAPI.setICContext("idleState", {
"capability": {
"outBoundCall": true,
"logOut": true
},
"enableState": {
"outBoundCall": true,
"logOut": true
},
"dialpadInfoMessage": {
"label": "Info Message Label",
"value": "Info Message Value"
},
"currentInboundId": "1234"
});
The following example shows how to set the search target list context.
openFrameAPI.setICContext("searchTargetList",
{
"searchTargetList": [
{
"nowRecordTable": "interaction",
"nowRecordId": "1234",
"externalId": "5678",
"participantID": "participant1",
"targets": [
{
"type": "agent",
"transferSubtypes": [
{
"id": "consult",
"label": "Consult"
},
{
"id": "blind",
"label": "Blind"
}
],
"payload": {
"list": [
{
"name": "John Jason",
"id": "agent1Id",
"hasStats": "true",
"presence": "away",
"moreInfo": [
{
"label": "Skill",
"value": "10sec"
}
]
}
]
}
},
{
"type": "queue",
"transferSubtypes": [
{
"id": "consult",
"label": "Consult"
},
{
"id": "blind",
"label": "Blind"
}
],
"payload": {
"list": [
{
"name": "Product Support Queue",
"id": "queue1Id",
"hasStats": "true",
"moreInfo": [
{
"label": "Skill",
"value": "10sec"
},
{
"label": "Queue Skill",
"value": "German"
}
]
},
{
"name": "Billing Queue",
"id": "queue2Id",
"hasStats": "true",
"moreInfo": [
{
"label": "Skill",
"value": "10sec"
}
]
}
]
}
}
],
"customPayload": {}
}
],
"customPayload": {}
});
openFrameAPI.setICContext('activeCall', callbackContext);
var callbackContext = {
"activeCall": [
{
"nowRecordTable": "Customer interaction",
"nowRecordId": "12345yhedfh534576u5",
"externalId": "1234567890",
"type": "callback",
"currentParticipant": {
"id": "agent1",
"capabilities": {
"initiateCall": "true",
"closeCallback": "true",
"transfer": "true",
"cancelCallbackTransferEligible": "false",
"callbackTransferStatus": ""
}
},
"callbackContext": {
"customerName": "Fred Luddy",
"callbackNumbers": [
"8665551234"
],
"callAttemptedByAgent": "true",
"closeInEndTime": "Mon, 05 Dec 2024 09:25:08 GMT",
"dialInEndTime": ""
}
}
]
}The following example shows how to set resiliency call response details using the offerContext property.
// Set offerContext
openFrameAPI.setICContext('offerContext', offerContext);
var offerContext = {
"offerContext": [
{
"nowRecordTable": "interaction",
"type": "phone",
"externalId": "1234567890",
"externalSegmentId": "12345yhedfh534576u5",
"queueId": "10111ad087063250df52fe66cebb3520",
"creationTime": "19-12-2025 11:23:45",
"requesterId": "4085018550",
"assignment": {
"offeredOn": "Fri, 19-12-2025 13:07:59",
"timeout": "4000",
"allowedToDecline": true,
"enableAutoAssign": true
},
"displayContent": {
"title": "Phone",
"displayContent1": "Abel Tuter",
"displayContent2": "Priority - 4-Low",
"displayContent3": "category - Product Issue"
}
}
]
};
openFrameAPI - setIcons(Array icons)
Defines icons in the OpenFrame header that are placed next to the close icon.
| Name | Type | Description |
|---|---|---|
| icons | Array of objects | A list of icon configurations, where each icon configuration is an object with key values imageURL, imageTitle, and any other needed context. Maximum size: Icons can be a maximum of 16x16 pixels. Larger images are automatically adjusted to this maximum. |
| Type | Description |
|---|---|
| void |
openFrameAPI.setIcons([{imageURL:'https://mydomian.com/image/mute.png',
imageTitle:'mute', id:101}, {imageURL:'https://mydomian.com/image/hold.png',
imageTitle:'hold', id:102}]);
openFrameAPI - setPresenceIndicator(presence)
Sets the presence indicator to display agent availability in a workspace.
For more information on configuring OpenFrame, refer to Create an OpenFrame configuration
| Name | Type | Description |
|---|---|---|
| state | String | Presence state of the agent. Default states:
You can also specify custom states. |
| color | String | Presence indicator color on workspace. Supported colors:
|
| Type | Description |
|---|---|
| void |
openframeAPI.setPresenceIndicator('Available', 'green');
openFrameAPI - setSize(Number width, Number height)
Sets the OpenFrame size.
| Name | Type | Description |
|---|---|---|
| width | Number | Should be greater than zero. |
| height | Number | Should be greater than zero. |
| Type | Description |
|---|---|
| void |
openFrameAPI.setSize(300, 370);
openFrameAPI - setSubtitle(String subTitle)
Sets the OpenFrame subtitle.
| Name | Type | Description |
|---|---|---|
| subTitle | String | A string of 256 or fewer characters. |
| Type | Description |
|---|---|
| void |
openFrameAPI.setSubtitle('+18888888888');
openFrameAPI - setTitle(String title)
Sets the OpenFrame title.
| Name | Type | Description |
|---|---|---|
| title | String | A string of 256 or fewer characters. |
| Type | Description |
|---|---|
| void |
openFrameAPI.setTitle('Incoming Call');
openFrameAPI - setTitleIcon(Object icon)
Sets the OpenFrame's title icon.
| Name | Type | Description |
|---|---|---|
| icon | Object | Object of key value pairs. Keys include imageURL, imageTitle, and any other context needed. Maximum size: Icons can be a maximum of 16x16 pixels. Larger images are automatically adjusted to this maximum. |
| Type | Description |
|---|---|
| void |
openFrameAPI.setTitleIcon({imageURL:'/my/image/path.png', imageTitle:'mute', id:101});
openFrameAPI.setTitleIcon({imageURL:'https://mydomian.com/image/path.png',
imageTitle:'mute', id:101});
openFrameAPI - setWidth(width)
Sets the OpenFrame width.
| Name | Type | Description |
|---|---|---|
| Width | Number | Width in pixels |
| Type | Description |
|---|---|
| void |
openFrameAPI.setWidth(100);
openFrameAPI - show()
Makes the OpenFrame visible in the TopFrame.
| Name | Type | Description |
|---|---|---|
| None |
| Type | Description |
|---|---|
| void |
openFrameAPI.show()
openFrameAPI - subscribe(openFrameAPIEVENT event, function eventCallback)
Subscribes to a specified event.
| Name | Type | Description |
|---|---|---|
| event | openFrameAPIEVENT | The event to subscribe to:
|
| eventCallback | function | Function to call when the specified event occurs. |
| Type | Description |
|---|---|
| results | Most event subscriptions have no return values. The event subscriptions that do return values are described in the following table entries. |
| openframe_awa_agent_presence | In AWA, the openframe_awa_agent_presence event returns the presence object:presence: Information about an agent's current presence state and channel.
|
| openframe_awa_workitem_accepted and openframe_awa_workitem_offered | In AWA, the openframe_awa_workitem_accepted and openframe_awa_workitem_offered events return the workItem object:workItem: Information about the work item that is associated with the event.
|
| openframe_awa_workitem_rejected | In AWA, the openframe_awa_workitem_rejected event returns the workItem object:workItem: Information about the work item that is associated with the event.
|
| openframe_heart_beat | The openframe_heart_beat event returns the following object:
|
| openframe_wrap_up_submitted | The openframe_wrap_up_submitted event returns the following object:
|
The following code example shows how to call this method for an openframe_awa_agent_presence event.
function handleIconClick(context) {
console.log("Icon was clicked", context);
}
openFrameAPI.subscribe(openFrameAPI.events.openframe_awa_agent_presence, handleIconClick);
Output:
// Sample presence object output
// openframe_awa_agent_presence event only
{
"result":{
"presence":{
"name":"Available",
"sys_id":"27f675e3739713004a905ee515f6a7c3",
"available":true,
"channels":[
{
"name":"Chat",
"available":true,
"sys_id":"36f675e4239713124a905fe515f6a832",
"restrict_update":false
},
{
"name":"Phone",
"available":true,
"sys_id":"9378a530a1820610f809018efd9bc01e",
"restrict_update":false
}
]
}
}
}
The following code example shows how to call this method for an openframe_awa_workitem_accepted event.
function handleIconClick(context) {
console.log("Icon was clicked", context);
}
openFrameAPI.subscribe(openFrameAPI.events.openframe_awa_workitem_accepted, handleIconClick);
Output:
// Sample workItem object output
// openframe_awa_workitem_accepted event only
{
"result": {
"workItem": {
"sys_id": "14c86c40a1650610f87701807d9bc0be",
"size": 1,
"serviceChannel": {
"name": "Chat",
"sys_id": "27f675e3739713004a905ee515f6a7c3"
},
"document": {
"sys_id": "aa582040a1650610f87701807d9bc076",
"table": "interaction"
},
"previousWorkItem": "7c78a440a1650610f87701807d9bc02b",
"isQueueTransferred": true,
"isAutoAccepted": true
}
}
}
The following code example shows how to call this method for an openframe_awa_workitem_rejected event.
function handleIconClick(context) {
console.log("Icon was clicked", context);
}
openFrameAPI.subscribe(openFrameAPI.events.openframe_awa_workitem_rejected, handleIconClick);
Output:
// Sample workItem object output
// openframe_awa_workitem_rejected event only
{
"payload": {
"workItem": {
"sys_id": "2c3bdc4824250610f8775e73b116f8de",
"size": "1",
"serviceChannel": {
"name": "Chat",
"sysID": "27f675e3739713004a905ee515f6a7c3"
},
"document": {
"sys_id": "cf0a180824250610f8775e73b116f80c",
"table": "interaction"
},
"rejection": {
"reason": "Busy",
"sys_id": "4e93fa29b38023002e7b6e5f26a8dc20"
},
"previousWorkItem": "831b9c4824250610f8775e73b116f841",
"isQueueTransferred": true
}
}
}
The following example shows how to subscribe to the interaction_control_action event.
openFrameAPI.subscribe("interaction_control_action", function(action) {
// Can perform the action based on the name
if (action.name == "mute") {
mute();
openFrameAPI.setICContext("activeCall", context); // Update context representing the change
} else if (action.name == "getSearchTarget") {
action.payload.searchType == "queue" ? fetchQueueTransferList(action.payload.searchTerm) : fetchAgentTransferList(action.payload.searchTerm);
openFrameAPI.setICContext("searchTargetList", context); // Call context will have the transfer list
} else if (action.name == "logout") {
logout();
openFrameAPI.showIframe(); // Show iframe api
}
});
openFrameAPI - toastMessage(String message, String type, Number duration)
Displays an alert message.
| Name | Type | Description |
|---|---|---|
| message | String | Message to display in the alert. |
| type | String | Type of message. Possible values:
|
| duration | Number | Optional. Duration to display the message before it is auto-dismissed. Units: Milliseconds Default: The message is displayed until it is manually closed. |
| Type | Description |
|---|---|
| None |
This example displays info, warning, and error messages.
openFrameAPI.toastMessage("Testing info message", "info", 10000); //display for 10 seconds
openFrameAPI.toastMessage("Testing warning message", "warning"); //display until manually closed
openFrameAPI.toastMessage("Testing error message", "error");
openFrameAPI - version()
Returns the OpenFrame API version.
| Name | Type | Description |
|---|---|---|
| None |
| Type | Description |
|---|---|
| String | The OpenFrame API version |
var version = openFrameAPI.version();
console.log("API version " + version);