WebChat Widget v2 - subject and custom attributes

Good afternoon, forum:

I was looking for a configuration we could do in order to show in the Interaction Details panel, once a webchat widget v2 interaction has arrived at the Contact Center and is answered by an agent, the information related to the subject or other custom data. We can only see three fields: customer´s name, customer´s phonenumber and customer´s email; but neither subject or any other custom attribute.
I appreciate if you can help us with a recommendation in order to achieve that.

Thank you.

image

image

Hello,

The interaction details page only exposes a specific set of attributes (i.e. attributes with specific names - case sensitive).

Attribute names in Guest Chat API/Widget:

addressStreet
addressCity
addressPostalCode
addressState
phoneNumber
phoneType
customerId
firstName and lastName
email

You can also have up to 3 custom labels and values exposed using the following attribute names

customField1Label
customField1
customField2Label
customField2
customField3Label
customField3

With WebChat Widget 2.0:

If you want to allow the customer to enter the values via a field (in a Custom Chat Registration Form), the name of attribute passed in Guest Chat API will come from the "name" attribute in the definition of that custom field.
I mean:

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

This will leverage customField1 to pass the values in Guest Chat API.

If you have "static" values (ex: the labels of the custom fields), you can set them directly as user data:

userData: {
    customField1Label: 'Reason'
}

If you want more flexibility you can use a Script.
You will be able to leverage most of the Script built-in variables for Chat (except {{Chat.Customer email}} which remains empty with Widgets v2).
You can also define variables in your Script - of type String + Input toggle enabled (this is to say that Script will try to extract the value from the conversation info/attributes).
As an example, if you are using "subject" as your attribute name in Widgets v2, you will be able to define a variable named "subject" in your script (with Input toggle enabled).
Then you can display it via a text component using {{subject}}.

There is also the possibily now to use the custom Interaction Widget.
This will require some code using Platform API.
But it allows to xpose a webapp/webpage as a tab in the conversation view.
The conversationId can also be propagated to the webapp using the {{pcConversationId}} macro (URL interpolation).

https://developer.mypurecloud.com/api/client-apps/index.html

Regards,

1 Like

Thank you Jerome:

If I define for example a new field called "caseId" and I need to 1) request it in the form and then 2) pass its value to be shown in the Interaction Details (userData), and considering its value is variable, how can I do that?

I appreciate your help.

Hello,

With WebChat Widgets v2, you can define a custom chat registration form, if you want to collect other input from the customer (I mean compared to the standard/default chat registration form which exposes and collects firstname/lastname/email/subject).

See here for more info: https://all.docs.genesys.com/WID/Current/SDK/WebChat-combined#Customizable_chat_registration_form
And here: https://developer.mypurecloud.com/api/webchat/widget-version2.html#customizable_pre_chat_registration_form

One way to set/define a custom chat registration form is via configuration.
You will have to set window._genesys.widgets.webchat.form to a structure like the one shown in this page - in Default Example.
This example collects firstname/lastname/email and subject.
You can modify it, adding new fields or removing the ones you don't want (it can be a text input, a drop-down list/select, ...).
The name of your field in the structure would have to be caseId (the name attribute of the field will be used as the participant data/user data keyname in the Conversation context).

{
    id: 'my_case_id',
    name: 'caseId',
    maxlength: '100',
    placeholder: 'Enter your Case Id',
    label: 'Case Id',
}

To be more specific, this parameter will then be stored as "context.caseId" in the conversation context.
From an Architect flow, you would access the data using "context.caseId".
From Script, you can use "caseId" directly (in case of Chat, the Script manages the "context." prefix internally/transparently).

Regards,

1 Like

Thank you Jerome.

We have already used the script approach.

Hello,

Sorry, I have just realized I didn't answer your question correctly. I missed/forgot the part on Interaction Details tab....

If you want your CaseId value to appear in the Interaction Details tab, you will not be able to use "caseId" as the keyname (attribute name).
You would have to use customField and customLabel as I indicated in my first answer.

In your custom registration form, you would need to add a field like this:

{
    id: 'my_case_id',
    name: 'customField1',
    maxlength: '100',
    placeholder: 'Enter your Case Id',
    label: 'Case Id',
}

The caseId will then be stored in "context.customField1" in the conversation context.

In order to display this value with a proper label in Interaction Details, you would need to also send/set customField1Label.
As it is a static value, as I explained in my first answer, you can set it in userData directly (in widgets configuration for webchat).

userData: {
    customField1Label: 'CaseId'
}

Regards,

1 Like

Hi Jerome:

Thank you so much. Yes sir, it worked as we expected.

Thank you very much for your interest, and for your detailed and effective help.

Bonne chance!

Glad it worked. Thanks for letting us know.

1 Like

Hi Jerome,
where could I get a sample code showing how to offer the drop-down list / select option.
I have a customer who would like this to be offered.
the form submit example offers something with enquiry type and a drop down, could we have a sample code ?

basic attempt which doesn't work:

<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": {
          "addressStreet": "",
          "addressCity": "",
          "addressPostalCode": "",
          "addressState": "",
          "phoneNumber": "",
          "customField1Label": "Custom PostCode",
          "customField1": "",
          "customField2Label": "Custom Reason",
          "customField2": "",
          "customField3Label": "",
          "customField3": ""
        }
      }
    }
  };

  function getAdvancedConfig() {
    return {
      "form": {
        "autoSubmit": false,
        "firstname": "john",
        "customField1": "TW1 1AA",
		"customField2": "query reason"
      },
      "formJSON": {
        "wrapper": "<table></table>",
        "inputs": [
          {
            "id": "cx_webchat_form_firstname",
            "name": "firstname",
            "maxlength": "100",
            "placeholder": "Required",
            "label": "Name"
          },
          {
            "id": "custom_field_1",
            "name": "customField1",
            "maxlength": "100",
            "placeholder": " ",
            "label": "PostCode"
          },
          {
            "id": "custom_field_2",
            "name": "customField2",
            "maxlength": "100",
            "placeholder": "1st reason",
            "type": "select",
			"label": "Reason",
			"options": [
			{"text": "reason1","value": "reason1"},
			{"text": "reason2","value": "reason2"}
			],
			"wrapper": "<tr><th>{label}</th><td>{options}</td></tr>" /* input row wrapper */
          }
        ]
      }
    };
  }

  const customPlugin = CXBus.registerPlugin('Custom');
</script>

Thanks,
Jean-Christophe

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,

Great it makes more sense now and thanks for pointing out the other posts.

Cheers,
Jean-Christophe

This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.