图标位置自定义

核心功能

1 独立可调的AI智能体悬浮图标位置控制

本次升级的核心功能是为AI智能体助手窗口增加了灵活的图标位置自定义设置。默认状态下，智能体图标以悬浮窗形式固定在网站右下方。为避免与网站原有的“在线客服”、“返回顶部”等其他悬浮元素在视觉和交互上产生冲突，现允许管理员在PC端和移动端分别独立地设置图标距离浏览器视口“右侧”和“底部”的像素（px）值，从而精确调整图标在屏幕上的最终位置。

2 响应式分端配置，适配多种设备与交互场景

功能将位置设置区分为“PC端位置”和“移动端位置”两个独立配置区域。这充分考虑到不同终端设备的屏幕尺寸、用户交互习惯（如移动端单手操作热区）以及页面元素布局的差异性。管理员可以为桌面端用户和手机端用户分别设定最优的悬浮位置，例如在PC端设置较大的右侧间距以避免与侧边栏冲突，在移动端则适当调整到底部中央区域以便于拇指点击，实现真正的响应式布局优化。

3 一站式AI智能体核心功能配置中枢

位置设置功能集成在统一的“AI智能体”配置页面中。此页面是智能体功能的控制中心，除位置设置外，还集中了其他核心开关与选项，包括：启用“AI搜索”功能、设置“自动进入AI与投稿”、配置“仅用知识库”模式、选择“大模型”（如阿里通义）、以及关联用于收集用户信息的“表单”。管理员可在此一站式完成智能体的启用、能力定义、交互逻辑与视觉呈现的所有配置。

功能截图与界面解析

【AI智能体综合配置与位置设置界面】

智能体功能的总控台与布局微调中心： 此界面是“应用”->“AI智能体”的配置主页面。整体为白色背景，左侧是深色导航菜单栏，当前选中“应用”下的“AI智能体”。右侧是核心配置区域，分为功能开关、模型选择、表单关联和位置设置四大板块。在功能开关区域，可以看到“AI搜索”、“自动进入AI与投稿”、“仅用知识库”三个开关选项。下方是“大模型选择”下拉菜单（显示为“阿里通义”）和“关联表单”设置项。界面的核心亮点是下方两个被红色方框突出标注的位置设置区域。第一个区域是“pc端位置”，包含“靠右”和“靠底”两个输入框，示例值分别为“11 px”和“65 px”。第二个区域是“移动端位置”，包含“右侧”和“底部”输入框，示例值分别为“15 px”和“45 px”。每个输入框后都明确标注了“px”（像素）单位。页面最底部是蓝色的“保存”和“获取AI智能体代码”按钮。整个界面设计直观，将核心的交互功能配置与视觉布局微调功能整合在一起，便于管理员一站式管理。

适用行业与场景

适用对象	典型应用场景	核心价值
电商与零售网站	电商网站页面元素密集，通常已有“在线客服”、“购物车悬浮球”、“领券浮窗”等多种悬浮元素。AI智能体图标的默认右下角位置可能与这些元素重叠，影响用户体验和点击率。通过自定义位置，可将其调整到无冲突区域，确保所有交互入口清晰可用。	优化页面布局，提升用户交互效率。避免多个悬浮按钮相互遮挡，确保AI助手、客服、购物车等关键入口都能被用户快速发现和点击，减少误操作，提升页面整洁度和功能可用性。
内容资讯与媒体平台	内容网站通常有“分享”、“目录导航”、“夜间模式”等悬浮工具。AI智能体作为内容问答或互动入口，其理想位置可能与既有工具不同。管理员需要根据页面布局和用户阅读习惯，为AI图标寻找一个既醒目又不打扰阅读的固定位置。	平衡功能可见性与阅读沉浸感。将AI助手图标调整到侧边或底部合适位置，既能在用户需要时提供及时的智能交互（如文章总结、问答），又能避免在用户沉浸阅读时造成视觉干扰，保持页面的干净与专注。
企业官网与SaaS产品后台	企业官网或SaaS后台可能有固定的导航栏、页脚或功能菜单。AI智能体作为辅助助手或内部知识查询入口，其位置需要与现有界面框架和谐共存。不同的终端（员工用PC，客户用手机）可能需要不同的位置策略。	无缝集成，增强产品专业度与易用性。通过精确的像素级调整，将AI助手图标完美嵌入到产品现有界面框架中，使其看起来像是产品原生的功能部件，提升产品整体的专业感和一体化体验。分端设置满足了不同用户群体的使用场景。
教育、政务等对可访问性有要求的网站	这类网站用户群体广泛，需考虑不同人群的使用习惯，特别是要避免悬浮元素遮挡主要内容或影响屏幕阅读器的使用。需要将AI助手图标放置在一个标准、不突兀且易于点击的位置。	提升网站可访问性与包容性设计。允许管理员将可能产生干扰的悬浮图标调整到标准化位置，确保网站主体内容清晰可读，辅助功能不被干扰，满足更广泛用户群体的访问需求，体现社会责任感。

