Web 聊天开发概述

如果您熟悉 JavaScript 代码，那么可以使用 Web 聊天 API 来定制和扩展 Web 聊天。您还可以使用 WebView 将 Web 聊天嵌入到移动应用程序中。

有关 Web 聊天 API 的详细参考信息，请参阅 Web 聊天开发者文档。

要将 Web 聊天窗口小部件添加到 Web 站点或移动应用程序中的 WebView，您只需在 HTML 源中嵌入生成的脚本元素 (有关嵌入脚本的更多信息，请参阅在页面上嵌入 Web 聊天)。在此嵌入脚本中，您可以使用 Web 聊天 API 来定制或扩展 Web 聊天。

Web 聊天 API 由多个组件组成:

配置对象: 嵌入脚本定义名为 watsonAssistantChatOptions 的配置对象，该对象指定 Web 聊天窗口小部件的配置对象。通过编辑配置对象，您可以在呈现 Web 聊天之前定制其外观和行为。有关可用配置选项的更多信息，请参阅 Web API 参考中的配置选项对象。
实例方法: Web 聊天实例方法提供对 Web 聊天窗口小部件的低级别控制。您可以使用实例方法来实现定制行为，例如更改 Web 聊天窗口小部件的打开方式，显示和隐藏内容以及设置身份信息。有关可用实例方法的更多信息，请参阅 Web 聊天 API 参考中的方法和属性列表。
事件: Web 聊天事件系统使 Web 站点能够响应 Web 聊天事件 (例如，打开或关闭 Web 聊天窗口，发送或接收消息)。通过预订事件，您可以实现定制行为，甚至可以拦截和修改消息内容。有关事件系统的更多信息，请参阅 Web 聊天 API 参考中的事件。

如果要使用 Web 聊天 API 来定制 Web 聊天实现，那么不必从头开始。提供了一些教程，用于显示常见 Web 聊天定制的示例。有关更多信息，请参阅 Web 聊天开发教程。

开发任务

您可以使用 Web 聊天 API 通过以下方式定制和扩展 Web 聊天:

Web 聊天样式和内容

定制 Web 聊天的外观
定制主屏
定制字符串
支持全局受众

打开，关闭和呈现 Web 聊天窗口

替换缺省启动程序
保持 Web 聊天始终处于打开状态
更改 Web 聊天的大小或位置
将 Web 聊天添加到移动应用程序

定制对话

拦截和修改消息
呈现定制响应类型
实施联系中心集成

管理数据

管理用户身份信息

安全和管理

保护 Web 聊天
控制 Web 聊天版本

有关 Web 聊天集成的更多示例，请参阅此处。

Web 聊天样式和内容

定制 Web 聊天的外观

如果要在 Web 交谈设置中的样式选项卡上提供的选项之外定制 Web 交谈的样式和外观，那么可以通过选择其他 Carbon Design 主题来执行此操作。

受支持的主题是由 IBM Carbon Design定义的颜色主题。要设置 Carbon 主题，请使用 carbonTheme 配置选项。

您还可以在主题中设置各个变量以定制特定 UI 元素。例如，交谈窗口中显示的文本使用字体 IBMPlexSans, Arial, Helvetica, sans-serif。如果要使用其他字体，可以使用 updateCSSVariables() 实例方法来指定该字体。

定制主屏

主屏幕将问候客户，并 (可选) 显示建议的对话启动者列表。您可以定制主屏的样式和内容:

要向主屏幕添加元素，您可以使用 writeableElements.homeScreenAfterStartersElement 主题变量来定义定制 HTML:
```
instance.writeableElements.homeScreenAfterStartersElement.innerHTML =
  '<div class="MyCustomClass">This is my custom element</div>';
```
示例: 有关显示如何将定制元素添加到主屏幕的工作示例，请参阅 watsonx Assistant Web 聊天的主屏幕定制元素。
要更改主屏幕样式，请使用 CSS 帮助程序类。

定制字符串

您可以定制用于定义 Web 聊天所显示的各种标签和硬编码短语的字符串。要定制字符串，请使用 updateLanguagePack() 实例方法来替换当前语言包中的字符串。有关更多信息，请参阅语言。

支持全球受众

缺省情况下，Web 聊天显示的字符串为英语。要更改为其他语言，请使用 updateLanguagePack() 实例方法将当前语言包替换为其中一个可用的翻译语言包。有关更多信息，请参阅在 Web 聊天中支持全局受众。

打开，关闭和呈现 Web 聊天窗口

