Question


Cisco Systems Inc
US
Last activity: 9 Dec 2020 15:39 EST
Initiate Pega Chatbot through button
Hi, I have a requirement that we have to initiate a chatbot on clicking a button. The script that Pega provided it creates a chat icon at the button of the page and business does not want this. How we will configure or what is needed to configure so that we can have a button and chatbot can be initiated from that button.
-
Likes (1)
Sanjay Alladi -
Share this page Facebook Twitter LinkedIn Email Copying... Copied!


Cisco
US
Here is our business case:
- Business wants to launch the pega self service advisor from a repeating grid.
- We need to pass a parameter from the row to Pega self service advisor and launch the advisors Q&A based on parameter.
- We are good with configuring all the Q&A workflows and we can run them standalone from the portal level invocation ( from online help icon). But we do not want to have the chat icon at the portal level. we want to have the trigger of launching from the repeating grid ( something like search results ).
we tried the below options but none of those solve our issue:
Option 1: There is a post by Amit in community. https://collaborate.pega.com/question/initiate-pegachat-through-hyperlink
we tried to create a control to have the chat snippet. Chat gadget is getting launched but looks like this is only for the live agents based on the chat queues we configured in the Chat Servers. How do we launch the Chatbot with the configuration to driver the Q & A ? Is it applicable at all in this scenario?
Option 2: InvokeAdvisor ()
Here is our business case:
- Business wants to launch the pega self service advisor from a repeating grid.
- We need to pass a parameter from the row to Pega self service advisor and launch the advisors Q&A based on parameter.
- We are good with configuring all the Q&A workflows and we can run them standalone from the portal level invocation ( from online help icon). But we do not want to have the chat icon at the portal level. we want to have the trigger of launching from the repeating grid ( something like search results ).
we tried the below options but none of those solve our issue:
Option 1: There is a post by Amit in community. https://collaborate.pega.com/question/initiate-pegachat-through-hyperlink
we tried to create a control to have the chat snippet. Chat gadget is getting launched but looks like this is only for the live agents based on the chat queues we configured in the Chat Servers. How do we launch the Chatbot with the configuration to driver the Q & A ? Is it applicable at all in this scenario?
Option 2: InvokeAdvisor ()
We tried to trigger invokeAdvisor function from a button click. All the PegaHelper.js, PegaHelperExtension.js and Mashup.js are accessible. But it is giving an error “Errors:.HelpConfiguration: Unable to load data page D_OnlineHelpConfig. Required parameters : HelpConfigName. cannot be blank”. We are not able to understand the execution path and how this data page is getting populated.


Pegasystems Inc.
US
Hi, thanks for posting the business use case. Option 1 post is 3 years old and does not apply to the new mashup based chat.
So, option 2 is what you will need to do. The guidance here is based on the assumption that the steps described in this article https://community.pega.com/knowledgebase/articles/pega-customer-service/84/creating-self-service-application are completed. The Chatbot is downloaded from the Self-Service Configuration portal and deployed on a webserver. The download will contain two JS files. One is PegaHelper and other is PegaHelperExtension. When you download the package, the PegaHelper file will be populated with the correct values in the PegaChatConfig object. This is required and if removed, can result in the error you saw above. So, our advice is that you should not touch the PegaHelper.JS file.
Now, to meet your use case:
1) You can just hide the default launcher in CSS by adding display:none to the #launcherminimized and #launcher IDs. One thing to consider here is what happens if the user minimizes the chatbot while using it. Typically, the launcherminimized div is the one that's shown at that time and just restores the chatbot on click. So, you may not want to hide that one.
Hi, thanks for posting the business use case. Option 1 post is 3 years old and does not apply to the new mashup based chat.
So, option 2 is what you will need to do. The guidance here is based on the assumption that the steps described in this article https://community.pega.com/knowledgebase/articles/pega-customer-service/84/creating-self-service-application are completed. The Chatbot is downloaded from the Self-Service Configuration portal and deployed on a webserver. The download will contain two JS files. One is PegaHelper and other is PegaHelperExtension. When you download the package, the PegaHelper file will be populated with the correct values in the PegaChatConfig object. This is required and if removed, can result in the error you saw above. So, our advice is that you should not touch the PegaHelper.JS file.
Now, to meet your use case:
1) You can just hide the default launcher in CSS by adding display:none to the #launcherminimized and #launcher IDs. One thing to consider here is what happens if the user minimizes the chatbot while using it. Typically, the launcherminimized div is the one that's shown at that time and just restores the chatbot on click. So, you may not want to hide that one.
2) To start the chatbot session, you can issue the InvokeAdvisor function. As long as the PegaChatConfig object is intact, this should work to invoke the bot.
3) To pass in custom parameters to the bot, update the preparePegaAParams function in the PegaHelperExtension and add whatever properties you want. For example: pegaAParamObj.RowName = "Foo"; This value WILL get passed to the Chatbot automatically. There is some additional work required on the Chatbot application side to actually do something with this. See the article here https://community.pega.com/knowledgebase/articles/configuring-chat-pega-customer-service/passing-custom-data-chatbot.