对比优势（与固定位置或无法调整的方案相比）

解决悬浮元素冲突，实现个性化页面布局

固定于右下角的方案常与网站固有的“在线客服”、“反馈”等悬浮按钮重叠，造成视觉混乱和点击困难。本功能允许自由调整位置，使管理员能够根据网站实际布局，为AI智能体图标寻找“最佳栖息地”，避免元素打架，实现页面的和谐统一与功能的最大化利用。

像素级精准控制，满足精细化运营需求

不同于只能选择“左上”、“右下”等几个固定方位的方案，本功能支持输入具体的像素值进行微调。这使得调整可以非常精确，例如从默认的“靠右：0px”调整为“靠右：20px”，以刚好避开侧边栏的边缘阴影。这种像素级的控制能力，满足了品牌对视觉细节和用户体验的极致要求。

分端独立配置，实现真正的响应式适配

许多方案的悬浮位置在PC和移动端是联动的，或自适应效果不佳。本功能允许为PC端和移动端设置完全不同的位置参数。例如，PC端可置于右下角，而考虑到移动端拇指操作热区，可将其调整到底部中央偏右位置。这种分端独立配置的能力，确保了在不同设备上都能提供最优的用户交互体验。

配置集成度高，一站式完成功能与样式部署

将位置设置与AI智能体的核心功能开关、模型选择、知识库配置集成在同一界面。管理员无需在多个分散的“主题设置”、“插件设置”、“脚本设置”页面中来回切换，即可一站式完成从“是否启用”、“有什么能力”到“长什么样、放哪里”的所有配置，极大地提升了部署和管理的效率。

标准操作流程（以管理员调整AI图标位置避免冲突为例）

1

【进入配置界面】导航至AI智能体设置页面

登录网站管理后台。在左侧主导航栏中找到并点击“应用”菜单。在展开的应用列表中，找到并点击“AI智能体”。系统将进入AI智能体的主配置界面。在此界面中，除了可以配置AI搜索、大模型等核心功能外，页面中下部即可找到“pc端位置”和“移动端位置”的设置区域。

2

【分析冲突与确定目标位置】预览网站并评估现有布局

打开网站的前台页面，检查当前AI智能体图标（如果已启用）与页面其他元素（如在线客服图标、侧边栏、固定导航栏等）是否存在重叠、距离过近等冲突。分别在PC浏览器和手机浏览器（或开发者工具的移动端模拟模式）下进行预览。根据冲突情况和设计美学，确定在PC端和移动端希望将图标调整到的目标位置。

3

【输入像素值进行调整】在设置区域输入具体数值

返回AI智能体设置后台。在“pc端位置”区域，向“靠右”输入框内填入图标距离浏览器窗口右侧边缘的像素值（例如，为避免与右侧的客服图标冲突，可输入“30”）。向“靠底”输入框内填入距离底部的像素值（例如“20”）。同样，在“移动端位置”区域，为“右侧”和“底部”输入框填入适合手机屏幕的数值（例如“15”和“45”）。数值越大，图标距离边缘越远。

4

【保存并验证效果】保存设置并查看前台效果

完成所有位置数值的输入后，滚动到页面底部，点击蓝色的“保存”按钮。保存成功后，分别用PC和手机访问网站前台，查看AI智能体悬浮图标的位置是否已按照设定调整到位。检查是否成功避免了与其它元素的冲突，位置是否符合预期。如果仍有偏差，可返回第3步继续微调数值，直至达到最佳效果。