Finesse Toaster Notification API to show Web Notification

[momeraj]

Finesse Toaster Notification is another coolest feature provided by Finesse. Finesse Toaster notification is used by Call Control and Chat gadget to alert/prompt the agent to bring into notice that there is an incoming call/chat. Toaster is displayed on top of all the application windows even browser is minimized or user is in other than Finesse browser tab. Once user clicks on toaster, Finesse Browser tab get activated.

Finesse Toaster Notification API is a handy wrapper for using the Web Notifications API. Finesse Toaster Notification aims to simplify requesting user permission and associated Web Notification API events, as well as providing a few extra callbacks and convenience methods.

Finesse Toaster Notification API also leverage Page Visibility API to detect if User is already in Finesse tab or not. If User is already working on Finesse Tab, Toaster Notification will not be triggered(this is configurable).

Finesse Toaster Notification api is part of Finesse Java Script Library. So any gadget can leverage this api to implement Toaster Notification.

Sample Code:

//Instantiate FinesseToaster

var FinesseToaster = finesse.containerservices.FinesseToaster, toasterTitle, toasterBody;

            toasterTitle = ‘Toaster Title’;

            toasterBody = 'Toaster Message';

            FinesseToaster.showToaster(toasterTitle, {

                  body : toasterBody,

                  icon : FinesseToaster.TOASTER_DEFAULT_ICONS.INCOMING_CALL_ICON, //icon url

                  showWhenVisible: false, //do you want to see the notification if finesse desktop is active

                  tag: 'IncomingCall', //any unique name

                  onclick:onClickHandler // callback method on click of toaster

            });

For detail about Web Notification API: https://developer.mozilla.org/en/docs/Web/API/notification

For detail Finesse Toaster Notification API : https://developer.cisco.com/site/finesse/docs/guides/javascript-library/

Page Visibility API : https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

[Steven McGoff]

Can this code be implemented in UCCX 11.0(1) for when a call arrives?

[momeraj]

No, this feature is only available with 11.5 Finesse JavaScript Library. But you can use native HTML5 Notification api to show toaster.

Notification - Web APIs | MDN

[Sheena S]

Can we modify the audio sound that plays for the toaster notification?

[momeraj]

As per html5 notification api specification Notification.sound - Web APIs | MDN.

it is possible, But currently none of the browser support to change the sound of HTML5 Notification.

So, currently not possible.

[Sheena S]

Thanks for the confirmation, Mohammed. Saw it as well, I guess from the browser perspective nothing can be done at this moment. As I'm aware it's also not available in UCCX admin portal currently.

[Kamil G]

 I saw that it't not supported in IE, is that still true?

We want to use it for Service Desk Agents... 

I would like to test and see if we can get a toaster notification to support IT Service Desk. Currently we are trying to make agents aware of handle times when they reach 15 minutes so the agent can assess if they can help or should begin to transition to Tier 3.

Can we create a test in the lab and see what that would look like? We would only want it specific to CSQ’s IT Smartcard, IT Tier 1 and IT Tier 1.5.

Thanks,

Kamil

[momeraj]

Kamil, Toaster notification (HTML5 Notification API) is still not supported for IE. But supported in MS Edge browser. If you have finesse gadgets and using finesse javascript library then you can use the toaster notification for the case you mentioned.

Sorry, I dont have access to any lab, so I can not create a test app for that.

[Zapparoli]

Dear,

I work with UCCE several years but I'm new in the development skills. Is there any example how to create a simple toaster who brings a value of Peripheral variable 1 in UCCE 11.5?

Which tools should I have to start to deploying the code below and "upload" it to Finesse server.

//Instantiate FinesseToaster

var FinesseToaster = finesse.containerservices.FinesseToaster, toasterTitle, toasterBody;

            toasterTitle = ‘Toaster Title’;

            toasterBody = 'Toaster Message';

            FinesseToaster.showToaster(toasterTitle, {

                  body : toasterBody,

                  icon : FinesseToaster.TOASTER_DEFAULT_ICONS.INCOMING_CALL_ICON, //icon url

                  showWhenVisible: false, //do you want to see the notification if finesse desktop is active

                  tag: 'IncomingCall', //any unique name

                  onclick:onClickHandler // callback method on click of toaster

            });

[carguello506]

Hi, Can I use this on Finesse 12?

[Artemio Magdiel Pantoja Palomares]

Hello,

I´m looking for any example of a Toaster notification gadget to show call variables information when a call is coming.

Have any one made this to work?

Do you know if it is possible to edit the default toaster notification gadget that shows the "Incoming call from XXXXXX" message?

[rikardkrvaric]

@momeraj Does this still work now in UCCX 12.5?

Or do you know if anything has changed?