自定义聊天界面

聊天界面控制客户体验中的视觉和文本呈现,而入口点控制购物者如何在不同页面和设备上发现它。这两个区域都提供预览,但最终验证必须在真实店面中完成。 本指南涵盖当前的头像、颜色、形状、可选文本、购物车、图标、入口点和页面规则控件,但不假设每家公司或每个集成都提供完全相同的选项。 这如何融入 Humind AI Agent 是面向客户的助手的配置空间。Knowledge 和目录提供事实;Guidance 塑造响应行为;Tools 添加操作...

聊天界面控制客户体验中的视觉和文本呈现,而入口点控制购物者如何在不同页面和设备上发现它。这两个区域都提供预览,但最终验证必须在真实店面中完成。

本指南涵盖当前的头像、颜色、形状、可选文本、购物车、图标、入口点和页面规则控件,但不假设每家公司或每个集成都提供完全相同的选项。

这如何融入 Humind

AI Agent 是面向客户的助手的配置空间。Knowledge 和目录提供事实;Guidance 塑造响应行为;Tools 添加操作;Escalation 定义人工支持;测试界面让你能够在部署前检查结果。

更改可能会影响许多对话,因此请在每次有意义的更新后测试具有代表性的购买和支持场景。仅仅视觉上正确的聊天还不够,还要同时验证回答、产品上下文、可用操作和移交行为。

开始之前

访问权限:需要具有 Agent 配置写入权限。某些高级设置仅限 Humind 管理员使用,并且 Shopify 特定控件仅对已连接的 Shopify 公司显示。

  • 准备已获批准的徽标或头像资源以及品牌颜色。
  • 在选择数值之前,检查颜色对比度和移动店面的限制。
  • 列出启动器应显示、隐藏或自定义的页面类型。

分步工作流程

  1. 设置视觉基础

    打开 AI Agent,然后打开聊天界面。从图库中选择头像,或上传预定资源。设置界面和文本颜色、气泡圆角、加入购物车的背景色和文本颜色,以及按钮圆角。

    编辑时使用预览,并验证每个彩色组件中的可读对比度。此页面上的设置会实时保存,因此请等待保存反馈,并避免快速进行相互矛盾的更改。

  2. 检查高级呈现选项

    当前界面可以选择使用自定义 Agent 名称、主页标题和主页问候语。它可以显示或隐藏闪光图标、礼品查找图片、预设问题以及加入购物车按钮。Shopify 公司可以通过可用的目标控件选择购物车操作是转到购物车还是去结账。

    空的自定义主页值可以有意隐藏该行。请记录这一决定,以免以后将空白结果误认为内容丢失。

  3. 配置默认入口点

    打开 AI 小部件,然后打开入口点。启用默认启动器,并在可用时选择其类型、位置、标签、头像可见性、气泡大小、徽标处理方式以及水平或垂直偏移。在桌面端和移动端之间切换,以检查两种配置。

    确保启动器易于发现,同时不要遮挡商店导航、同意控制、产品购买操作或无障碍小部件。

  4. 仅在需要时添加页面专用规则

    页面规则可以定位受支持的页面类型,并将移动端或桌面端可见性设置为隐藏、继承或自定义。自定义规则可以更改所选页面上下文中的启动器呈现。产品页面规则还可以显示当前的自动产品提问选项。

    避免规则重叠。使用预览上下文选项卡比较默认结果和页面专用结果,并删除过时规则,而不是无限叠加例外。

  5. 验证无障碍性和实时布局

    在预览中测试键盘访问、文本对比度、打开和关闭、较长的翻译文本、窄屏、产品页面和购物车行为。然后进行部署,并在私密浏览器中的真实店面上重复这些检查。

    如果实时结果不同,请先检查安装、过期的店面资源、公司上下文和页面规则匹配情况,再次更改设计之前先排查这些因素。

权限和重要注意事项

  • 预览不包含每一种店面主题、覆盖层或响应式交互。
  • 高级选项和 Shopify 特定选项是有条件的;仅记录对当前公司可见的控件。
  • 实时保存的设置可能会在保存后立即影响测试。
  • 页面规则应在桌面端和移动端之间保持相互易于理解。

验证结果

在认为工作完成之前,请使用此检查清单:

  • 头像、文本、界面和购物车颜色符合团队的对比度标准。
  • 默认和页面专用的入口点预览与已记录的规则集一致。
  • 较长标签、翻译、键盘焦点和移动端布局仍然可用。
  • 实时店面显示一个正确的启动器,且不会遮挡关键控件。

故障排查

视觉更改未显示

等待页面保存反馈,确认当前公司,刷新预览,并测试新的店面会话。检查是否有页面专用规则覆盖了默认设置。

启动器出现在错误的位置

检查设备选择、位置、偏移量以及匹配的页面规则。确认不是另一个重复的小部件安装导致了意外实例。

文本或按钮难以阅读

重新检查界面和购物车控件的背景色与文本颜色。在发布修正后的设计之前,请以桌面端和移动端尺寸测试实际标签和翻译文本。

相关指南

这篇文章对您有帮助吗?