Cisco
US
Hello Amit,
Thank you for your response.
Yes, the steps described in this article https://community.pega.com/knowledgebase/articles/pega-customer-service/84/creating-self-service-application are completed.
The Chatbot is downloaded from the Self-Service Configuration portal and deployed on a webserver. we verified the pegahelper.js and the pegaChatConfig object is exist.
var PegaChatConfig = { "ChannelId": "bot543b7101b9104500a505bdb...", "PegaSSAHelpButtonText": "", "PegaApplicationName": "ChatApp", "PegaServerURL": "https://..../PRChat", "SSAWorkClass": "Work-Channel-Chat", "ProactiveChatClass": "PegaCA-Work-ProactiveChat", "CobrowseToken": "Please enter CobrowseToken", "CoBrowseServerHostURL": "Please enter CobrowseServerURL" };
From your earlier response,
1) You can just hide the default launcher in CSS by adding display:none to the #launcherminimized and #launcher IDs.
Hello Amit,
Thank you for your response.
Yes, the steps described in this article https://community.pega.com/knowledgebase/articles/pega-customer-service/84/creating-self-service-application are completed.
The Chatbot is downloaded from the Self-Service Configuration portal and deployed on a webserver. we verified the pegahelper.js and the pegaChatConfig object is exist.
var PegaChatConfig = { "ChannelId": "bot543b7101b9104500a505bdb...", "PegaSSAHelpButtonText": "", "PegaApplicationName": "ChatApp", "PegaServerURL": "https://..../PRChat", "SSAWorkClass": "Work-Channel-Chat", "ProactiveChatClass": "PegaCA-Work-ProactiveChat", "CobrowseToken": "Please enter CobrowseToken", "CoBrowseServerHostURL": "Please enter CobrowseServerURL" };
From your earlier response,
1) You can just hide the default launcher in CSS by adding display:none to the #launcherminimized and #launcher IDs.
- are you talking about any specific CSS file? I assume that we need to hide the launcher on load of the harness.We can hide this but the launcher is not getting loaded in the first place on click of my button.
2) To start the chatbot session, you can issue the InvokeAdvisor function. As long as the PegaChatConfig object is intact, this should work to invoke the bot.
- we tried different approaches to get the pegahelper.js and pegahelperextension.js files accessible to the harness.
- One approach, we added the script in the user form like below
- second approach is to create these files as text files, copy the content into these text files and added these files part of Harness Scripts.
- tried to run the script 'InvokeAdvisor' on a button click but not launching the gadget.
- we observed an error in the console output.
- Not sure what we are missing here.
3) To pass in custom parameters to the bot, update the preparePegaAParams function in the PegaHelperExtension and add whatever properties you want.
- We want to pass the parameters from the values of properties we show in the harness which are dynamic; not static values.
- We feel that preparePegaParams gets called from pegahelper.js. InvokeAdvisor is not configured with any parameters. preparePegaParams sets either a static value or a value from cookie.
- is setting up cookie only way to pass the dynamic parameter values to chatbot?
Just want to put all the information together so that you can get better insight. Please let us know if you need any other info. Thank you and appreciate your help.


IN
IN
In the current PegaHelper.js the scripts are getting loaded on window load. We want it load on a button click. Our scenario is in external website there will be a button on click of which a panel with 3 options will come up and one of that will have "Chat Now". So we don't want the PegaHelper to load on window.load.
I tried commenting out $(document).ready(function() {} in PegaHelper, so on click of Chat Now the InvokeAdvisor is getting called and chat window is opened but the minimize option doesn't work. What should be an good approach to implement our above scenario.


Pegasystems Inc.
US
Hi Sanjay, Pega Chat is not supported inside a Pega harness. it is designed to be run as mashup in a normal website. When you run it within a Pega harness, it will conflict with the session that harness in terms of session, work harnesses and possibly other scripts. In order to run in a harness like this, it could not run in Mashup mode and require a good amount of refactor. It is not possible OOTB.
-
Shiva Rakshith S