WxCC Widgets

• https://github.com/WebexSamples/webex-contact-center-api-samples/tree/main/widget-samples/
• https://github.com/webex/widgets/tree/ccwidgets/packages/contact-center
• Desktop-agentContact

This was based on the headless sample provided by Cisco. Most of the code was then removed and then new code was added which uses the Agent Contact Module.

When this headless gadget is added to the Agent's desktop layout - any incoming Social Tasks (e.g. WhatsApp) will get accepted automatically (i.e. enable auto answer for social chats).

Reference: https://github.com/WebexSamples/webex-contact-center-api-samples/tree/main/widget-samples/headless-crm-widget-sample

Package: headless-social-autoanswer-widget.zip

• download above and to run locally (http://localhost:5000/build/bundle.js) then run the following:
  • npm install
  • npm run build
  • npm run dev

If you then want to host the file - copy the ./srv/build/bundle.js file and place it on a public facing web server (and update your Desktop Layout with the new URL) - an example Desktop layout for this headless widget is below.

headless-widget-social-autoanswer.js

import { Desktop } from '@wxcc-desktop/sdk';
 
// This is the logger initializer factory method for the headless widget
export const logger = Desktop.logger.createLogger('headless-social-autoanswer-widget'); 
 
// Some sample data points
let version = 1.00;
 
customElements.define(
  'headless-social-autoanswer-widget',
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }
 
  // Mounting the headless widget and initializing
  async connectedCallback() 
  {
    logger.info('Log: Version: ' + version);
    this.init(); 
    logger.info('Log: Webcomponent connectedCallback function');
  }
 
 
  // Init Method - called to configure the WebexCC Desktop JS SDK inside the headless widget
  async init() 
  {  
    await Desktop.config.init();
    logger.info('Log: init function');
    this.registerEventListeners();
  }
 
 
  // This method registers all the event listeners supported by the JS SDK.
  // The event listeners are asynchronous and require handlers within each of the listeners.
  // Sample handlers below are only console logs as examples
  async registerEventListeners()
  {
 
    // Listener for agent contact offered event - Customized by GOR
    Desktop.agentContact.addEventListener('eAgentOfferContact', async (agentContact) => {
      logger.info('Log: Agent Offered Contact');
      //logger.info('Log: Agent Offered Contact: Details: '+ JSON.stringify(agentContact));
 
	  let callOfferedContactDirection = agentContact.data['interaction'].contactDirection.type;
      logger.info('Log: callOffered contactDirection: '+ callOfferedContactDirection);
	  let callOfferedInteractionId = agentContact.data['interaction'].interactionId;
      logger.info('Log: callOfferedInteractionId: '+ callOfferedInteractionId);
      let callOfferedMediaType = agentContact.data['interaction'].mediaType;
      logger.info('Log: callOfferedMediaType: '+ callOfferedMediaType);
 
	  if(callOfferedContactDirection.toLowerCase() === 'inbound' && callOfferedMediaType.toLowerCase() === 'social'){
		logger.info('Log: Incoming Social Task Offered. Let\'s attempt to Auto Answer!');
		let acceptContactResponse = await Desktop.agentContact.accept({interactionId: callOfferedInteractionId});
		//logger.info('Log: acceptContactResponse: '+ JSON.stringify(acceptContactResponse));
 
		try{
		let acceptContactResponseInteractionState = acceptContactResponse.data['interaction'].state;
		//logger.info('Log: acceptResponseInteractionState: '+ acceptContactResponseInteractionState);
		if (acceptContactResponseInteractionState === "connected"){
			logger.info('Log: Accepted Task Successfully. Now connected.');
		}else{
			logger.info('Log: Failed to Accept task? acceptResponseInteractionState: '+ acceptContactResponseInteractionState);
			}
		} catch(error){
		logger.info('Log: acceptResponseInteractionState - error:'+ error);
		}
	  }  
 
    });
 
  } 	
 
  disconnectedCallback() {;}
 
});

            "headless": {
                "id": "dw-headless",
                "widgets": {
                    "comp1": {
			"comp": "headless-social-autoanswer-widget",
                        "script": "http://localhost:5000/build/bundle.js"
                    }
                },
                "layout": {
                    "areas": [
                        [
                            "comp1"
                        ]
                    ],
                    "size": {
                        "cols": [
                            1
                        ],
                        "rows": [
                            1
                        ]
                    }
                }
            }