Webchat window is getting opened with a disabled overlay

[anu1]

I am trying to implement webchat in my Angular application using https://all.docs.genesys.com/WID/Current/SDK.

I have added the below script in my index.html

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

and used this.myPlug.command('WebChat.open', {}) to open my webchat window. Webchat is working fine.

Now instead of hardcoding transport.dataURL, transport.type, transport.endpoint, transport.stream, transport.headers['x-api-key'], userData['jwt-token'] in widget.config.js, I am triggering an API call to the application backend to fetch all these values and setting it to widget.config.js using the code given delow,

 `   window['_genesys'].widgets.webchat.transport.dataURL = data.dataURL;`

After this change, in most of the time webchat option is not loading properly, the entire chat window is covered with an overlay(class:cx-smokescreen).

I appreciate your help with our issue.

[tim.smith]

Hello, please follow the instructions to implement Genesys Cloud Web Chat v2 here: https://developer.genesys.cloud/api/digital/webchat/widget-version2.

[anu1]

Hi Tim,

Thank you soo much for your response. I have made changes according to the link you shared. I have moved WebChat.open command to onReady() function. First time its working well. After cancelling/closing first chat, if I am clicking on chat button(chatButtonClicked()) again, nothing is happening. Can you please help me on this?

chatButtonClicked(data, formUserData) {
    window._genesys = {
        widgets: {
          webchat: {
            userData: {
              'jwt-token': data.jwttoken
            },
            transport: {
              dataURL: data.dataURL,
              type: data.type,
              endpoint: data.endpoint,
              headers: {
                 'x-api-key': data['x-api-key'],
              },
            stream: data.stream,
          }
          },
          onReady: function() {
             this.myPlug.command('WebChat.open', {
                  form: formUserData,
                  markdown: false
             }).done(function(e) {})
                .fail(function(e) {});
          }
        }
    };
    window.CXBus.loadPlugin('widgets-core');
}

I have tried the below code as well,

chatButtonClicked(data, formUserData) {
window.CXBus
  .loadFile('../../../../assets/widgets.config.js')
  .done(function () {
    window['_genesys'] = {
      widgets: {
        webchat: {
          userData: {
            'jwt-token': data.jwttoken,
          },
          transport: {
            dataURL: data.dataURL,
            type: data.type,
            endpoint: data.endpoint,
            headers: {
              'x-api-key': data['x-api-key'],
            },
            stream: data.stream,
          },
        },
      },
    };
    window.CXBus.loadPlugin('widgets-core');
    this.myPlug.command('WebChat.open', {
        form: formUserData,
        markdown: false
   }).done(function(e) {})
      .fail(function(e) {});
  });
}

Thank you.

[Jerome.Saint-Marc]

Hello,

The widgets libraries and plugins will be loaded and started when you first execute your chatButtonClicked function (window._genesys.widgets configure and window.CXBus.loadPlugin('widgets-core');).

"After cancelling/closing first chat", the widgets are still there (loaded and running).
So you must only call the CXBus.command( 'WebChat.open', ...) method - don't call CXBus.loadPlugin('widgets-core'); again.
NB: You can use CXBus to call your command. It will be available as a global variable (or sometimes as window.CXBus depending on web framework used). CXBus will "exist" when onReady is triggered (the first time), and when you invoke your chatButtonClick function the second time.

Changing widgets configuration (window._genesys.widgets) will not have any effect and will be disregarded (the configuration is already loaded by Genesys Widgets).
And onReady will not be triggered, because widgets are already loaded, running and therefore ready.

Another comment. You are possibly not on the right forum.

This forum is for Genesys Cloud (formerly known as PureCloud).
If this is indeed the platform you are using, then, the correct link to Genesys Widgets guides when used with Genesys Cloud are the following (the link you included in your first post is for Genesys Widgets on Engage platform):
Widgets with Genesys Cloud
App Plugin
WebChat Plugin
WebChatService Plugin

For Genesys MultiCloud CX Cloud (formerly Genesys Engage Cloud) or for Genesys MultiCloud CX On-Premises (formerly Genesys Engage On-Premises), the forum are
Genesys Multicloud CX cloud - Genesys Engage Cloud - Community forum
Genesys Multicloud CX on-premises - Genesys Engage On-Premises - Community forum

Regards,