Genesys

Overview

Web chat comes with a built-in integration to the Genesys Web Messenger. This integration currently supports client-side configuration and is not available inside the watsonx Assistant UI. This page documents the configuration settings needed by web chat to enable the integration.

You can find more information about setting up a web messenger on the Genesys website. Genesys provides its own chat widget for interacting with an agent on their service. It is recommended that you first enable and test their widget to ensure that your account is set up correctly. After testing, you can enable the settings to use web chat as the widget.

Enabling the integration

To enable the integration, you need to know your Genesys script URL, environment, and deployment ID. These values can be found in the embed code Genesys provides you for embedding the messenger on your website. You need to include these values in the following web chat configuration object.

Note: The environment value is only necessary if you are not using the default environment and it is not included in your embed code. Also, the Genesys SDK does not work if launched from a local HTML file opened directly in your browser (by using file://). It needs to be served from a server (which can be localhost) over HTTP. You can use http-server if you need a simple local server for testing purposes.

<script>
  window.watsonAssistantChatOptions = {
    integrationID: 'YOUR_INTEGRATION_ID',
    region: 'YOUR_REGION',
    serviceInstanceID: 'YOUR_SERVICE_INSTANCE_ID',

    serviceDesk: {
      // This enables the Genesys integration.
      integrationType: 'genesyswebmessenger',
      genesysMessenger: {
        scriptURL: 'https://apps.mypurecloud.com/genesys-bootstrap/genesys.min.js',
        deploymentID: 'YOUR_DEPLOYMENT_ID',
        environment: 'YOUR_ENVIRONMENT', // Only if provided.
      },
    },

    onLoad: async (instance) => {
      await instance.render();
    }
  };
  
  setTimeout(function(){const t=document.createElement('script');t.src='https://web-chat.global.assistant.watson.appdomain.cloud/versions/' + (window.watsonAssistantChatOptions.clientVersion || 'latest') + '/WatsonAssistantChatEntry.js';document.head.appendChild(t);});
</script>

Authenticated users

Genesys helps you to enable a configuration that ensures only authenticated users can connect to Genesys. To enable this functionality, you need an OAuth provider that can provide an authentication code that you make available to Genesys. To provide the code, web chat fires events the same events that the Genesys SDK fires when it needs to perform authentication related operations. At a minimum, you need to listen for the agent:genesysMessenger:AuthProvider web chat event to provide the authentication code.

You can read about setting up user authentication on the Genesys website as well as review their example code.

Example

instance.on({
  type: 'agent:genesysMessenger:getAuthCode',
  handler: (event) => {
    // Here you add your code to call your oauth provider to get an authentication code. This may involve a
    // redirect to your authentication or login page so you may need to provide a redirect URL to get back to this
    // page.
    const authCode = await someFunctionToGetAuthCode();
    const redirectUri = 'YOUR_REDIRECT_URI';
    // Provide the authentication code to Genesys.
    event.genesysEvent.resolve({
      authCode,
      redirectUri,
    });
  },
});

Web chat events

The following list shows the possible event that the web chat fires. These events mirror the events that are fired by the Genesys SDK.

Custom attributes

You can set a custom attribute by using Genesys SDK that can be available inside Genesys. Use Web chat to provide custom attributes before a chat starts by using the agent:pre:startChat event. To provide custom attributes, set the preStartChatPayload.customAttributes property of the event.

You can use an agent pre-chat form to gather any custom data you want to send to Genesys before the chat begins. The event documentation includes a basic example for how to do this. You can also view the tutorial for creating pre- and post-chat forms based on the window open and closed events. Handling a pre- or post-chat event with an agent uses similar code except you use agent:pre:startChat instead of window:open.

Example

instance.on({
  type: 'agent:pre:startChat',
  handler: (event) => {
    event.preStartChatPayload = {
      customAttributes: {
        attribute1: 'Some value',
      },
    };
  },
});