替换缺省启动程序

为了更好地与 Web 站点集成，您可能希望将内置启动程序图标替换为用于打开 Web 聊天的其他机制。要隐藏缺省启动程序，请将 showLauncher 配置选项设置为 false。要根据其他一些交互打开 Web 聊天，请使用 openWindow 实例方法。

教程: 有关说明如何实现定制启动程序的教程，请参阅使用定制启动程序。

保持 Web 聊天始终处于打开状态

如果要使 Web 交谈始终在您的页面上打开，请使用 openChatByDefault 配置打开以在交谈窗口打开的情况下呈现该页面，并使用 hideCloseButton 选项来阻止客户关闭该页面。

更改 Web 聊天的大小或位置

您的 Web 站点设计可能要求您更改 Web 聊天窗口在 Web 站点上呈现的位置和方式。例如，您可能希望它以不同大小显示在页面上的不同位置，或者嵌套在页面上的另一个元素中。

要更改 Web 聊天窗口的大小，可以使用 updateCSSVariables() 实例方法来修改 CSS 样式。

如果需要更改 Web 聊天窗口的位置，或者需要更改超出 CSS 中允许的限制的大小，那么可以使用定制 DOM 元素来包含 Web 聊天窗口。为此，请使用 element 配置选项。

教程: 有关显示如何在定制元素中呈现 Web 交谈的教程，请参阅教程: 定制 Web 交谈的大小和位置。

将 Web 聊天添加到移动应用程序

您可以将 WebView 与 JavaScript 网桥配合使用，以将 Web 聊天添加到移动应用程序。有关更多信息，请参阅将 Web 聊天添加到移动应用程序。

定制对话

拦截和修改消息

通过预订事件，代码可以拦截客户与助手之间发送和接收的消息，甚至可以修改其内容。

如果要在将客户的消息发送到助手之前拦截该消息，请预订 pre:receive 事件。例如，您可能希望从消息文本中除去个人可标识信息，或者向消息有效内容添加上下文变量。

如果要在向客户显示来自助手的入局响应之前拦截该响应，请预订 pre:send 事件。例如，您可能想要添加特定于 Web 聊天的格式，链接或其他元素。

教程: 有关显示如何使用 pre:receive 事件来拦截和修改入局消息的教程，请参阅教程: 在 Web 聊天中实现定制选项按钮。

呈现定制响应类型

如果助手使用定制 (user_defined) 响应类型发送专用响应，那么您可以实现定制视图以在 Web 交谈窗口中显示这些响应。要执行此操作，请预订 customResponse 事件，此事件在每次收到 user_defined 响应时触发。在事件处理程序方法中，然后可以读取响应的内容，并使用您自己的元素来呈现输出。

教程: 有关显示如何将定制响应类型作为缺省选项响应的替代项的教程，请参阅教程: 在 Web 聊天中实现定制选项按钮。

实施联系中心集成

您可以使用其中一个 Web 聊天入门模板工具包与联系中心 (服务台) 平台集成，但作为内置 watsonx Assistant 集成提供的平台除外。功能齐全的参考实现可用于多个联系中心平台; 此外，您可以使用入门模板工具包来开发与您选择的平台的定制集成。

有关更多信息，请参阅添加联系中心支持。

管理数据

管理用户身份信息

Web 聊天将用户标识与它发送给助手的每条消息相关联; 此用户标识用于基于用户的计费和其他用途。您可以允许 Web 聊天为每个用户生成匿名标识，也可以自己控制用户标识。

根据您是否已为 Web 聊天启用安全性，可以使用 updateUserID 实例方法或 updateIdentityToken 方法来指定用户身份信息。

有关如何指定用户身份信息以及如何使用用户身份信息的更多信息，请参阅在 Web 聊天中管理用户身份信息。

安全和管理

保护 Web 聊天

要保护 Web 聊天，可以使用 JSON Web 令牌 (JWT) 来认证用户并加密专用数据。有关更多信息，请参阅保护 Web 聊天。

控制 Web 聊天版本

IBM Cloud 托管的 Web 聊天代码会定期使用改进和新功能进行更新。缺省情况下，嵌入脚本会自动使用最新版本的 Web 聊天。为了避免可能影响 Web 站点的意外更改，您可能希望控制 Web 站点所使用的 Web 聊天版本，使您有机会在产品中部署之前测试每个新版本。为了避免在发布新版本时发生意外更改。

有关 Web 聊天版本控制的更多信息，请参阅控制 Web 聊天版本。