美洽怎么设置访客端聊天窗口通知样式？

在美洽后台与网页端都能设置访客端聊天窗口通知样式：在管理后台逐项开启或关闭浏览器通知、提示音、角标与未读数、消息气泡动画、提示文字和图标；也可以通过自定义样式表覆盖默认样式，或在页面中绑定回调播放自定义声音并使用浏览器通知接口推送更丰富的提示。以适配不同设备与运营场景的提醒风格与数据统计支持可回溯。

先弄清“通知样式”到底包含什么

把通知想像成门铃：门铃能发声、能闪灯、还能在手机上弹窗或在桌面角落显示一个小红点。访客端聊天窗口的通知样式，就是告诉门铃到底长什么样、什么时候响、谁能听到、以及怎样显示。常见要素包括：

• 浏览器通知（桌面弹窗）：浏览器级别的系统通知，通常需要用户授权。
• 提示音：新消息到达时播放的音效。
• 角标与未读数：聊天图标右上方的小红点或数字，提示还有未读消息。
• 消息气泡动画：新消息的气泡、闪烁或抖动动画。
• 提示文字与图标：展示在聊天窗口或通知中的文案与头像/图标。
• 样式（颜色/位置/字体）：窗口主题色、位置（右下/左下）以及字体大小等。

在哪里可以设置（两条主线）

配置方式大致分成两条主线——不写代码就能做的后台设置，以及需要前端介入的自定义样式/脚本。两者经常配合使用：先在后台把大类功能打开，再用前端微调外观与交互。

一：管理后台（免编码）

在美洽的管理控制台里，通常能直接配置大部分通知行为。路径标题可能会随产品版本微调，但大致流程如下：

• 登录美洽管理后台 → 进入目标渠道（例如：网站渠道 / 小程序渠道）
• 找到 访客端/聊天窗口/消息提醒 或类似命名的设置页
• 逐项启用或关闭：浏览器通知、提示音、角标、未读计数、气泡动画、提示文案、默认图标和位置
• 如果支持，上传自定义提示音或图标；保存并发布生效

注意：后台设置是最稳妥的方式，适用于绝大多数常见需求；而且变更后可以立即在所有接入该渠道的网站/页面生效，运维更简单。

后台各项设置含义（细化说明）

• 浏览器通知：会调用浏览器通知权限。启用后，访客第一次使用时浏览器会询问是否允许显示通知。
• 提示音：通常有内置音效可选，或者允许上传自定义音频文件（格式和时长会有限制）。
• 角标/未读数：开启后聊天入口会显示未读消息数，关闭时只显示简单的状态提示。
• 消息气泡动画：控制新消息弹出时是否有动画效果，关闭后界面更静默，适合对噪音敏感的场景。
• 提示文字/图标：配置默认欢迎语、离线提示或客服头像，直接影响第一眼的品牌感知。

二：前端自定义（需要一点代码）

当后台能满足大部分需求，但你还想进一步精细化视觉或交互（比如特殊动画、区域性提示、A/B 测试不同音效等），就需要在网页端注入 CSS 或 JS。两种常用手段：

• 覆盖样式（CSS）：通过自定义样式表修改默认类的颜色、大小、位置或动画。
• 事件监听与通知逻辑（JS）：监听“新消息到达”的事件或 DOM 变化，触发自定义提示、播放音效或调用浏览器 Notification。

如何安全覆盖样式（步骤与示例）

先用浏览器开发者工具（F12）找到聊天 widget 的 DOM 结构与类名，然后在你的站点样式表中覆盖。示例 CSS（仅示范选择器思路，实际类名以你的页面为准）：

/* 修改角标样式 */
.mq-badge {
  background: #ff4d4f !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 0 0 4px rgba(255,77,79,0.08);
}
/* 新消息脉冲动画 */
@keyframes mq-pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.12); opacity: 0.85; }
100% { transform: scale(1); opacity: 1; }
}
.mq-new-dot { animation: mq-pulse 1s infinite; }
/* 改变聊天窗口位置（如果后台不支持）*/
.mq-widget { right: 24px !important; bottom: 24px !important; }

