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.

• Knowledge Assist
• Generative Knowledge Assist
• Smart Reply
• Conversation Summarization
• Transcript

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. The managed container approach integrates all of your selected Agent Assist features in a single panel. Alternatively, you can import features individually if you want to customize their configuration in your interface. Communication between the UI components and the agent desktop is facilitated by a UI module connector. All communication takes place through dispatching custom events.

Both the container approach and individual components can be used with any system, but Agent Assist only provides UI module connectors for use with LivePerson. To integrate the UI modules with any other agent system, you will need to create your own connectors. See the custom UI module connector documentation for more details.

Managed container

The managed container approach integrates a single component that renders your chosen Agent Assist features in one unified panel. This panel will also handle all shared module concerns, including loading connectors and any error messaging. We recommend this approach if you are integrating the modules into a third-party agent desktop such as LivePerson, or if you require minimal to no customization of how the Agent Assist features are rendered in your UI.

After the container component is initialized, it will load all necessary dependencies. Only a single import is required to initialize the container, no matter how many Agent Assist features are used.

Initialize the container component:

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

Element tag name:

    <agent-assist-ui-modules>

Example initialization:

    const uiModulesEl = document.createElement('agent-assist-ui-modules');
    uiModulesEl.setAttribute('features', 'SMART_REPLY,ARTICLE_SUGGESTION');
    uiModulesEl.setAttribute('conversation-profile', 'projects/my-project/locations/global/conversationProfiles/123');
    uiModulesEl.setAttribute('auth-token', authToken);
    uiModulesEl.setAttribute('channel', 'chat');
    uiModulesEl.setAttribute('custom-api-endpoint', 'https://my-dialogflow-proxy-service.com');
    uiModulesEl.setAttribute('dark-mode-background', '#000000');
    hostElement.appendChild(uiModulesEl);

For more details, see the component API documentation page.

Individual components

You have the option of integrating Agent Assist UI modules individually instead of in a single container. We only recommend this approach if you use a custom application where the modules might need to be rendered in different sections of the page, or if you require significant customization.

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

Note: Agent Assist provides out-of-the-box support for use with LivePerson only. To integrate modules into any other agent system, you will need to create your own custom UI module connector before you can implement Agent Assist UI modules.

Implement the UI module connector

Add the following code to your application. This will 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 is an example of the full TypeScript interface for the connector configuration object. If you have created a custom UI module connector to use with any agent system other than LivePerson, choose agentDesktop = custom.

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

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

  /** 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. Set this for voice conversations. */
  eventBasedConfig?: {
    /**
     * Transport protocol to use for updates. Defaults to 'websocket' if none is
     * specified.
     */
    transport?: 'websocket'|'polling';

    /** Event-based library to use (i.e., Socket.io). */
    library?: 'SocketIo';

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

Example instantiation:

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'LivePerson',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  }
});