Product Enhancement - Pre Chat Answers need to refer clipboard pages when the chat is invoked
Business Requirement : -
Chat would be plugged into a Pega Harness . We have various fields on the UI where the user would be entering the details . We need to retrieve the values from these fields and populate the pre-chat answers .Based on these pre-chat answers we have customized the interaction case to show various information for the CSR .
Please note the chat is enabled in a different pega application than the CSA application .
Implementation :-
We are using the inline chat mode by plugging in the java script code provided to us .The chat icon is loaded on the bottom right hand side of the pega screen .We are using Pega JSP tags to read the values from the clipboard and populate the pre-chat answers within the java script code .
Challenge :-
Since the script gets loaded only once, it doesnt take the latest changes to the fields on the UI there by populating the stale data into pre-chat answers . We need a way to populate the pre-chat answers only when the chat is invoked so that we always have the latest information .
Note :- Please refer to the SR provided for more details .
Pegasystems Inc.
US
Here's one way :
Hide the OOTB chat launcher using CSS
Display your launcher with a callback to a JS function
In this JS function, get all the properties you want and place into a JSON object. Use fireflyChatAPI.startChatSession( <JSON object>).
Here's one way :
Hide the OOTB chat launcher using CSS
Display your launcher with a callback to a JS function
In this JS function, get all the properties you want and place into a JSON object. Use fireflyChatAPI.startChatSession( <JSON object>).
JSON object format is something like {"preChatAnswers": {"username":"John Doe","age":"35","address":"123 main st"}, "queue": "TheAppropriateQueue"}
JP Morgan Chase
IN
Hi Amit ,
We tried that approach as well ..If we go with the custom launcher approach we need to hide the "pega container" div on load of the screen and then use "StartChatsession" method to launch the chat .Problem with this approach is that we have this chat in a flow which means the chat once invoked needs to be available when we move from screen to screen .Since on load we are hiding the div we need to handle the logic to not hide it when it moves screen by screen .
Also if we have a custom launch button
We need to match the look at feel of the Pega chat icon to handle the minimize functionality of chat .
We need to hide the Pega default chat icon when we close the chat .
We have to do all these which Pega OOTB is doing it , its just that we dont have a handle to pass the latest data .We want to minimize the amount of customization needed .Please let us know if we are on the right track.
Thanks
Dinesh
Pegasystems Inc.
US
Why do you need to hide the whole "pega container" div ? I was just saying to do something like ".chatLauncher {display: none;}" This just hides the launcher button. You can add your own button and place it somewhere on the page and have it call startChatSession. This way, you don't have to style any of the other components or worry about their functionality.
thanks
JP Morgan Chase
IN
Hi Amit ,
I did the same .Below are the steps
1)Hide the chat launcher button using the below script .
$( window ).on( "load", function() {$('.chatLauncher').hide();});
2) Have a button on the UI to call a function to launch the chat
function InitChat(prechatval)
{
if(fireflyChatAPI.isLoaded == true)
{
fireflyChatAPI.chatHub.createChatSession(null, {metadata:fireflyChatAPI.preChatAnswers});
}
}
When i minimize the chat , the "chatlauncher" gets hidden because of step 1 .
Let me know if we want to set up a meeting so that we can close on this .