Mobile rendering of widget 2 is tiny

[square_eyes]

I can't get the widget to look mobile optimised, in spite of it claiming it's mobile optimised... https://help.mypurecloud.com/articles/create-a-widget-for-web-chat

Totally could be my fault! But a test page has a tiny little embedded popup at the bottom of the screen. Fine on desktop, but mobile (Chrome/Firefox Android) has the same ratio, scaled down tiny.

Sure you can pinch to zoom in... but that's not really responsive/optimised.

Is there a config I am missing? Ideally I'd like to be able to have the mobile chat take up the entire window on mobile, as my use case is to SMS a direct link to a chat session. There is no other page content, just the chat at this point.

I guess I'm not clear on what "mobile optimised" means since the doc linked above doesn't really show anything but cropped images of the chat window.

Screenshot below...

[Angelo_Cicchitto]

Hi! This might be a provisioning issue.
By default, the widget will autodetect viewport, and switch into mobile view (full page size) at 600 pixels width.
You can tune that based on tuning params:

• main.mobileMode (by default it's set to 'auto', a string value), for testing you can change this to true (boolean value)
• main.mobileModeBreakpoint, this is the number, in pixels, by default it's at 600

[square_eyes]

OK thanks. I don't even have the window._genesys.widgets block. Just window._genesys = {... etc. I lifted the code out of the developer tool/explorer and it had none of that.

I'll take another look.

[square_eyes]

Still yet to find an example with both widget blocks. Not sure if I'm missing something. There seems to be multiple chat widget implementations for chat Widget 2.

[square_eyes]

From https://developer.mypurecloud.com.au/developer-tools/#/webchat

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

<script>
  window._genesys = {
    "widgets": {
      "webchat": {
        "transport": {
          "type": "purecloud-v2-sockets",
          "dataURL": "https://api.mypurecloud.com.au",
          "deploymentKey": "1234",
          "orgGuid": "abcdef",
          "interactionData": {
            "routing": {
              "targetType": "QUEUE",
              "targetAddress": "General Queue",
              "priority": 2
            }
          }
        },
        "userData": {
          "addressStreet": "",
          "addressCity": "",
          "addressPostalCode": "",
          "addressState": "",
          "phoneNumber": "",
          "customField1Label": "Test 1",
          "customField1": "123",
          "customField2Label": "Test 2",
          "customField2": "123",
          "customField3Label": "Test 4",
          "customField3": "123456789"
        }
      }
    }
  };

  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>

[square_eyes]

The page mentioned: https://all.docs.genesys.com/WID/Current/SDK/App-combined#Options

Doesn't explain where "App" _genesys.widgets.main config should go in relation to this.

[square_eyes]

Any ideas @Angelo_Cicchitto - Need a quick win.

[Angelo_Cicchitto]

the "main" object would be nested under "widgets" object, at the same level as you have "webchat" object in the sample. Developer documentation is also showing usage of "main" for App related parameters.

window._genesys = {
   "widgets": {
       "main": {
          //everything needed for App
       },
       "webchat": {
          //everything needed for WebChat
       }
    }
}

[square_eyes]

Thank you. I think I was thrown by "main" in the App doc, which was not double quoted. Bit of a novice obviously.

It's working now. Though, I had to force it. Will test auto a bit more.

[square_eyes]

Can't get auto to work (on my Galaxy S8 or iPhone simulation). But perhaps more importantly... even with forced mobile mode. The chat window is scaled and still not legible without zooming. Also when panning and zooming around the page seems to glitch as it attempts to resize itself (ineffectively).

On desktop resizing the window doesn't shrink the page. It responds nicely. But on mobile zooming only makes elements go off page.

[square_eyes]

Both auto and scale issues were fixed with a HTML header <meta name="viewport" content="width=device-width, initial-scale=1">

Thanks again for the help.