We have referred to the attached document and used the standard field but the user input in the webchat form is not getting displayed under interaction details on Purecloud for Agents.
However we used widget version 1.0 and we were able to get the field displayed on the Purecloud under interaction details attached is the screenshot for reference.
Hello,
A first comment regarding your formJSON configuration (on widgets side).
What is important in the definition of a form input is the value of your "name" attribute.
I mean in your case:
{
"id": "custom_field_1",
"name": "Policy"
...
}
It means that in the chat session, this will be sent as a parameter with an attribute name "Policy" and the value that the customer entered in the Registration Form.
This will then be available in the PureCloud Conversation, within the "attributes" of the participant structure corresponding to the customer (as "context.Policy").
Lucie was recommending to use a Script to display such fields - https://help.mypurecloud.com/articles/about-scripting/
It provides more flexibility in terms of what you want to display and how you want to display information about the chat convresation (format/font/color).
The Interaction Details panel had been implemented for widgets v1 specifically.
The Script approach is not really complex.
You would need to create a Script (PureCloud Admin - Contact Center - Scripts).
The Script can be linked to conversations in different manner. But one easy way is to define it at the Queue level, in the Chat tab, in the "Default Script" (you can do this after you have created and published a Script - as explained below).
When you create a new Script, you can use the "Default Inbound Script" to help you start quickly.
When you get to the Script editor (for that new script), you would then have to select "Script Properties" (under the Script Menu) and enable the Chat Feature (toggle on).
Then, in Variables, create variables of type String, with a Name that corresponds to the parameter names you want to display (the ones you had set in your formJSON).
In your example, the variable name would be "Policy".
You must also set the Input toggle to On (that means that the Script will try to read a participant's attribute of name "Policy" from the incoming/inbound chat conversation).
You can then add Text objects and place them in your Script to display the value.
In "Insert Variables" (under the Text object properties), you will be able to select the variable you created (Policy).
It will then display: {{Policy}} [which means that the text object will display the value of the Policy variable]
There are also some Script built-in variables for Chat. When you add a Text object, in Insert Variables, you will identify them as the ones starting with "Chat.xxxx".
Once you are done, Save your script and Publish it.
You will then be able to link to the Queue as I mentioned above.
Hope this will help.
Hello @Jerome.Saint-Marc,
Thank you for your explanations above.
My scenario :
If the email is empty I would like to disable the checkbox input to not let customers toggle it. If the email is given,the customers can now be able to check the checkbox.
I am trying to validate and check if the checkbox input is checked but I couldn't succeed.
Using console.log(input)
I can see a field named checked but I can't make if statement of it in my code.
Any ideas please ?
Regards,
CHARAF
Hello,
I am not sure it is a good idea to do this...
But if you want to go that path, I think you would need to manage this in the validate function of your email field/input.
If you set validateWhileTyping to false, the validate function is triggered when you click "Start Chat".
If you set validateWhileTyping to true, the validate function is triggered as soon as the value of the field/input is changed.
So on your email field/input, you could set validateWhileTyping to true and check the email format (if this is something you are already doing) AND add something to enable/disable your checkbox input (and reset to unchecked value).
You would have to use jQuery to reference/access the checkbox input (via id) from the email validate function. That's why I was saying it is possibly not a good idea (as the validate function of your email input would have to reference this specific id).
I think the $ in the validate function is a reference to internal jQuery - so you should not need to load jquery library again in your html.
If I remember correctly:
to check if a checkbox input is checked, you can use: $('#yourId').is(':checked')
and to set a checkbox input, you can use: $('#yourId').prop('checked', true or false)
It works as expected
Thank you @Jerome.Saint-Marc 
In the validation section of the email, I can disable or not my checkbox.
I have one last question about the input chekbox label, how can I apply some CSS to only the label ? change the font-size for example ?
Regards,
CHARAf
I think I figured it out.
I have used a div inside the label and add some CSS properties and it works.
something like this:
label: '<div style="font-weight:400;"> test label text </div>'
Many thanks to you Jerome.
Really appreciate your help
Regards,
CHARAF
I noticed when I added the statements in the email validation function, it made the email mandatory to start a chat.
Do you have an idea how to make email field not required for chat but if you put an email I disable the checkbox ?
Thank you again ?
Just always return true in your email validate function.
true means that everything is ok and that an error/alert will not be raised when trying to start the chat.
It works
I noticed also that when the checkbox reappears again, even if I delete and make the email field empty, the checkbox remains visible.
for some reason a customer start typing his email, and then erase it. Once the checkbox is visible, it can't go back to disable mode ...
Any clue Jerome ?
Regards,
CHARAF
should I add a validation function to the checbox to verify if the checkox is toggled and the email field is empty, do not start the chat ?
The more I think about it, the less I think it is a good idea to try to do this.
Reason 1 - on show/hide
If you hide the checkbox, it will not hide the label. So not really great.
To show or hide using jQuery: $("#yourId").hide(); or $("#yourId").show();
You could possibly disable the checkbox instead (although I still think it is not a good idea - more details in Reason 2 below).
To enable/disable the checkbox: $("#yourId").prop("disabled", false); or $("#yourId").prop("disabled", true);
Reason 2:
The main issue I think is with the initial value/state.
Problem 1: when you open the chat, this will trigger the validate function. But at this stage, most of the parameters are undefined. So using $ will cause an error. Or trying to know the content of the input will fail as input is also undefined at this stage.
At the beginning of your validate function, you could test $ or input and if $ === undefined, it means it is called just after the chat has been opened. But you can't leverage the internal jQuery - the $ validate function parameter - as it is undefined at this stage. So you would have to return true or false immediately.
And that's Problem 2:
Depending on what you plan to do with the Open Chat now and in future - I mean if you will always open the chat with empty input values. Or if in the future you plan to pre-fill the input values (with some info gathered from the user account/web site).
So if you plan to support both scenarios, at first call of the validate function, you don't have a way to know if you need to have the checkbox hidden or disabled (email input empty) or if you need to have the checkbox shown or enabled (pre-fill of email input).
To manage these 2 scenario (the case right after WebChat is opened - to be able to test the value of email and know if you need to show/hide the checkbox or enable/disable it), I think you would need:
- to load/reference jQuery library also in your html
- to subscribe to WebChat.opened event (using CXBus.subscribe("WebChat.opened", function (e) {...})
- to verify the value of your email input using jQuery, and then depending on it manage the checkbox input with show/hide or disabled(true or false)
Thank you for your analysis and recommendations
it's very clear
regards,
Hello @Jerome.Saint-Marc,
I have 2 questions about widget customizations:
What is the purpose of having the message Today at the top of the conversation ? Any reason behind it ?
Would it be possible to change the workflow icon ?
Many thanks,
Regards,
CHARAF
Hello,
I don't know. Possibly initially meant for scenario using asynchronous chat (on PureEngage) - when messages are exchanged between the customer and the agent across days.
If you mean the robot icon, I don't think so.
Thank you for the quick feedback.
Asynchronous chat is available on PureCloud ?
Thank you,
Regards,
No - Async Chat is not available at this time with PureCloud.
I mentioned PureEngage/Genesys Engage (another platform we have).
Pretty clear Jerome
Thank you,
Regards,
CHARAF
This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.
