美洽怎么设置访客端聊天窗口画中画开关？

在美洽中，访客端聊天窗口的画中画（小窗/悬浮最小化）开关一般可以在管理后台的聊天窗口或外观设置里找到并开启或关闭；如果需要更精细的控制，可以在接入页面的脚本配置或移动 SDK 的初始化参数中通过对应属性或方法切换，保存后在页面或 App 上刷新验证即可

先说清楚什么是“画中画”——别把概念混在一起

很多人把“画中画”这个名字和浏览器的视频画中画混淆了。在客服的语境里，常说的“画中画”其实更像是一个悬浮小窗/最小化浮窗：当访客与客服交谈时，聊天窗口可以从固定面板最小化成一个可以拖动、始终悬浮在页面角落的小气泡或小窗，这样访客在浏览页面其他内容时还能随时恢复聊天。

换句话说，它是一种 UI 行为/展示形式，而不是浏览器层面的 PIP（Picture-in-Picture）视频功能。了解这点很重要，接下来讲的设置和代码都是围绕“悬浮最小化窗”展开的

大方向：有三条路可以控制这个开关

• 通过美洽管理后台（最简单、适合非开发人员）
• 通过前端接入代码（适合需要动态控制或者按页面差异开启/关闭的场景）
• 通过移动端 SDK（iOS / Android，适合 App 场景）

为什么要知道三种方式？

因为企业场景不同：客服需要在部分页面屏蔽悬浮窗（比如支付页）；或者想在访客离开聊天并继续浏览时保持小窗提示；又或者 App 版本需要统一由产品决定。这三种路径覆盖了绝大部分使用场景。

方法一：通过美洽管理后台设置（面向大多数用户）

这是最常见也最直观的方式。界面设计会随版本迭代有小幅变动，下面按通用逻辑写出可操作步骤，实际界面文字可能略有差别

• 登录：进入美洽（Meiqia）管理后台，使用管理员账号登录。
• 进入渠道或设置：在左侧菜单找到“渠道与工作台”、“设置”或“聊天窗口”一类条目（不同版本命名会有差异）。
• 找到外观或聊天窗口配置：在聊天窗口相关配置中，寻找“窗口样式”、“交互行为”或“外观设置”。
• 打开/关闭画中画（悬浮最小化）：会有一个类似“允许最小化为悬浮窗”、“启用浮动小窗”或“画中画模式”的开关，切换到需要的状态。
• 保存并发布：确认保存配置，部分版本需要点击“发布”或“生效”按钮。
• 校验：在访客侧页面清缓存或用无痕窗口打开页面，触发聊天操作，观察是否能最小化为悬浮小窗。

小贴士：如果找不到对应选项，可能是账号权限限制或当前套餐不支持该功能，这时候可以联系美洽销售或技术支持确认账号权限与功能包

方法二：通过前端接入代码控制（更灵活）

很多企业会在自己的网站上使用美洽的前端脚本（Web Widget），有时需要按页面或按用户状态动态开启或关闭悬浮小窗。这种场景下用代码控制最合适。

基本思路（通用）

• 在站点引入美洽提供的脚本后，初始化时可以传入配置项控制界面行为。
• 如果需要页面运行时切换，调用 SDK/脚本暴露的方法来开启或关闭悬浮行为。
• 如果没有直接开关，可以通过 CSS 控制最小化按钮或浮窗的显示与否，或拦截最小化事件来实现等价效果。

示例（伪代码思路，实际 API 名称请以你接入的 SDK 文档为准）

下面是一个通用的伪示例，用来表达思路，而不是保证与某一版本 SDK 完全一致

/* 初始化时禁用浮动最小化 */
window.MeiqiaInit && MeiqiaInit({
  widget: {
    allowFloatMinimize: false  // 示例字段：禁止最小化为悬浮窗
  }
});

/* 页面运行时根据条件开启浮动 */
function enableFloat() {
  if (window.Meiqia && Meiqia.setOption) {
    Meiqia.setOption({ allowFloatMinimize: true });
  } else {
    // 备用：通过添加样式或显示挂件按钮实现
    document.querySelector('.mq-minimize-btn')?.classList.remove('hidden');
  }
}

