interface ConnectorConfig {
/** Communication mode for the UI modules application. */
channel: 'chat'|'voice';
/** Agent desktop to use. */
agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | '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;
}
}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["難以理解","hardToUnderstand","thumb-down"],["資訊或程式碼範例有誤","incorrectInformationOrSampleCode","thumb-down"],["缺少我需要的資訊/範例","missingTheInformationSamplesINeed","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-09-04 (世界標準時間)。"],[[["\u003cp\u003eAgent Assist offers prebuilt, customizable UI modules for embedding features like Knowledge Assist, Smart Reply, and Conversation Summarization into web applications.\u003c/p\u003e\n"],["\u003cp\u003eYou can integrate Agent Assist modules using either a managed container for a unified panel, or by importing individual features for customized placement and configuration.\u003c/p\u003e\n"],["\u003cp\u003eA UI module connector facilitates communication between UI components and the agent desktop, with Agent Assist providing connectors for systems like Genesys Cloud, LivePerson, Twilio, and Salesforce, and the option to create custom connectors for other systems.\u003c/p\u003e\n"],["\u003cp\u003eTo implement UI modules, it's necessary to configure a conversation profile beforehand, and you can use the provided gstatic file links to retrieve either the latest or a specific stable version of module components.\u003c/p\u003e\n"],["\u003cp\u003eImplementing UI modules incurs costs associated with the underlying services like Pub/Sub, Memorystore for Redis, and Cloud Run.\u003c/p\u003e\n"]]],[],null,["# Implement UI modules and connectors\n\nAgent Assist provides a set of prebuilt, customizable UI component modules that\nyou can use to integrate Agent Assist features into your UI. You can embed\nthe modules in any web application to display Agent Assist suggestions to your agents. For specific instructions about how to integrate modules into\nLivePerson, see the [LivePerson tutorial](/agent-assist/docs/liveperson).\n\nAgent Assist features\n---------------------\n\nThe following are the Agent Assist features that you can implement as UI module components.\n\n- [Knowledge assist](/agent-assist/docs/ui-modules-knowledge-assist-documentation)\n- [(Proactive) Generative knowledge assist](/agent-assist/docs/ui-modules-knowledge-assist-v2-documentation)\n- [Smart reply](/agent-assist/docs/ui-modules-smart-reply-documentation)\n- [Conversation summarization](/agent-assist/docs/ui-modules-summarization-documentation)\n- [Transcript](/agent-assist/docs/ui-modules-transcript-documentation)\n\nBefore you begin\n----------------\n\nBefore you can implement UI modules, configure a [conversation profile](/agent-assist/docs/conversation-profile).\n\nImplement UI modules\n--------------------\n\nThere are two primary approaches for integrating Agent Assist modules into\nyour UI. The **managed container** approach integrates all of your selected\nAgent Assist features in a single panel. Alternatively, you can\n**import features individually** if you want to customize their configuration in\nyour interface. Communication between the UI components and the agent desktop is\nfacilitated by a **UI module connector** . All communication takes place through\ndispatching [custom events](/agent-assist/docs/custom-events).\n\nBoth the container approach and individual components can be used with any\nsystem, but Agent Assist only provides UI module connectors for use with [Genesys Cloud](/agent-assist/docs/genesys-cloud-app), [LivePerson](/agent-assist/docs/liveperson), [Twilio](/agent-assist/docs/twilio), and [Salesforce](/agent-assist/docs/salesforce). To integrate the UI modules with any other agent system, you will need to create your own connectors. See the\n[custom UI module connector documentation](/agent-assist/docs/custom-events) for more\ndetails.\n\n### File versions\n\nRetrieve the latest version of a gstatic file by specifying the latest version: \n\n \u003cscript src=\"https://www.gstatic.com/agent-assist-ui-modules/v1/container.js\"\u003e\u003c/script\u003e\n\nRetrieve a specific stable version of a gstatic file by specifying the exact version: \n\n \u003cscript src=\"https://www.gstatic.com/agent-assist-ui-modules/v1.7/container.js\"\u003e\u003c/script\u003e\n\n| **Important:** Specify an exact version for any production use.\n\nLatest versions: \n\n```\n Container: v1.12\n Container: v2.0\n Common: v1.6\n Knowledge assist: v1.1\n Generative knowledge assist: v2.9\n Smart reply: v1.4\n Summarization: v1.3\n Transcript: v1.3\n```\n\n\u003cbr /\u003e\n\n### Managed container\n\nThe managed container approach integrates a single component that renders your\nchosen Agent Assist features in one unified panel. This panel will also\nhandle all shared module concerns, including loading connectors and any error\nmessaging. We recommend this approach if you are integrating the modules into a\nthird-party agent desktop such as LivePerson, or if you require minimal to no\ncustomization of how the Agent Assist features are rendered in your UI.\n\nAfter the container component is initialized, it will load all necessary\ndependencies. Only a single import is required to initialize the container, no\nmatter how many Agent Assist features are used.\n\nInitialize the container component: \n\n \u003cscript src=\"https://www.gstatic.com/agent-assist-ui-modules/v1/container.js\"\u003e\u003c/script\u003e\n\nElement tag name: \n\n \u003cagent-assist-ui-modules\u003e\n\nExample initialization: \n\n const uiModulesEl = document.createElement('agent-assist-ui-modules');\n uiModulesEl.setAttribute('features', 'SMART_REPLY,ARTICLE_SUGGESTION');\n uiModulesEl.setAttribute('conversation-profile', 'projects/my-project/locations/global/conversationProfiles/123');\n uiModulesEl.setAttribute('auth-token', authToken);\n uiModulesEl.setAttribute('channel', 'chat');\n uiModulesEl.setAttribute('custom-api-endpoint', 'https://my-dialogflow-proxy-service.com');\n uiModulesEl.setAttribute('dark-mode-background', '#000000');\n hostElement.appendChild(uiModulesEl);\n\nFor more details, see the [component API documentation page](/agent-assist/docs/ui-modules-container-documentation).\n\n### Individual components\n\nYou have the option of integrating Agent Assist UI modules individually instead\nof in a single container. We only recommend this approach if you use a custom\napplication where the modules might need to be rendered in different sections\nof the page, or if you require significant customization.\n\nIn this case, you need to import each feature-specific UI module individually. Additionally, you will need to import and initialize the UI module connector.\n| **Note:** Agent Assist provides out-of-the-box support for use with LivePerson, Genesys Cloud, and Twilio. To integrate modules into any other agent system, you will need to create your own [custom UI module connector](/agent-assist/docs/custom-events#custom_ui_modules_connectors) before you can implement Agent Assist UI modules.\n\nImplement the UI module connector\n---------------------------------\n\nUnless you're using version 1 of the container, you must implement the UI module connector to use UI modules. Add the following code to your application to expose a global `UiModulesConnector` class that can then be instantiated and initialized: \n\n \u003cscript src=\"https://www.gstatic.com/agent-assist-ui-modules/v1/common.js\"\u003e\u003c/script\u003e\n\nMethods: \n\n constructor(): void;\n init(config: ConnectorConfig): void;\n disconnect(): void;\n setAuthToken(token: string): void;\n\nThe following is an example of the full TypeScript interface for the connector\nconfiguration object. If you have created a\n[custom UI module connector](/agent-assist/docs/custom-events#custom_ui_modules_connectors) to use with an unsupported system, set `agentDesktop` to `Custom`. The following example provides a list of supported agent desktop systems. \n\n```\ninterface ConnectorConfig {\n /** Communication mode for the UI modules application. */\n channel: 'chat'|'voice';\n\n /** Agent desktop to use. */\n agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | 'Custom';\n\n /** Conversation profile name to use. */\n conversationProfileName: string;\n\n /** API Connector config. */\n apiConfig: {\n /**\n * Authentication token to attach to outgoing requests. Should be a valid\n * OAuth token for Dialogflow API, or any other token for custom API\n * endpoints.\n */\n authToken: string;\n\n /**\n * Specifies a custom proxy server to call instead of calling the Dialogflow\n * API directly.\n */\n customApiEndpoint?: string;\n\n /** API key to use. */\n apiKey?: string;\n\n /**\n * Additional HTTP headers to include in the Dialogflow/proxy server API\n * request.\n */\n headers?: Array;\n }\n\n /** Event-based connector config. Set this for voice conversations. */\n eventBasedConfig?: {\n /**\n * Transport protocol to use for updates. Defaults to 'websocket' if none is\n * specified.\n */\n transport?: 'websocket'|'polling';\n\n /** Event-based library to use (i.e., Socket.io). */\n library?: 'SocketIo';\n\n /** Endpoint to which the connection will be established. */\n notifierServerEndpoint: string;\n }\n}\n```\n\nExample instantiation: \n\n```\nconst connector = new UiModulesConnector();\n\nconnector.init({\n channel: 'chat',\n agentDesktop: 'Custom',\n conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',\n apiConfig: {\n authToken: 'abc123',\n customApiEndpoint: 'https://my-dialogflow-proxy-server.com',\n }\n});\n```\n\nPrice disclaimer\n----------------\n\nIf you use UI modules, there is a cost associated with the underlying services, including the following:\n\n- [Pub/Sub](/pubsub/pricing)\n- [Memorystore for Redis](/memorystore/docs/redis/pricing)\n- [Cloud Run](/run/pricing)"]]
