在 App 页面中添加悬浮图标和可拖动浮窗
浮动组件显示在 App 页面内容上方，可用于提供快捷入口或展示特定内容。您可以在页面的浮动组件区块中添加以下两种类型：
- 悬浮图标：用于快速跳转至在线客服、活动页面等指定位置。顾客滚动页面时，悬浮图标会自动淡出，并在停止滚动后重新淡入。
- 可拖动浮窗：由应用提供，可用于展示商品视频、组合优惠等内容。浮窗会持续显示在页面上，顾客可以自由拖动并调整其位置。
本指南将介绍浮动组件支持的页面及数量限制，以及如何添加和管理悬浮图标与可拖动浮窗，并说明可拖动浮窗在 App 中的显示方式。
支持浮动组件的页面与数量上限
【悬浮图标】和【可拖动浮窗】支持添加的页面有所不同：
- 【悬浮图标】支持以下页面：
- 首页
- 自定义页面
- 商品详情页
- 购物车页
- 商品分类页
- 商品列表页
- 搜索结果页
- 我的账户页
- 【可拖动浮窗】支持以下页面：
- 首页
- 自定义页面
- 商品详情页
- 购物车页
| 注意：快速加购面板不支持浮动组件，因此无法添加悬浮图标或可拖动浮窗。 |
每个页面可添加的浮动组件数量如下：
| 组件类型 | 数量上限 |
| 悬浮图标 | 1 个悬浮图标组件，每个组件最多包含 4 个悬浮图标。 |
| 可拖动浮窗 | 最多 3 个，包括已隐藏的浮窗。 |
注意：
|
在 App 页面中添加悬浮图标
如需在页面中添加悬浮图标，请按以下步骤操作：
- 进入要编辑的页面（例如商品详情页）的编辑器，在左侧组件列表中找到【浮动组件区块】，点击【+ 添加浮动组件】。
在弹出的面板中，选择【原生组件】标签页，然后在【基础组件】中选择【悬浮图标】。
注意：每个页面最多可添加 1 个悬浮图标组件。如果当前页面已有该组件，【悬浮图标】选项将无法选择。 （适用于首页以外的页面）在右侧的【悬浮图标】设置面板中，选择【内容来源】：
- 【同步自首页悬浮图标组件】：沿用首页悬浮图标组件的设置，无法单独调整当前页面的悬浮图标。
- 【独立设置】：单独配置当前页面的悬浮图标。
如需独立设置悬浮图标，在左侧【悬浮图标】组件下方，点击【+ 添加悬浮图标】，然后选择【悬浮图标】。
- 在右侧的【悬浮图标】设置面板中，配置以下内容：
- 【浮标名称】：输入图标名称，仅管理员可见。
- 【浮标位置】：选择图标在页面中的显示位置，例如【右下】。
- 【图片】：上传宽高比为 1:1 的图片，推荐尺寸为 240 × 240 像素，支持 .png、.jpg、.jpeg 或 .gif 格式。
- 【功能类型】：选择悬浮图标的功能，并完成对应设置：
- 【在线客服】：选择【在线聊天应用】，并设置是否开启【未读消息提示】。
- 【活动页面】：选择悬浮图标点击后要跳转的活动页面。
- 【发布计划】（可选）：设置【开始时间】和【结束时间】，或勾选【永不过期】。
- 完成设置后，点击【完成】。如需添加更多悬浮图标，可重复步骤 4–5。
注意：
|
在 App 页面中添加可拖动浮窗
可拖动浮窗由已安装的应用提供。只有支持可拖动浮窗功能的应用组件才会显示在可选列表中。
如需添加可拖动浮窗，请按以下步骤操作：
- 进入要编辑的页面的编辑器，在【浮动组件区块】中点击【+ 添加浮动组件】。
- 在弹出的面板中，选择【应用】标签页，然后选择要添加的应用组件。
- 根据需要完成该应用组件的设置。
注意：
|
在 App 页面中管理可拖动浮窗
添加可拖动浮窗后，您可以在编辑器的【浮动组件区块】中进行以下操作：
- 调整顺序：调整浮窗在组件列表中的排列顺序。当多个浮窗重叠时，列表中排序靠后的浮窗会显示在上层。
- 隐藏浮窗：隐藏后，顾客将无法看到该浮窗，但它仍计入每个页面最多 3 个的数量上限。
- 移除浮窗：移除后，该浮窗将不再计入数量上限，同时清除顾客此前保存的拖动位置。
保存并发布浮动组件设置
浮动组件的设置会与页面中的其他组件一同保存和发布。完成设置后，您可以点击【预览 App】查看效果，或点击【发布到 Snaplook】进行测试。确认效果符合预期后，点击【发布到正式 App】，使设置正式生效。
可拖动浮窗在 App 中的显示方式
顾客浏览 App 页面时，可拖动浮窗遵循以下显示规则：
- 初始位置：浮窗首次显示在应用开发者设定的位置，并自动避开顶部导航栏、底部应用栏和手机系统区域，避免遮挡这些界面元素。
- 拖动与位置记忆：顾客可以将浮窗拖动至页面中的任意可用位置。App 会自动保存浮窗最后停留的位置，顾客再次进入该页面时，浮窗会显示在上次保存的位置。
- 商品详情页的位置同步：由于所有商品详情页模板共用同一组浮动组件设置，顾客在某个商品详情页调整浮窗位置后，浏览其他商品详情页时，浮窗也会显示在相同位置。
- 弹窗与全屏显示：根据应用提供的功能，顾客可以打开弹窗或抽屉，也可以将浮窗切换为全屏显示。进入全屏后，可点击关闭按钮退出；Android 用户也可以按返回键退出。
- 加载失败提示：如果应用的弹窗内容加载失败，App 会自动关闭弹窗，并显示 "加载失败，请重试"。
卸载应用对浮动组件的影响
卸载提供可拖动浮窗的应用后，相关组件会受到以下影响：
- 组件不再显示：刷新页面或重新进入页面后，该应用提供的组件将不再显示在编辑器和 App 中。
- 页面设置暂时保留：组件原有的设置、排列顺序和隐藏状态会暂时保留。
- 保存页面可能移除组件：如果在应用卸载期间保存相关页面，该组件可能会从页面设置中移除。即使之后重新安装应用，也无法恢复已移除的组件及其设置。
| 注意：如果您计划重新安装该应用，建议在重新安装前不要保存包含相关组件的页面，以便重新安装后恢复原有设置。 |
浮动组件常见问题
问题 1：为什么【应用】标签页中没有显示已安装的应用组件？
只有支持可拖动浮窗功能的应用组件才会显示在【应用】标签页中。如果应用组件需要嵌入页面内容，请在页面主体区域点击【添加组件】进行添加。
问题 2：隐藏的可拖动浮窗是否计入数量上限？
是的。隐藏的可拖动浮窗仍计入每个页面最多 3 个的数量上限。如需释放名额，请移除该浮窗。
问题 3：可以调整可拖动浮窗的大小或初始位置吗？
不可以。浮窗的大小和初始位置由应用开发者设定，无法在编辑器中修改。不过，顾客可以在 App 中拖动浮窗，App 会自动保存调整后的位置。
问题 4：移除可拖动浮窗后重新添加，顾客之前保存的位置还会保留吗？
不会。移除浮窗时，顾客之前保存的拖动位置也会被清除。重新添加后，浮窗会显示在应用开发者设定的初始位置。