WebChat Mutiple Checkboxes help

[sureshu]

Hi,
Can someone help me to build check boxes like below?

Products*:
[] Product1 [] Product2 [] Product3

If any one of them not selected then "Products*" label should be display in "Red" (Mandatory). Thanks..!!

[Ebenezer_Osei]

Just to confirm, is this a html/css question?

[sureshu]

Hi,
This is about building fields in Genesys widget. I am able to create single check box but need help on how to create multiple checkboxes and make section as mandatory.

{
"id": "cx_webchat_form_product1",
"name": "Ethicon",
"maxlength": "100",
"placeholder": "Product1",
"label": "<span style="color:red">Product1",
"value": "Product1",
"type": "checkbox",
"checked": false,
"validate": function (event, form, input, label, $, CXBus, Common) {
if (input) {
if (input.val() && input[0].checked) {
label[0].innerHTML = "Product1";
return true;
} else {
label[0].innerHTML = "<span style="color:red">Product1";
return false;
}
} else {
// first load
return true;
}
}
},

[Ebenezer_Osei]

You should find what you are looking for in this documentation: Documentation:GWC:WidgetsAPI:CustCRF:Current - Genesys Documentation

[sureshu]

Thanks Osei. How do I create just a label using special properties (JSON format).
{
id: "cx_webchat_form_firstname",
name: "firstname",
maxlength: "100",
placeholder: "@i18n:webchat.ChatFormPlaceholderFirstName",
label: "@i18n:webchat.ChatFormFirstName"
},

I am not specifying type here but it is giving default text field beside First Name. How can I create just a label with out any control inputs ?

[Jerome.Saint-Marc]

Hello,

The Customizable Chat Registration Form is meant to have a label and a form input (text, select, hidden, checkbox, textarea) on each row.
There is no configuration/setting to just have the label.

But I have tried the following. It is a bit odd approach but it seems to work.
You would have to define an entry for a label with text form input, and using the input wrapper property, hide the part which contains the text form input.
But note that when your chat is initiated, it will send a user data/participant data corresponding to this input.

Something like this:

{
    "id": "cx_webchat_form_product_label",
    "name": "EthiconLabel",
    "maxlength": "100",
    "label": "<span style=\"color:red\">Label of product</span>",
    "value": "Unused",
    "type": "text",
    "wrapper": "<tr><th>{label}</th><td hidden>{input}</td></tr>"
},

As I mention above, it means that a Key/Value pair will be sent as user data/participant data with name EthiconLabel (or context.EthiconLabel in the Genesys Cloud Conversation context - participant attributes) and with value Unused.

Regards,

[sureshu]

Thanks Jerome..!! It helped me a lot.

I have created multiple checkboxes on the widget. How can I get them displayed side by side in a row.
Currently they are displaying each product in one row.

Here is my sample code:
{
"id": "cx_webchat_form_prodcuts",
"name": "ProductLabel",
"maxlength": "100",
"label": "<span style="color:red" id="cx_webchat_form_products">Products*",
"value": "Unused",
"type": "text",
"wrapper": "{label}{input}"
},
{
"id": "cx_webchat_form_product1",
"name": "Products",
"type": "checkbox",
"label": "Product1",
"value": "Product1"
},
{
"id": "cx_webchat_form_product2",
"name": "Products",
"type": "checkbox",
"label": "Product2",
"value": "Product2"
},
{
"id": "cx_webchat_form_product3",
"name": "Products",
"type": "checkbox",
"label": "Product3",
"value": "Product3"
},
{
"id": "cx_webchat_form_product4",
"name": "Products",
"type": "checkbox",
"label": "Product4",
"value": "Product4"
},

Could you please help ? Thanks..!!

[Jerome.Saint-Marc]

Hello,

I don't think it is possible to have the different check-boxes, side by side, on the same row.
The Chat Registration form was originally meant to display a label and input form field per row.

You can try to investigate the Wrappers - form and input wrappers in case you can find some html elements which would work (i.e. be processed without errors by the Widgets libraries).
I have not been able to find something that works well - from a display/stylesheet standpoint but I don't practice pure HTML and stylesheets often.

Otherwise, you could also build your own registration form (outside of Genesys Widgets) and invoke the creation of the chat using javascript (WebChat commands - using open command).
Something like this:

CXBus.command('WebChat.open', {
 	userData: {
         yourCustomValue1: 'ABCD',
         yourCustomValue2: '1234'
     },
 	form: {
 		autoSubmit: true,
 		firstname: 'John',
 		lastname: 'Smith',
 		email: 'John@mail.com',
 		subject: 'Customer Satisfaction'
 	}
}).done(function(e){
 	// WebChat opened successfully
}).fail(function(e){
 	// WebChat isn't open or no active chat session
});

The purpose of autoSubmit set to true is that it will automatically initiate/start the chat.

As a comment on the sample code you just copied above: the "name" attribute value must be unique. It is what will be used as participant attribute name (when sent to Genesys Cloud and propagated into the conversation context).

Regards,

[sureshu]

Thanks Jerome..!! Appreciate your help..