Attempts to load the chat widget on-demand
we have a requirement to load the chat widget on-demand. this is required as user identifier is loaded asynchronously. so we need to load the chat widget only after customer data available in website.
we have modified idex.html to load the widget.
<!DOCTYPE html>
<title>Pega test page</title>
<head>
<script src='https://xxxxxxxxxxxxxxx/prweb/app/default/?pyActivity=pzIncludeMashupScripts'></script>
<script src="domWrapper.js"></script>
<script src='PegaHelperExtension.js'></script>
<script src='PegaHelper.js'></script>
<link rel="stylesheet" type="text/css" href="PegaStyles.css?nocache=20200611T145831.601GMT">
<script>
// this will not be called until the button is clicked
function loadChat() {
window.setContactId(12345)
window.chat.init()
window.chat.enable(true)
}
</script>
<style>
.content {
font-family: Arial, Helvetica, sans-serif;
max-width: 1024px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="content">
<h1>2) Load chat widget on demand - not working</h1>
<p>
This is a non-working version that attempts to load the chat widget on-demand, which is what the application
will need to do after the user identifier is loaded asynchronously.
</p>
<p><strong>Click Load chat to load the chat widget:</strong><br />
<a href="#" onclick="loadChat()">Load chat</a></p>
</div>
</body>
</html>
please suggest how can we do it.
Hi Amit_Patel,
Thanks for your quickly reply.
if we want to get the advantage of customer information into the interactions, we need to pass the context when we click on "Need Help" button. But this is not possible in the current business scenario.
So we are trying other ways to implement it and one of them is hiding the button until we got the required information. but i understood from your comments that is it not recommended from Pega to hide the button, as this can lead to different problems.
So please suggest how can we overcome the challenge in best possible way.
As a next level, we want to extend the chat parameters which will get pass from website to Pega (like Contact ID, Account number, Customer name, business ID, etc) and i understood that this can be done by modifying PegaHelperExtension.js and few rules within Pega.
my challenge here is, where can i add new data elements (property) and corresponding mappings to set the param values from preview console to interaction or chat with agent case.
thanks in advance !!
HI Jang_RSR,
If your need is to show a chat button on the click of a button, you can give a try on the below script.
<style>
#launcher{
display: none;
}
#OnlineHelp{
display: none;
}
</style>
<script>
function show_pega_chat(){
var chatbutton=document.getElementById("launcher");
if(chatbutton!=null)
{
chatbutton.style.display = "block";
}
var chatwindow=document.getElementById("OnlineHelp");
if(chatwindow!=null)
{
chatwindow.style.display = "block";
}
}
</script>
Add the above code along with your existing code. call show_pega_chat() function inside your loadchat function.
I have used CSS to hide the chat button on the load of the webpage and used JS to display that button on click.
Let us know if it worked for you. Good Luck!
Thanks duraisankar ,
Requirement is different. we need to show the chat option conditionally
any update on this ??
When using the Customer Service Chatbot, the OOTB implementation passes the customer context data dynamically. That means that at the time the customer clicks on the "Need Help" button, the customer context is evaluated at that time and passed in. If by the time the customer clicks the button and the context is not set, it will be passed as empty.
Pega suggests against hiding the button until the context is set. This can lead to potential race conditions and cause the button to not appear when it should. Also, just because a customer is not identified, it should not prevent that customer from being able to take advantage of the chat feature.
Amit