教程: 定制 Web 聊天的大小和位置

本教程说明了如何通过在定制元素中呈现 Web 聊天来更改其大小和位置。

要获取本教程中描述的示例的完整工作版本，请参阅 watsonx Assistant Web 聊天的定制元素。

缺省情况下， Web 站点上的 Web 聊天界面呈现在主机 div 元素中，该元素的样式显示在页面上的固定位置。 如果要更改 Web 交谈的大小或位置，可以指定定制元素作为 Web 交谈的主机位置。 此主机元素用作主 Web 聊天界面和 Web 聊天启动程序的位置 (除非您使用的是定制启动程序)。

使用定制元素时，您还可以控制在打开或关闭 Web 聊天时 (例如，客户单击启动程序图标或最小化按钮时) 显示和隐藏 Web 聊天。 这使您有机会应用其他效果，例如打开和关闭动画。 您可以使用 addClassName () 和 removeClassName () 函数来控制主窗口的显示和隐藏。

要使用定制元素，请执行以下步骤:

1. 在 Web 站点代码中，定义要在其中呈现 Web 聊天的定制元素。 根据您正在使用的框架，有许多方法可以执行此操作。 一个简单的示例是定义一个具有标识的空 HTML 元素:

   <div id="WebChatContainer"></div>
   

2. 获取对定制元素的引用，以便可以在 Web 聊天配置中对其进行引用。 要获取参考，请使用对您正在使用的库有意义的任何机制。 例如，可以保存从 document.createElement()返回的引用，也可以使用查询函数在 DOM 中查找元素。 此示例使用我们为其分配的标识来查找元素:

   const customElement = document.querySelector('#WebChatContainer');
   

3. 在 Web 聊天嵌入脚本中，设置 element 属性，指定对定制元素的引用。

   window.watsonAssistantChatOptions = {
     integrationID: "YOUR_INTEGRATION_ID",
     region: "YOUR_REGION",
     serviceInstanceID: "YOUR_SERVICE_INSTANCE_ID",
   
     // The important piece.
     element: customElement,
   
     onLoad: function(instance) {
       instance.render();
     }
   };
   

4. 确保缺省情况下隐藏主 Web 聊天窗口。 在调用 render 之后，可以在 onLoad 事件处理程序中执行此操作。 您还必须添加处理程序以侦听 view:change 事件，以便客户可以在页面装入后打开和关闭 Web 交谈。 在我们的示例中，我们使用名为 HideWebChat 的 CSS 类来执行此操作 (请参阅 完整示例 以获取此类的定义):

   function onLoad(instance) {
     instance.render();
     instance.on({ type: 'view:change', handler: viewChangeHandler });
     instance.elements.getMainWindow().addClassName('HideWebChat');
   }
   

5. 创建处理程序以隐藏并显示主 Web 聊天窗口以响应 view:change 事件。 此示例仅显示并隐藏元素; 完整示例 显示了如何添加动画效果。

   function viewChangeHandler(event, instance) {
     if (event.newViewState.mainWindow) {
       instance.elements.getMainWindow().removeClassName('HideWebChat');
     } else {
       instance.elements.getMainWindow().addClassName('HideWebChat');
     }
   }
   

有关完整的工作代码，请参阅 watsonx Assistant Web chat 的定制元素 示例。