Container

This page contains the API documentation for the container method of implementing UI modules. The following are the Agent Assist features that you can implement as components within your container.

• Knowledge assist, Keys: 'FAQ' and 'ARTICLE_SUGGESTION'
• Generative knowledge assist, Key: 'KNOWLEDGE_ASSIST_V2'
• Smart Reply, Key: 'SMART_REPLY'
• Conversation Summarization, Key: 'CONVERSATION_SUMMARIZATION'

Version 2

The container v2 offers significant improvements from the initial container. To ensure the most impactful suggestions and key tools are always accessible to the agent, version 2 uses a reactive display with dynamic panels and a unified feed of suggestions. This version also offers greater integration flexibility by decoupling the UI modules connector from the container.

Upgrade from version 1 to version 2

Upgrading from container v1 to v2 requires you to initialize a UI connector. The UI connector config uses the same keys and values previously passed as HTML attributes to the <agent-assist-ui-modules> element.

Take note of the following details before you begin to upgrade:

• The custom HTML element name must be <agent-assist-ui-modules-v2>.
• The features attribute is required on the <agent-assist-ui-modules-v2> HTML element, for example CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2,SMART_REPLY.
• As part of the upgrade from UI Modules v1 to v2, the Agent Assist engineering team has moved values previously specified as HTML attributes to the UI modules connector config.
• The connector config does not need the features string.

Usage

Import the module in your HTML page using the following code:

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

Embed the module using the following tag:

<agent-assist-ui-modules-v2>

Attributes

Property name	Type	Comment
features	string	Comma-separated list of Agent Assist suggestion feature keys to render. Example: "SMART_REPLY, CONVERSATION_SUMMARIZATION"
api-headers	string	Additional headers to include in Dialogflow API calls. Example: "Content-Type:application/json, Accept:application/json"
conversation-profile	string	Name of the conversation profile to use.
agent-desktop	AgentDesktop	Agent desktop software to integrate with.
auth-token	string	Authentication token to use for API calls.
api-key	string	Optional API key to use for API calls.
channel	CommunicationChannel	Communication channel used for this application (chat, voice, or omnichannel).
custom-api-endpoint	string	Optional custom API endpoint to use (if UI modules are configured with a proxy server).
theme	'dark' | 'light'	Color theme to use.
show-header	BooleanString	Whether to show the Agent Assist suggestions header.
dark-mode-background	string	Background color to use for dark mode. If none is specified, defaults are provided for the primary supported agent desktops.
notifier-server-endpoint	string	Notifier server endpoint to use for event-based conversations.
event-based-transport	EventBasedTransport	Transport protocol to use for event-based conversations.
event-based-library	EventBasedLibrary	Library to use for event-based conversations.
oauth-client-id	string	Optional OAuth Client ID for implicit authentication, used in some agent desktop configurations (Genesys Cloud).
redirect-uri	string	Optional redirect URI to navigate to after authentication, used in some agent desktop configurations (Genesys Cloud).
genesys-cloud-region	string	Optional region for Genesys Cloud, defaults to mypurecloud.com.

Usage

Attributes are string-based component properties which can be set in the following ways:

From your HTML template directly:

<element-selector property-name="value">

From your JavaScript code:

var el = document.querySelector('element-selector');
el.setAttribute('property-name', 'value');

Inputs

Property name	Type	Comment
socketIoConnectOpts	SocketIoConnectOpts	Additional Socket.io connect options.
config	UiModuleContainerConfig	Configuration object to define module-specific configurations.

Usage

Inputs are typically JavaScript objects or other complex property types which must be assigned on the element instance directly:

const el = document.querySelector('element-selector');
el.propertyName = value;

Types

See the following section for the custom types used by the component.

AgentDesktop

"LivePerson" | "GenesysCloud" | "SalesForce" | "Custom"

CommunicationChannel

"chat" | "voice" | "omnichannel"

BooleanString

"true" | "false"

EventBasedTransport

"websocket" | "polling"

EventBasedLibrary

"SocketIo"

SocketIoConnectOpts

interface SocketIoConnectOpts extends SocketIOClient.ConnectOpts {
  auth: {
    token: string;
  };
  withCredentials?: boolean;
}

UiModuleContainerConfig

interface UiModuleContainerConfig {
  knowledgeAssistConfig?: {
    articleLinkConfig: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
  };
  knowledgeAssistV2Config?: {
    articleLinkConfig?: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
    showCopyAnswer: boolean;
    showPasteAnswer: boolean;
  };
  summarizationConfig?: {
    /**
     * Optional callback that can be used to save the generated summary to an
     * external source.
     */
    onSaveSummary?: (
      summary: {
        summary: string;
        conversationDetails: ConversationDetails;
      },
      saveCallbacks: {
        setLoading: () => void;
        setSuccess: (message: string) => void;
        setError: (message: string) => void;
      }
    ) => void;

    /** Whether to show the 'Generate summary' button. */
    showGenerateSummaryButton?: "true" | "false";
  };
}