美洽怎么设置访客端聊天窗口红点提醒？
美洽访客端的聊天窗口红点提醒可以用两种方式实现：一是在美洽后台启用并配置内置的未读角标提醒，二是在访客端通过 SDK 监听新消息并自行显示角标，结合本地存储和开放窗口清除未读即可保持一致，同时可定制颜色、位置与显示规则，必要时配合服务端未读计数保证多端同步。遇到问题联系美洽支持协助排查。并查看文档细节。
先把概念讲清楚：红点到底是啥
红点其实就是一个视觉信号，告诉访客「有我还没看到的事」。和手机上的未读消息角标类似，聊天窗口里的红点通常代表未读消息或客服回复未被查看。弄清楚这一点很重要，因为实现方法会根据你想表达的“未读”含义不同而变。
常见的红点触发场景
- 收到新消息但访客没打开聊天窗口：最常见，也最直观的场景。
- 客服给访客留言或转接后未被查看：属于后端产生的未读，需要和服务端保持一致。
- 离线消息/系统通知：比如客服下线后留下的消息，或工单更新。
- 会话被标记或有新的工单回复：这类需要结合业务状态来决定是否显示红点。
两条路径：后台开关（优先）与客户端自建（灵活）
实务上有两种路线可以走：一是使用美洽后台提供的内置角标/未读提醒功能，优点是省力、与美洽服务端一致；二是自己在访客端通过 SDK 或脚本实现角标，优点是高度可定制，能做更复杂的交互和样式。两者可以并存：后台负责未读计数，客户端负责表现层。
方式一：在美洽后台启用内置红点（推荐先试）
美洽控制台通常会提供聊天窗样式和提醒相关设置（不同版本界面位置会有差异）。操作思路：
- 登录美洽客服后台。
- 查找“渠道管理 / 渠道设置 / 聊天窗口”或“客服设置 / 界面与提醒”之类的入口。
- 找到与“未读消息角标”、“对话提醒”或“访客端角标”相关的选项，开启并配置颜色、位置、是否在移动端显示等。
- 保存并在站点上刷新脚本，让新的配置生效。
如果你遇到界面差异或找不到对应项，建议使用后台的搜索功能或直接联系美洽客服核对当前控制台名称与位置。
| 设置项 | 含义 / 建议值 |
| 角标开关 | 开启：让美洽自动管理未读角标；关闭：客户端管理 |
| 颜色 / 大小 / 位置 | 按品牌定制，注意对比度与可访问性 |
| 移动端显示 | 勾选后在移动设备上也显示角标 |
| 未读策略 | 是否把系统消息也计入未读；是否统计会话级别 |
方式二：在访客端通过 SDK 或脚本自建红点（更灵活）
如果你想完全掌控红点的样式、显示规则，或者后台没有满足的配置，就在访客端实现。思路很简单：检测“新消息事件”，维护一个未读计数或布尔值，根据它显示或隐藏角标；当访客打开聊天窗口或查看消息时清零。
核心要点（Feynman 风格的四步）
- 要知道什么时候增加：SDK 的新消息回调或 WebSocket 消息到达时。
- 要知道什么时候清除：访客主动打开窗口、点击会话或滚动到最新消息时。
- 要保持状态：本地存储（localStorage）或 session 存储，必要时后端同步未读计数。
- 要展示样式：用一个小的圆点/数字徽章，注意响应式与可访问性。
Web 端实现示例（思路伪代码）
下面的是一个简化的伪代码，目的是让你看懂整个流程，而不是直接复制粘贴到生产环境。实际调用要参考你接入的美洽 SDK 事件名和 API。
/* 初始化 */
let unread = Number(localStorage.getItem('meiqia_unread') || 0);
renderBadge(unread);
/* SDK 监听：收到新消息 */
meiqia.on('message', (msg) => {
if (!isChatOpen()) {
unread += 1;
localStorage.setItem('meiqia_unread', unread);
renderBadge(unread);
}
});
/* 访客打开聊天窗口时 */
function onChatOpen() {
unread = 0;
localStorage.setItem('meiqia_unread', unread);
renderBadge(unread);
/* 如需告知服务端，将未读状态同步 */
// api.clearUnreadForVisitor(visitorId);
}
/* renderBadge：展示/隐藏角标 */
function renderBadge(count) {
const badge = document.querySelector('#mq-badge');
if (!badge) return;
if (count > 0) {
badge.textContent = count > 99 ? '99+' : String(count);
badge.style.display = 'inline-block';
} else {
badge.style.display = 'none';
}
}
注意事项：
- 把未读数保存在 localStorage 可以在游客刷新页面后保留状态，但跨设备需要服务端支持。
- 当用户在其它设备上已读时，需要后端推送或轮询来更新本地未读。
- 如果你使用美洽的内置 widget，它可能已经在 iframe 内部管理未读，按需接入其提供的 API 或事件。
徽章样式（CSS 思路）
一个简单的角标通常需要绝对定位、圆形背景与白色文本，示例：
/* 简约版 CSS */
#mq-badge {
display: none; /* 有数时显示 */
position: absolute;
top: 8px;
right: 8px;
min-width: 18px;
height: 18px;
padding: 0 6px;
background: #ff3b30;
color: #fff;
border-radius: 9px;
font-size: 12px;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
}
移动端与小程序的注意点
- 移动原生 App：把未读计数存在本地数据库（如 SQLite、Realm）并在收到推送/本地通知时更新 UI。App 可以使用系统角标（iOS/Android）加上应用内的角标。
- 微信小程序：使用 setTabBarBadge 或自定义组件显示角标，同时监听美洽小程序 SDK 的新消息回调。
- 网络差、后台消息与推送：确保在收到 APNs / FCM 推送时也更新对话未读状态。
如何保证多端一致（关键点）
单纯的前端角标容易出现不同设备间不一致的问题。比较稳妥的做法是：
- 服务端维护未读计数：每条消息写入后端并维护每个访客/会话的未读计数。
- 客户端拉取或订阅：访客端打开页面时拉取未读计数；或通过 WebSocket / 长连接订阅变更。
- 清除策略：当访客打开会话时，客户端调用清除未读的 API，服务端同步并向所有设备广播清零事件。
简单流程图（文字版）
- 消息到达服务端 → 服务端增加未读 → 向访客设备推送通知/事件 → 访客端更新角标。
- 访客打开会话 → 访客端调用清除接口 → 服务端更新并通知其他设备 → 其他设备更新角标。
测试清单（别忘了这些细节）
- 刷新页面后未读是否保留或正确拉取。
- 跨设备登录、同一账号在不同终端的同步是否及时。
- 移动端与桌面端的样式与可触达性（触摸目标是否足够大）。
- 在网络不稳定下的表现：消息重复、丢失或未读计数错位。
- 颜色对比与无障碍（红绿色盲用户如何辨认）。
- 角标的最大值处理，例如显示“99+”。
常见坑与解决建议
- 坑：角标显示但实际没有未读 — 排查本地缓存未清、初始化拉取逻辑没执行或后端清除接口失败。
- 坑：跨设备不同步 — 加入服务端未读计数与广播机制，不能仅靠 localStorage。
- 坑：内置 widget 的 iframe 隔离 — 如果美洽 widget 在 iframe 内，外部页面不能直接访问其 DOM，需要使用美洽提供的 postMessage 或 API。
- 坑：性能问题 — 频繁写 localStorage 或进行 DOM 重绘会影响页面性能，合并更新与节流是常见优化。
如果你用的是美洽的现成 Widget，要注意的三点
- 先查看控制台有没有“角标/未读”类的开关，开启后观察表现是否符合预期。
- 如果需要自定义样式，优先使用官方提供的主题/自定义样式入口，避免直接修改内嵌 iframe 的样式。
- 需要更复杂行为（比如多会话计数或工单提醒），建议在访客端通过 SDK 补充实现，并与服务端保持同步。
小结（不那种总结，只是再提醒几句）
做角标其实是件细活：既要用户体验好，又要数据准确、跨端一致。优先试后台内置功能，能满足就别再造轮子；要是想玩出花样，就在访客端结合 SDK 与后端逻辑来做。测试、监控和和美洽官方文档／客服对齐是必要步骤。好了，以上是我想到的实现思路和落地细节，按需挑着用就行了。