Implement UI modules and connectors

Agent Assist provides a set of prebuilt, customizable UI component modules that you can use to integrate Agent Assist features into your UI. You can embed the modules in any web application to display Agent Assist suggestions to your agents. For specific instructions about how to integrate modules into LivePerson, see the LivePerson tutorial.

Agent Assist features

The following are the Agent Assist features that you can implement as UI module components.

Before you begin

Before you can implement UI modules, configure a conversation profile.

Implement UI modules

There are two primary approaches for integrating Agent Assist modules into your UI:

  • Container (Recommended): Renders all selected Agent Assist features in a single streamlined panel.
  • Individual Components: Allows you to import specific features individually if you want to place them in different areas within your agent desktop.

You can also use the container and individual components together. For example, you can implement the container to display all features in a main panel, while placing a standalone Smart Reply module elsewhere, such as directly under the chat display of the agent desktop.

Both approaches can be used with any system, but Agent Assist only provides Open Source UI module integrations for Genesys Cloud, LivePerson, Twilio, and Salesforce. To integrate UI modules with any other agent system, you must create your own integration. Use the container V2 approach for most features. You can also implement individual components, such as Smart Reply, if you have space.

Communication between the UI components and the agent desktop is facilitated by a UI module connector. All client communication takes place through dispatching custom events.

File versions

Retrieve the latest version of a gstatic file by specifying the latest version:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>

Retrieve a specific stable version of a gstatic file by specifying the exact version:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v2.7/container.js"></script>

Latest versions: 

      Container: v1.16 // Legacy
      Container: v2.7
      Common: v1.14
      Generative knowledge assist: v2.10
      Smart reply: v1.4
      Summarization: v1.3
      Transcript: v1.4
      Genesys Cloud: v1.1

Container

The container is a single component that renders your chosen Agent Assist features in one unified, reactive panel. We recommend using Container V2 for almost every integration.

Initialize the container component:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>

Element tag name:

    <agent-assist-ui-modules-v2>

Example initialization:

    const uiModulesEl = document.createElement('agent-assist-ui-modules-v2');
    uiModulesEl.setAttribute('use-configured-features', 'true');
    hostElement.appendChild(uiModulesEl);

For more details, see the Container V2 API documentation page.

Container V1 (Legacy)

Container V1 is supported but considered legacy. Unlike V2, V1 embeds the UI Module connector internally.

Initialize the Container V1 component:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>

Element tag name:

    <agent-assist-ui-modules>

For more details, see the Container V1 API documentation page.

Individual components

You can integrate some Agent Assist features individually instead of using a single container. We only recommend this approach if you use a custom application where the modules must be rendered in different sections of the page, or if you require significant customization. For example, you might want to place a Smart Reply module directly under the chat display.

In this case, you need to import the selected feature-specific UI module individually. Additionally, you must import and initialize the UI module connector.

Implement the UI module connector

Unless you're using version 1 of the container, you must implement the UI module connector to use UI modules. Add the following code to your application to expose a global UiModulesConnector class that can then be instantiated and initialized:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/common.js"></script>

Methods:

    constructor(): void;
    init(config: ConnectorConfig): void;
    disconnect(): void;
    setAuthToken(token: string): void;

The following outlines the TypeScript interface for the connector configuration object. If you have created a custom UI module connector to use with an unsupported system, set agentDesktop to Custom. The following example provides a list of supported agent desktop systems.

interface ConnectorConfig {
  /** Communication mode for the UI modules application. */
  channel: 'chat' | 'voice';

  /** Agent desktop to use. */
  agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | 'Custom';

  /** Optional desktop source for metric tracking. */
  agentDesktopSource?: string;

  /** Conversation profile name to use. */
  conversationProfileName: string;

  /** API Connector config. */
  apiConfig: {
    /**
     * Authentication token to attach to outgoing requests. Should be a valid
     * OAuth token for Dialogflow API, or any other token for custom API
     * endpoints.
     */
    authToken: string;

    /**
     * Specifies a custom proxy server to call instead of calling the Dialogflow
     * API directly.
     */
    customApiEndpoint?: string;

    /** API key to use. */
    apiKey?: string;

    /**
     * Additional HTTP headers to include in the Dialogflow/proxy server API
     * request.
     */
    headers?: Array;
  }

  /** Event-based connector config. Required for voice/omnichannel conversations and some features of chat conversations. */
  eventBasedConfig?: {
    /** Transport protocol to use for updates. Defaults to 'websocket'. */
    transport?: string;

    /** Event-based library to use. */
    library?: 'SocketIo';

    /** Endpoint to which the connection will be established. */
    notifierServerEndpoint: string;

    /** Additional Socket.io connect options. */
    socketIoConnectOpts?: any;

    /** Options to retry initial Socket.io connection in case of failure. */
    backOffOpts?: {
      initialDelay: number;
      maxDelay: number;
      maxAttempts: number;
      connectionTimeout: number;
    };
  }

}

Example instantiation:

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'Custom',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  },
  eventBasedConfig: {
    notifierServerEndpoint: 'https://my-notifier-server-endpoint.com',
    transport: 'websocket',
    library: 'SocketIo',
  }
});

Price disclaimer

If you use UI modules, there is a cost associated with the underlying services, including the following: