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.

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. An upgrade from container v1 to v2 requires you to initialize the UI connector with the same configuration that was previously passed on the container.

Usage

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

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

Embed the module using the following tag:

<agent-assist-ui-modules>

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";
  };
}