提示：不要直接假定类名，优先通过开发者工具确认，避免未来更新被覆盖。加上足够的选择器优先级或使用 !important 但要慎用。

用 JS 监听新消息并触发更丰富的通知（示例）

如果美洽提供 SDK 的消息回调，那直接用回调。如果没有，也可以用 MutationObserver 监听 widget DOM 的“新消息”节点变化，示例如下：

// 伪代码示例：根据实际 DOM/SDK 调整选择器和事件
const audio = new Audio('/static/sounds/custom-notify.mp3');
function showDesktopNotification(title, body, icon) {
if (Notification.permission === 'granted') {
new Notification(title, { body, icon });
} else if (Notification.permission !== 'denied') {
Notification.requestPermission().then(p => {
if (p === 'granted') new Notification(title, { body, icon });
});
}
}
// 观察新消息节点
const chatRoot = document.querySelector('.mq-chat-root'); // 请替换为实际节点
if (chatRoot) {
const mo = new MutationObserver(muts => {
for (const m of muts) {
if (m.addedNodes.length) {
// 简单判断：有新消息节点被插入
audio.play().catch(()=>{/可能被浏览器阻止，见常见问题/});
showDesktopNotification('客户消息', '您有一条新消息', '/path/to/icon.png');
}
}
});
mo.observe(chatRoot, { childList: true, subtree: true });
}

这类做法适合：

• 需要自定义音效或区分消息类型时
• 想在消息到达时做额外统计或触发第三方埋点时

兼容性与权限问题（必须提前考虑）

• 浏览器通知权限：首次触发浏览器通知时会弹出权限申请。若用户拒绝，后续需引导用户到浏览器设置手动开启。
• 自动播放限制：现代浏览器会拦截未经过用户交互直接播放音频。通常先要求用户在页面上进行一次点击（例如点击“开始对话”），再允许播放提示音。
• 移动端限制：iOS Safari 对网页通知支持较弱，移动端更多依赖原生应用或 PWA 的推送机制。
• iframe 情况：如果聊天窗被嵌入在 iframe，需要特别注意权限与跨域策略，某些通知或音频播放可能受限。

表：常见通知功能与跨平台支持概览

常见问题与排查小贴士（像跟朋友聊）

• 提示音不响：大概率是浏览器自动播放策略。解决办法：在访客首次与页面交互（点击）后再播放；或者提供静默提示然后等待用户允许声音。
• 浏览器通知没弹：检查 Notification.permission 状态，确认是否被用户拒绝；在被拒绝的情况下，需要引导用户到浏览器设置恢复。
• 样式覆盖不生效：检查选择器优先级，确认是否因为 iframe 隔离导致无法覆盖；用更高优先级或在 iframe 内注入样式。
• 在单页应用（SPA）中失效：确保在路由切换后仍然绑定了事件监听器，或在每次初始化聊天 widget 时重新绑定。

运营与体验建议（不光是能做，还要做得聪明）

• 把“紧急”和“普通”消息区分开：紧急消息用声音+桌面通知，普通消息只用角标，减少打扰。
• 设置静默时间段（免打扰）：夜间或法定休息时间关闭提示音与弹窗。
• 提供可配置的提示音选择：不同业务线可以用不同音效，利于客服快速识别来源。
• 结合数据监控：把通知触发、被点击及未读转化等作为指标，评估通知策略的有效性。

最后一点小心得：别把通知做得太“喧宾夺主”。访客接受通知是建立在信任和价值之上的——提醒要及时、有用且可控。具体到美洽的实施，优先在后台把合规、基础功能打开，再用前端做品牌化与交互优化，这样既稳妥又灵活。