Web Chat Drop Down

[warrenbeddie]

Hi,
https://all.docs.genesys.com/WID/Current/SDK/WebChat-combined#commands
talks a little about using drop down, but the information is very vague, would you have a better example to use, thanks, kind regards

[Jerome.Saint-Marc]

Hello,

You can define a custom registration form, that has a drop-down (select) with something like this:

var iCustomChatRegistrationForm = {
    wrapper: "<table></table>",
    inputs: [
        {
            id: "cx_webchat_form_firstname",
            name: "firstname",
            maxlength: "100",
            placeholder: "@i18n:webchat.ChatFormPlaceholderFirstName",
            label: "@i18n:webchat.ChatFormFirstName"
        },
        {
            id: "cx_webchat_form_lastname",
            name: "lastname",
            maxlength: "100",
            placeholder: "@i18n:webchat.ChatFormPlaceholderLastName",
            label: "@i18n:webchat.ChatFormLastName"
        },
        {
            id: "cx_webchat_form_email",
            name: "email",
            maxlength: "100",
            placeholder: "@i18n:webchat.ChatFormPlaceholderEmail",
            label: "@i18n:webchat.ChatFormEmail"
        },
        {
            id: "cx_webchat_form_subject",
            name: "subject",
            maxlength: "100",
            placeholder: "@i18n:webchat.ChatFormPlaceholderSubject",
            label: "@i18n:webchat.ChatFormSubject"
        },
        {
            id: "cx_webchat_form_customselect",
            name: "customselect",
            placeholder: "Required",
            label: "Custom Select",
            type: "select",
            options: [
                {
                    disabled: "disabled",
                    selected: "selected",
                    hidden: "hidden"
                },
                {
                    text: "Text 1",
                    value: "value1"
                },
                {
                    text: "Text 2",
                    value: "value2"
                }
            ],
            wrapper: "<tr><th>{label}</th><td>{input}</td></tr>"
        },
    ]
};

You can either set the custom registration form in the configuration as window._genesys.widgets.webchat.form

Or pass it as formJSON input parameter of the WebChat.open command.

CXBus.command('WebChat.open', { formJSON: iCustomChatRegistrationForm }).done(function (e) {
    // WebChat opened successfully
}).fail(function (e) {
    // WebChat isn't opened
});

Also note the first element I included in the array: “{ disabled : “disabled”, selected : “selected”, hidden: “hidden” }“.
I wanted to have an empty value displayed by default, but without showing it as a possible choice when opening the drop-down list.

When the chat is created, the selected value (value of the selected option) will be sent as "customselect" (attribute name). And will therefore be available in the PureCloud conversation context, in the customer participant attributes, as "context.customselect"

Regards,

[warrenbeddie]

Thanks Jerome this is perfect. Kind Regards