UCCX Finesse and Spark Team Announcement gadget as a CAD CSD team messages and chat replacement

While upgrading clients to UCCX 11 and 11.5, and away from CAD and CSD to Finesse, one feature often found lacking is the old team messaging and chat features available via CAD.

After experimenting with Cisco's Spark Care Assistant bot at https://depot.ciscospark.com I thought it might be a good option to use as a replacement.  My plan was to possibly incorporate this bot or one similar into Finesse as a gadget to replace the missing CAD/CSD feature and allow broadcast messages from supervisors to agents.  It would also give me the opportunity to dig a little into Spark's and Finesse's feature set and the related javascript and css design that would hold it together.

Then I found I would be reinventing the wheel, as Cisco already published a Spark Team Announcements Gadget here some time ago: https://communities.cisco.com/community/developer/finesse/blog/2016/09/28/try-out-the-new-cisco-spark-team-announcements-gadget  That took some fun out of the project for me but at least Cisco seems to be addressing Finesse native shortcomings in some fashion.

Get the gadget:

You can get the Spark Team Announcements Sample Gadget code here: https://github.com/CiscoDevNet/finesse-sample-code/tree/master/SparkTeamAnnouncementsSampleGadget Make note that the gadgets are version specific.  I've used a few of Cisco's gadgets on UCCX version 10.6 before they were moved to github and getting new gadgets to work on older versions had some challenges for awhile.  I suppose they will be another thing that needs to be considered carefully during upgrade processes.  There is a nice post regarding version differences here https://communities.cisco.com/community/developer/finesse/blog/2016/03/16/how-to-convert-your-existing-1051-custom-gadget-to-work-with-1061-or-1101 that may be helpful at least for awhile.

Install the gadget:

Even if you are using UCCX with Finesse running co-resident you still have the ability to install gadgets directly on your UCCX server to be referenced by Finesse.  There is a 3rdpartygadget account in UCCX / Finesse that can be used to upload gadgets.

You'll need to reset the account password to something you know by SSH'ing to the UCCX CLI and running utils reset_3rdpartygadget_password.

Once you have that, you can transfer files to and from UCCX's / Finesse's gadget folder http:///3rdpartygadget/files/ via SFTP.  To make life easy, I might suggest using WinSCP here https://winscp.net/eng/index.php or a similar tool to provide a graphical interface during the process. Here what that looks like if you haven't used it:

Implement notes:

The gadget code from github includes a great PDF describing the implementation steps.  I did get tripped up a couple time though.

You'll need to go to https://developer.ciscospark.com/ and create a new integration.

My first hurdle was simply having an icon available to visually identify my new "App".  It seems you are required to host a 512x512 pixel icon somewhere publicly to be used visually and you cannot proceed through the integration creation without it.  If you don't have a public web server somewhere, you might investigate a free version like https://sites.google.com.  I had mixed results using links from file sharing sites and while the URL is rather convoluted, the image sitting on my Google sites page seems to work well for some reason.  Ultimately I came up with this one one:

https://1e96032b-a-62cb3a1a-s-sites.googlegroups.com/site/raymaslanka/home/ICON.jpg?attachauth=ANoY7conMrxe3vubOApA3QL0VU9SYLkYZtEkqh2ExwWnV6g0eaeFPbp6lJosaNIBEdSXktxz2Dk45_OEay9KxHSy55uLsXtijrqDYMwWLd9KDTvviKqzl8_PUjCRkQtwQ3JJotpbPC4RQNQEBuTQBE4R6Y0UQWPxf9UnyCfMAy3eVnBfsSrNKYrfqy6ZznWZSK3jdPI0Qw3xIxIb0Lsh_x4WJ-PWfTa4RQ%3D%3D&attredirects=0

FQDN vs IP ?:

When setting up the integration, I would suggest using the FQDN of your UCCX / Finesse server. I had issues attempting to use the IP address of the server for some reason.  Your results may vary. 

My working Redirect URI looks like: https://sc-uccx01.my-demo-domain.com:8445/3rdpartygadget/files/SparkTeamAnnouncements/oauth.html

This did not work for me for some reason: https://172.22.115.50:8445/3rdpartygadget/files/SparkTeamAnnouncements/oauth.html

This needs to be accessible by your Finesse users, not just Finesse via a relative link you may have used elsewhere. You can verify you have the URL correct by just accessing it trough your browser and should expect to be returned this:

Editing your integration:

If you need to change your integration's Redirect URI at https://developer.ciscospark.com note the OAuth Authorization URL will be changed as well.  Changing this:

changes this as well:

So...  when you change your Redirect URI on Cisco's site, you will need to update your oauth.html with the new Redirect URI, AND ALSO your SparkTeamAnnouncements.js with the new OAuth Authorization URL.

User experience:

When it is all done and working a Finesse user should expect a new page or tab to pop after entering their normal Finesse credentials.  This will prompt them to log into Spark.  Note, you CAN log into Spark with an account different than your Finesse domain.  You'll also be challenged to allow the new integration access to some Spark features.

Oh look... my icon is missing

If that is successful, the new tab will close and you'll have access to Spark wherever you placed it in Finesse.

Fun.