Widget localization

[Armands_Bunkovskis]

Hi!
I'm trying to change default messages , like "Chat Started" etc in the Widget.
Made a simple working code like this:

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

<script>
  window._genesys = {
    "widgets": {
      "webchat": {
        "transport": {
          "type": "purecloud-v2-sockets",
          "dataURL": "https://api.mypurecloud.de",
          "deploymentKey": "xxxxxxxx",
          "orgGuid": "yyyyyyyyyyy",
          "interactionData": {
            "routing": {
              "targetType": "QUEUE",
              "targetAddress": "Test queue",
              "priority": 2
            }
          }
        },
        "userData": {
          "addressStreet": "",
          "addressCity": "",
          "addressPostalCode": "",
          "addressState": "",
          "phoneNumber": "",
          "customField1Label": "",
          "customField1": "",
          "customField2Label": "",
          "customField2": "",
          "customField3Label": "",
          "customField3": ""
        }
      }
    }
  };

  function getAdvancedConfig() {
    return {
      "form": {
        "autoSubmit": false,
        "firstname": "",
        "lastname": "",
        "email": "",
        "subject": ""
      },
      "formJSON": {
        "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": "Optional",
            "label": "Email"
          },
          {
            "id": "cx_webchat_form_subject",
            "name": "subject",
            "maxlength": "100",
            "placeholder": "Optional",
            "label": "Subject"
          }
        ]
      }
    };
  }

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

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

AS per the earlier posts, in order to change labels for default widget, you need to add the code like this:
window._genesys.widgets.main.i18n ={"en":{"webchat":{"ChatStarted": "Chat Started new label"}}};

If I put that code above existing window._genesys block - chat is not working at all. If I put it at the and of this script block - it is not taken into account.

Can you pls guide me where I need to put this block and/or maybe I need to make some additional changes for it to be actually used?
Thanks in advance

[Jerome.Saint-Marc]

Hello,

The following should work (just tried it myself):

    <script type="text/javascript">
        window._genesys = {
            widgets: {
                main: {
                    timeFormat: 24,
                    theme: 'dark',
                    lang: 'en',
                    i18n: {
                        "en": {
                            "webchat": {
                                "ChatStarted": "Chat Started new label"
                            }
                        }
                    },
                    mobileMode: 'auto',
                    mobileModeBreakpoint: 600
                },
                webchat: {
                    transport: {
                        type: 'purecloud-v2-sockets',
                        dataURL: "https://api.mypurecloud.de",
                        deploymentKey: "xxxxxxxx",
                        orgGuid: "yyyyyyyyyyy",
                        interactionData: {
                            routing: {
                                targetType: "QUEUE",
                                targetAddress: "Test queue",
                                priority: 2
                            }
                        }
                    },
                    userData: {},
                    confirmFormCloseEnabled: true,
                    markdown: true
                }
            }
        };

    </script>

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

    <script type="text/javascript">
        function getAdvancedConfig() {
            return {
                form: {
                    autoSubmit: false,
                    firstname: '',
                    lastname: '',
                    email: '',
                    subject: ''
                },
                formJSON: {
                    wrapper: '<table></table>',
                    inputs: [
                        // Default fields
                        {
                            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: 'Optional',
                            label: 'Email'
                        },
                        {
                            id: 'cx_webchat_form_subject',
                            name: 'subject',
                            maxlength: '100',
                            placeholder: 'Optional',
                            label: 'Subject'
                        },
                        // Custom Fields
                        {
                            id: 'custom_field_1',
                            name: 'customField1',
                            maxlength: '100',
                            placeholder: 'Custom Data',
                            label: 'Custom Field 1',
                            value: 'My Custom Value'
                        }
                    ]
                }
            };
        }
    </script>

    <button type="button" id="chat-button-simple" onclick="CXBus.command('WebChat.open');">Start Chat with no parameters
        (if you do not need custom fields in the chat registration or prefill of data)</button>

    <button type="button" id="chat-button" onclick="CXBus.command('WebChat.open', getAdvancedConfig());">Start
        Chat with parameters (if you need custom fields in the chat registration or prefill of data)</button>

Regards,

[Armands_Bunkovskis]

Thanks, it works

[Armands_Bunkovskis]

Hi!
Proposed code is working OK if pressing chat-button-simple. But if I need advanced config customisation and I press chat-button, then widget is not shown and console shows error:
(index):100 Uncaught ReferenceError: getAdvancedConfig is not defined
at HTMLButtonElement.onclick ((index):100)

What should be changed in the code to make it work?

Thanks

[Jerome.Saint-Marc]

Hello,

What you have is a javascript error - nothing to do with the widgets side.

I assume you didn't use what I posted above as is, as it is working for me for both buttons. I mean:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Genesys Cloud WebChat Demo</title>
</head>
<body>

The sample code I had posted previously

</body>
</html>

So the only way to know what's causing your javascript error is that you post your full page, and so I can see what you have in your code and what can cause the getAdvancedConfig function not to be found/recognized.

Regards,