Interaction Details for Webchat

[Samuel_Polgar1]

Hello Genesys Cloud

Please are we able to customise the Interaction Details presented to an agent when they answer a webchat based on the inputs from a customer?

Using the default webchat userData as below, I do see this coming through on the interaction details.

         userData: {
        addressStreet: '64472 Brown Street',
        addressCity: 'Lindgrenmouth',
        addressPostalCode: '50163-2735',
        addressState: 'FL',
        phoneNumber: '1-916-892-2045 x293',
        phoneType: 'Cell',
        customerId: '59606',
      }

What I am looking for is the Interaction Details populated by the inputs from the customer.
When I remove the userData as above, the only two fields that populate from the customer input are Customer Name and Customer Email.

I'm using the auto-loading webchat and my form object looks like

webchat: {
userData: {},
emojis: true,
chatButton: {
    enabled: true,
    openDelay: 1000,
    effectDuration: 300,
    hideDuringInvite: true
},
form: {
    wrapper: '<table></table>',
    inputs: [
        {
        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: 'Required',
        label: 'Email',
        },
        {
        id: 'custom_field_1',
        name: 'number',
        maxlength: '10',
        placeholder: '07 or 04 number',
        label: 'Phone',
        },
        {
        id: 'cx_webchat_form_subject',
        name: 'subject',
        maxlength: '100',
        placeholder: 'Energy bill enquiry',
        label: 'Subject',
        }
],

},

[anon39326996]

This section in the docs covers the topic in detail: https://developer.mypurecloud.com/api/webchat/widget-version2.html#custom__userdata_

[Jerome.Saint-Marc]

Hello,

To complement Lucie's answer:

The Interaction Details frame will only display information coming from a specific set of attribute names/keynames.

addressStreet
addressCity
addressPostalCode
addressState
phoneNumber
phoneType
customerId
// firstName
// email

And up to 3 custom fields (label and value):

customField1Label
customField1
customField2Label
customField2
customField3Label
customField3

If you don't need to get an input from the user for one of these fields, you can send it as userData (ex: phoneNumber in your example above). Ex: when your user has signed in on your site and you could get these values from the user/customer account.

If you need the customer to enter that value (input text field), you would need to define it in the "form" object.
What matters is to use the corresponding keyname as "name" attribute of your input.
Ex:

{
id: 'my_customer_phone_number',
name: 'phoneNumber',
maxlength: '10',
placeholder: '07 or 04 number',
label: 'Phone',
},

If you need to display a custom field (and get input from the customer on that field), you would do something similar using customField1/customField2/customField3:

{
        id: 'my_custom_field1',
        name: 'customField1',
        maxlength: '100',
        placeholder: 'Energy bill enquiry',
        label: 'Contact reason',
        }

In order to display this value with a meaningful label in the Interaction Details frame, you would also need to "send" customField1Label.
As this one doesn't require input from the customer, you would typically add it to userData.
Ex:

userData: {
    customField1Label: 'Reason'
}

Regards,

[Samuel_Polgar1]

Dear Lucie and Jerome

Thank you very much for your help and support, with your help it's working now.