Chat Widget Localization

Genesys Cloud Web Chat
1

Hi,

I am using Genesys widget chat version 2 for our chat deployment. I want to change the language of the chat while initiating and I am using the below code. I am changing the lang parameter's value to "vietnam" and i18n's value to the language file that i have created (https://5d99-115-111-182-147.ngrok.io/widgets-vi.i18n.json). But somehow this is not working and chat widget is getting initiated in English language by default

<script src="https://apps.mypurecloud.ie/widgets/9.0/cxbus.min.js" onload="javascript:CXBus.configure({debug:false,pluginsPath:'https://apps.mypurecloud.ie/widgets/9.0/plugins/'}); CXBus.loadPlugin('widgets-core');"></script>

<script>

  window._genesys = {
    widgets: {
 	 main: {
                    timeFormat: 24,
                    theme: 'dark',
                    lang: "vi",
                    **i18n: "https://5d99-115-111-182-147.ngrok.io/widgets-vi.i18n.json"**
                },
      "webchat": {
        "transport": {
          "type": "purecloud-v2-sockets", 
          "dataURL": "https://api.mypurecloud.ie",
          "deploymentKey": "xxxxxx",
          "orgGuid": "xxxxxx",
          "interactionData": {
            "routing": {
              "targetType": "QUEUE",
              "targetAddress": "NameOf the queue"
            }
          }
        },
        "userData": {
          "addressStreet": "",
          "addressCity": "",
          "addressPostalCode": "",
          "addressState": "",
          "phoneNumber": "",
          "customField1Label": "",
          "customField1": "",
          "customField2Label": "",
          "customField2": "",
          "customField3Label": "",
          "customField3": ""
        }
      }
    }
  };

  function getAdvancedConfig() {
    return {
      "form": {
        "autoSubmit": false,
        "firstname": "test",
        "lastname": "",
        "email": "",
        "subject": ""
      },
      "formJSON": {
        "wrapper": "<table></table>",
        "inputs": [
          {
            "id": "cx_webchat_form_firstname",
            "name": "firstname",
            "maxlength": "100",
            "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": "Optional",
            "label": "Email"
          },
          {
            "id": "cx_webchat_form_subject",
            "name": "subject",
            "maxlength": "100",
            "placeholder": "Optional",
            "label": "Subject"
          },
        {
            "id":"cx_webchat_form_enquirytype",
            "name":"language",
            "type":"select",
            "label":"Language",
            "options":[
                
                {
                    "text":"English",
                    "value":"en",
                    "selected":true
                },
                {
                    "text":"Cantonese (Chinese Traditional)",
                    "value":"zh-TW"
                },
                {
                    "text":"Chinese Simplified",
                    "value":"zh-CN"
                },
                {
                    "text":"Japanese",
                    "value":"ja"
                },
                {
                    "text":"French",
                    "value":"fr"
                }
            ]
        }
        ]
      }
    };
  }

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

<button type="button" id="chat-button" onclick="customPlugin.command('WebChat.open', getAdvancedConfig());">Start Chat</button>
2

Hello,

As your language file does not seem to be available anymore at 5d99-115-111-182-147.ngrok.io, I couldn't test it.

But here are some comments:

  1. Although widgets may support it now (not 100% sure), the window._genesys.widgets should be set before CXBus.loadPlugin('widgets-core') is invoked.
    I mean that it would be better to have window._genesys.widgets initialized/set (in a <script>) before the <script src="https://apps.mypurecloud.ie/widgets/9.0/cxbus.min.js" onload="javascript:CXBus.configure({debug:false,pluginsPath:'https://apps.mypurecloud.ie/widgets/9.0/plugins/'}); CXBus.loadPlugin('widgets-core');"></script> line.
    Keep the function getAdvancedConfig() after (as it is in your code above).

  2. One reason why your vietnamese language file is not loaded (so widgets is defaulting to english) could be that the HTTP Response does not contain an "Access-Control-Allow-Origin" header (example value to allow everything: *)
    I mean that when your web client requests the language file (GET https://5d99-115-111-182-147.ngrok.io/widgets-vi.i18n.json), if the HTTP 200 OK response does not have this header set, your web client will refuse to load/use it (CORS issue - Cross Origin Resource Sharing).
    I couldn't verify this as the ngrok url is not available/working anymore.

  3. If you want to create a Custom Chat Registration Form to add some new inputs, and if you want these inputs to leverage the language localization, you need to change some of your attributes.
    I am referring to the inputs in the formJSON of your getAdvancedConfig function.
    You can see an example in the Custom Chat Registration Form.
    For the existing/built-in fields like firstname, lastname, email and subject, it would be:

     	{
 		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"
 	}

Note that for your language/cx_webchat_form_enquirytype, you can also leverage the localization.
Define some new attributes in your vietnamese language file (as an example: UseWhatYouWantForYourLabelName), and you can then reference them via @i18n:webchat.UseWhatYouWantForYourLabelName.

Regards,

3

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