Implement UI modules and connectors

Agent Assist provides a set of pre-built, 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 surface Agent Assist suggestions. 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 wish 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, you must have already completed the following steps:

Create knowledge base with documents in it, or train a Smart Reply model and manage its allowlist.
Configure a conversation profile.

Implement UI modules using a managed container

The managed container approach integrates a single component that renders your desired 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 script is required to import the container, no matter how many Agent Assist features are included in it.

Initialize the container component:

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

Element tag name:

    <agent-assist-ui-modules>

Example script:

    <agent-assist-ui-modules
        features="SMART_REPLY,ARTICLE_SUGGESTION"
        conversation-profile="projects/my-project/conversationProfiles/abc123"
        agent-desktop="LivePerson"
        auth-token="abc123"
        channel="chat"
        custom-api-endpoint="https://my-dialogflow-proxy-service.com"
        dark-mode-background="#000000"
    ></agent-assist-ui-modules>

Container attributes

Attribute name	Expected values	Description
`features`	`SMART_REPLY`, `ARTICLE_SUGGESTION`, `FAQ`, `CONVERSATION_SUMMARIZATION`	Comma-separated string specifying one or more Agent Assist features.
`api-headers`	String in the format: `header1:value,header2:value,...`	Optional. Comma-separated list of api headers to include in the call to the Dialogflow proxy server, if one is used.
`conversation-profile`	String in the format: `projects/<project_id>/locations//conversationProfiles/<conversation_profile_id>`	Conversation profile resource name.
`agent-desktop`	`LivePerson` or `Custom`	The agent desktop platform the modules will be integrated in. If you are using a custom connector with a non-LivePerson system, choose `Custom`.
`auth-token`	String	The bearer token used to authenticate the agent when calling the Dialogflow API or proxy server. If calling the Dialogflow API directly, this should be a valid Google OAuth token.
`api-key`	String	API key used to call the Dialogflow proxy server.
`channel`	`chat` or `voice`	The communication channel that will be used (text chat, voice chat, or both).
`custom-api-endpoint`	String	Optional. The URL of the Dialogflow proxy server, if one is used.
`show-header`	Boolean	Whether to show an "Agent Assist suggestions" header in the integrated panel. Defaults to `false`.
`dark-mode-background`	String	The hexadecimal color value for the background color to use for dark mode.

Inputs

Unlike attributes, inputs cannot be included in an HTML tag directly. Instead, they must be assigned to the JavaScript reference of the web component.

Input name	Expected values	Description
`config`	`UiModulesContainerConfig`	A set of additional module-specific configurations that can be provided to the container.

Example:

    const container = document.querySelector('agent-assist-ui-modules');
    container.input = someValue;

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 Agent Assist feature individually. This includes each module (containing one feature) and its associated connector. You must first initialize the connectors, then import each module.

Implement connectors

Add the following code to your application. This will expose a global UiModuleConnector class that can then be instantiated and initialized:

    <script src="https://www.gstatic.com/agent-assist-ui-modules/ui_modules_connector.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 UiModuleConnector();

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

Implement indvidual UI modules

Knowledge Assist

You can import the Knowledge Assist module using the following code:

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

Embed the component in the page using the following tag:

    <agent-assist-knowledge-assist></agent-assist-knowledge-assist>

Attributes:

Attribute name	Expected values	Description
features	`ARTICLE_SUGGESTION`, `FAQ`	Comma-separated string specifying one or more Knowledge Assist feature.

Inputs:

Input name	Expected values	Description
`config`	`KnowledgeAssistConfig`	A set of additional configurations that can specify how suggested articles are surfaced.

Smart Reply

You can import the Smart Reply module using the following code:

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

Embed the component in the page using the following tag:

    <agent-assist-smart-reply></agent-assist-smart-reply>

Conversation Summarization

You can import the Conversation Summarization module using the following code:

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

Embed the component in the page using the following tag:

    <agent-assist-conversation-summarization></agent-assist-conversation-summarization>