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.

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 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 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 connector documentation for more details.

Before you begin

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

Implement UI modules using a 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.

Implement UI modules using 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 modules connector.

Implement the UI modules 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 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',
  }
});

Implement individual UI modules