Hello,
I had published a sample with select in this other post: https://developer.mypurecloud.com/forum/t/web-chat-drop-down/8084/2
You may also find some info (not on select but on WebChat widgets) in these other posts:
https://developer.mypurecloud.com/forum/t/webchat-widget-customizing/7626/5
https://developer.mypurecloud.com/forum/t/auto-submit-form-after-sidebar-button-click/9118
Regarding the code you have added above, the issue for the select input field comes from the value of your wrapper attribute.
Use this instead:
"wrapper": "<tr><th>{label}</th><td>{input}</td></tr>"
There is also another thing which is not correct - the way you pre-fill some information in the WebChat Custom Registration Form.
There are different ways to open a webchat registration form (via code/custom button, via the native chatButton in WebChat - see in the other posts i mentioned above, via sidebar/channel selector).
And there are also several approaches to prefill data in the chat registration form (using WebChat.open command parameters as you are doing, or using the before command).
In the case of the WebChat.open command parameters (what you are using in your code), the "form" structure is meant for the fields from the default chat registration form (firstname, lastname, subject, email and autoSubmit).
What you could do is to put the desired value directly in the formJSON structure.
If you want to set a "default" value for an input text field, you can use "value" attribute.
If you want to select a "default" value for an option in a select, add "selected": "selected" for that option.
With your code, it should look like this (I didn't test it but it should be correct):
I have also removed some of the keynames which are under the userData structure. If you are not planning to send a value for these, it is not necessary to include them in the list.
<script>
window._genesys = {
"widgets": {
"webchat": {
"transport": {
"type": "purecloud-v2-sockets",
"dataURL": "https://api.euw2.pure.cloud",
"deploymentKey": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
"orgGuid": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
"interactionData": {
"routing": {
"targetType": "QUEUE",
"targetAddress": "Chat",
"priority": 0
}
}
},
"userData": {
"customField1Label": "Custom PostCode",
"customField2Label": "Custom Reason"
}
}
}
};
function getAdvancedConfig() {
return {
"formJSON": {
"wrapper": "<table></table>",
"inputs": [
{
"id": "cx_webchat_form_firstname",
"name": "firstname",
"maxlength": "100",
"placeholder": "Required",
"label": "Name",
"value": "john"
},
{
"id": "custom_field_1",
"name": "customField1",
"maxlength": "100",
"placeholder": " ",
"label": "PostCode",
"value": "TW1 1AA"
},
{
"id": "custom_field_2",
"name": "customField2",
"maxlength": "100",
"placeholder": "1st reason",
"type": "select",
"label": "Reason",
"options": [
{"text": "reason1","value": "reason1"},
{"text": "reason2","value": "reason2","selected": "selected"}
],
"wrapper": "<tr><th>{label}</th><td>{input}</td></tr>"
}
]
}
};
}
const customPlugin = CXBus.registerPlugin('Custom');
</script>
Hope this helps.
Regards,