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
featuresattribute is required on the<agent-assist-ui-modules-v2>HTML element, for exampleCONVERSATION_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
featuresstring.
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"
;
};
}
