Webchat widget v2 - custom fields

[nikosLapo]

Hello. I would like to ask a question. I would like to add custom fields to the widget. The widget will have 4 fields (First Name, Last Name, Email and Custom). After reading the documentation, I believe that the correct way to do it is by setting the fields like below

function getAdvancedConfig() {
return {
formJSON: {
wrapper: '

',
inputs: [
// Default fields
{
id: 'cx_webchat_form_firstname',
name: 'firstname',
maxlength: '100',
placeholder: 'Required',
label: 'First Name'
},
{
id: 'cx_webchat_form_lastname',
name: 'lastname',
maxlength: '100',
placeholder: 'Required',
label: 'Last Name'
},
{
id: 'cx_webchat_form_email',
name: 'email',
maxlength: '100',
placeholder: 'Optional',
label: 'Email'
},
// Custom Fields
{
id: 'custom_field_1',
name: 'customField1',
maxlength: '100',
placeholder: 'Custom Data',
label: 'Custom Field 1',
}
]
}
};
}

• How will this information look from the side of the agent? Will there be an extra field for the custom field?
• In my case, I would like the labels and placeholders to be translated to a specific language. Can I use the '@i18n:webchat.ChatFormPlaceHolderXXX' and '@i18n:webchat.ChatFormXXX'? Let's say that I want to set the language to Spanish how can I do that?
• For the custom field how can I set the label and placeholder in the desired language?
• For the field validations (if it is required), what check takes place by default?
• For email and last name fields, I want email to be required and and last name to be optional. How can I do that change?

[Jerome.Saint-Marc]

Hello,

How will this information look from the side of the agent? Will there be an extra field for the custom field?

You can check this other post on the same topic: https://developer.mypurecloud.com/forum/t/webchat-widget-v2-subject-and-custom-attributes/9567/2
You will have to send "customField1Label" so that it displays a label with the corresponding value in the Interaction Details tab.
As your label will be static, you can set this in the userData structure in your widgets configuration: https://developer.mypurecloud.com/api/webchat/widget-version2.html#create_a_widget_configuration_object

You can also check this blog - which describes how to leverage collected chat information in an Architect flow, in the Interaction Details tab and in a Script: https://developer.mypurecloud.com/blog/2021-03-08-accessing-collected-chat-v2-information/

In my case, I would like the labels and placeholders to be translated to a specific language. Can I use the '@i18n:webchat.ChatFormPlaceHolderXXX' and '@i18n:webchat.ChatFormXXX'? Let's say that I want to set the language to Spanish how can I do that? For the custom field how can I set the label and placeholder in the desired language?

Yes, you can. It didn't use to be possible in the past but I have just done a quick check and it seems to be possible now.

You can just add these new entries (ChatFormPlaceHolderXXX and ChatFormXXX) in your language file (under "es" - in "webchat" structure).
See here for a similar post on the language files: https://developer.mypurecloud.com/forum/t/widget-localization-customer-defined-strings/7823/2
And this one to set language to spanish: https://developer.mypurecloud.de/forum/t/change-language-widget-v2-to-spanish/7833/2

English is pre-built in the widgets.
For other languages, you can either point to a language specific file (hosted by us - if you don't do any changes).
If you perform a change (modifying a label, or adding some like in your case), you would have to download the language specific file, make your changes, and upload this file somewehere so that you can direct/point to it in your widgets configuration.

For spanish, the widgets language file is here: https://apps.mypurecloud.com/widgets/9.0/i18n/widgets-es.i18n.json

For information on localization, you can also have a look at this page in Widgets document: https://all.docs.genesys.com/WID/Current/GCDeveloper/Localization

If you plan to support multiple languages in your widgets, download the different language specific files, combine them into a single file, and upload this file somewehere so that you can direct/point to it in your widgets configuration.
You can then set the language via the window._genesys.widgets.main.lang attribute in the widgets configuration, as I had described it in this post: https://developer.mypurecloud.de/forum/t/change-language-widget-v2-to-spanish/7833/2

Or you can invoke the App.setLanguage command before the WebChat registration form is opened.
See this post: https://developer.mypurecloud.com/forum/t/widget-v2-widgets-core-can-not-change-the-language-after-the-widget-v2-has-been-loaded/9604/6
Or the Widgets document on App.setLanguage command: https://all.docs.genesys.com/WID/Current/GCAPI/App#setLanguage

For the field validations (if it is required), what check takes place by default? For email and last name fields, I want email to be required and and last name to be optional. How can I do that change?

In the custom chat registration form, there is no check by default.
You can define a validate function in your custom fields (email, lastname, ...).

The validate function is invoked based on the value of the validateWhileTyping attribute.
If validateWhileTyping is false, the validate function will only be invoked when the customer pushes the Start Chat.
If validateWhileTyping is true, the validate function will be invoked every time the value of the field/input is changed.
If you return true in the validate function, it means - ok
If you return false in the validate function, it means - not ok

See here for some info on validate: https://all.docs.genesys.com/WID/Current/GCAPI/WebChat#Customizable_chat_registration_form

You can also check these 2 posts - on similar topic:
Here: https://developer.mypurecloud.com/forum/t/webchat-widget-customizing/7626/14
And here: https://developer.mypurecloud.com/forum/t/validate-pre-chat-form/9644/2

Regards,

[nikosLapo]

I tried to use validateWhileTyping but nothing happens. My custom form looks like this

inputs: [
{
id: 'cx_webchat_form_firstname',
name: 'firstname',
maxlength: '100',
placeholder: '@i18n:webchat.ChatFormPlaceholderFirstName',
label: '@i18n:webchat.ChatFormFirstName',
validateWhileTyping: false,
validate: function (event, form, input, label, , CXBus, Common) { return input && input.val(); } }, { id: 'cx_webchat_form_lastname', name: 'lastname', maxlength: '100', placeholder: 'Optional', label: '@i18n:webchat.ChatFormLastName', validateWhileTyping: false, validate: function (event, form, input, label, , CXBus, Common) {
return true;
}
},
{
id: 'cx_webchat_form_email',
name: 'email',
maxlength: '100',
placeholder: 'Required',
label: '@i18n:webchat.ChatFormEmail',
validateWhileTyping: false,
validate: function (event, form, input, label, , CXBus, Common) { return input && input.val(); } }, { id: 'cx_webchat_form_custom', name: 'custom', maxlength: '100', placeholder: 'Optional', label: 'Custom', validateWhileTyping: false, validate: function (event, form, input, label, , CXBus, Common) {
return true;
}
},
]

[Jerome.Saint-Marc]

Hello,

My mistake. I got confused with validate and validateWhileTyping behavior - forgot about it.

If you have validateWhileTyping set to false, the validate function will be triggered every time the input field loses focus (my mistake - it is not when start chat is pushed - but every time the input field loses focus)

If you have validateWhileTyping set to true, the validate function will be triggered every time there is a keypress in the input field (ex: triggered on each character added in the input field).
There is possibly an error in the doc or in the widgets. If validateWhileTyping attribute is not present, it will default to true.

Regarding your custom form:

As you are not doing anything in lastname and in custom fields (I mean always sending true), you can just remove the validate and validateWhileTyping there.

I assume that what you were trying to do in firstname and email was to detect an empty value.
You validate function is not correct.
You can use something like this:

if (input && input.val() && (input.val()).length >= 1) {
    return true;
} else {
    return false;
}

If you use this in your validate function, with validateWhileTyping set to false, the following will happen:
If your input field loses focus (and the value is empty - i.e. validate function returning false), the rectangle line will be highlighted in red.
And you won't be able to start the chat.

Regards,