注意：上面 key 名称（allowFloatMinimize、setOption）仅示例；请参考你在使用的美洽接入文档中的真实字段。很多时候，提供的是类似“minimizedMode”、“floatable”之类的命名。

用 CSS 做“兜底”方案

如果没有 API 或文档不清楚，可以通过观察前端生成的 DOM，针对最小化后的浮窗选择器用 CSS 控制显示或隐藏：

/* 隐藏悬浮小窗（兜底方案） */
.mq-float-widget { display: none !important; }

这种做法实现速度快，但需要注意：美洽升级、选择器变化或类名改变会导致失效；此外强制隐藏可能影响可访问性与用户体验。

方法三：移动 App（iOS / Android）通过 SDK 设置

如果你的访客端是 App，画中画通常体现在“聊天最小化为悬浮窗”或“后台保持小窗通知”。美洽移动 SDK 通常在初始化时或通过 SDK 接口提供控制。

• iOS：在初始化 SDK 的配置对象中查找类似 enableFloating、allowMiniWindow 的字段，或调用对应的 set 方法。
• Android：在 SDK 的 builder 或 Config 中设置，或在 Activity/Fragment 中通过调用 SDK 提供的方法来开启/关闭浮窗。
• 注意权限：某些悬浮窗在 Android 需要 SYSTEM_ALERT_WINDOW 或类似权限，App 需要申请并说明用途。

如果不确定字段名，搜一下 SDK 文档里“floating”、“mini window”、“minimize”这些关键词，或者直接联系美洽的技术支持/工程师获取示例代码。

测试与验证：如何确认开关真的生效

• 在管理后台修改后，用隐身窗口或清除缓存的浏览器打开目标页面，触发聊天，注意最小化行为。
• 在前端代码改动后，使用开发者工具检查是否已向 SDK 传递新的配置（Network / Console）。
• 在移动端，用安装包或调试版测试，确保权限、初始化参数正确；必要时对低版本机型做回归。
• 多场景测试：不同分辨率、手机、浏览器、登录状态（已登录/未登录）下测试行为一致性。

常见问题与排查指南

• 开关没有生效：检查是否保存并发布了配置；检查是否是缓存导致（清缓存或换浏览器试）；检查账号是否有权限。
• 只在部分页面生效：可能你的站点在某些页面上加载了不同版本的脚本，或页面有覆盖样式/拦截事件，检查页面是否引入了多个美洽实例。
• 移动端没效果：检查 SDK 版本、初始化时机（是否在 Application 或主要 Activity 中正确初始化）、以及权限配置。
• 样式错位或不可拖动：可能是页面的 z-index 或 CSS 冲突，使用开发者工具定位具体样式并修正覆盖规则。

表格：三种方式对比一目了然

如果找不到对应选项怎么办？几条实用建议

• 先确认你在用的美洽版本/套餐是否包含该功能；
• 在管理后台的帮助中心或文档页搜索关键词（悬浮、最小化、画中画、浮窗）；
• 联系美洽客服或技术支持，说明你要实现的场景，索要对应版本的操作说明或代码示例；
• 如果是开发团队，可请求美洽提供最新 SDK 文档或示例工程，以便直接参考官方字段名与示例。

一些设计与体验建议（不完全是技术问题，但很重要）

• 不要在支付、认证等敏感页面启用悬浮窗，避免干扰转化；
• 确保悬浮窗可被轻松关闭或恢复，避免遮挡重要信息；
• 在小屏设备上考虑浮窗大小与位置，避免覆盖交互核心区域；
• 为悬浮窗设置合理的超时时间或提醒策略，防止一直占位。

嗯，差不多就是这些了——总的思路是：先到美洽后台找开关，找不到就看 SDK 接入代码，实在不行用 CSS 临时兜底，最后多做测试并关注权限与兼容性。如果还不清楚某一步的具体字段名或接口，贴出你在用的接入方式（Web 脚本/SDK 版本）我可以帮你对照检查，或者你也可以直接问美洽技术支持拿官方示例代码