美洽怎么设置访客端聊天窗口通知样式选项?
在美洽后台的访客端设置里,你可以设置聊天窗口的通知样式:开启或关闭提示音、浏览器桌面通知与角标、选择或上传自定义提示音与图标、调整窗口位置与主题色、配置弹窗触发规则及延迟,并通过自定义样式或 SDK 控制移动端推送与细节,实现更灵活的访客提醒体验,并能配合触发条件和频率控制,避免骚扰。

先把问题讲清楚:什么是“访客端通知样式”
把访客端通知样式想象成门铃的外观和响法:门铃(聊天窗口)可以放在门左边还是右边,可以是红色还是蓝色,可以发出短促叮咚声或无声提示,也可以在桌面角落显示未读数字。设置这些选项的目的,是让访客能及时注意到消息,同时不被打扰。
在哪里设置(大致路径与页面)
在美洽的控制台里,相关设置通常集中在“访客端”或“渠道”相关的区域。常见的路径是:
- 进入美洽控制台(控制面板)
- 找到“渠道管理”或“访客端设置/窗口样式”
- 选择你要修改的渠道(网站、H5、App、小程序等),进入对应的聊天窗口样式配置页面
不同版本或权限下页面名可能略有差异,但总体都会把“样式、通知、触发”三类配置放在同一片区域。
可配置的主要选项(逐项说明)
下面把每个常见选项拆开解释,便于你按需调整。
视觉样式
- 主题色/按钮色:控制聊天入口、发送按钮和主要按钮的颜色,通常提供颜色选择器或直接填写十六进制色码。
- 图标/Logo:可上传自定义图标或使用企业Logo,让访客端更符合品牌识别。
- 窗口位置:支持右下/左下/浮动等位置设置。某些场景下左侧更不遮挡页面内容。
- 窗口形态:固定嵌入或悬浮小窗,嵌入式更稳定,悬浮式更醒目。
提醒方式(通知样式)
- 提示音:开启/关闭访客端声音提醒,可选择系统声音或上传自定义音频文件(通常支持 mp3/ogg),注意文件大小和跨浏览器兼容。
- 角标/未读数:在聊天入口显示未读消息数,适合引导用户返回会话。
- 浏览器桌面通知:利用浏览器 Notification API 弹出消息,需要 HTTPS 环境并由用户授权。在美洽里通常是开关与标题/正文模板配置。
- 震动/移动端推送:移动端可通过 SDK 或第三方推送实现,控制由 App 层或小程序平台管理。
- 消息预览:设置在桌面通知或角标上是否显示消息摘要,出于隐私可选择隐藏敏感内容。
弹窗与主动邀请
- 自动弹窗/主动邀请:当访客满足条件(停留时间、访问页面、来源渠道等),触发主动聊天邀请或弹窗。
- 触发条件:常见选项包括停留时长、访问次数、URL 匹配、UTM 参数、商品页/结算页等自定义条件。
- 频率与冷却:控制同一访客多次弹窗的间隔,防止重复打扰(例如首次 30 秒弹出,之后冷却 24 小时)。
高级与自定义
- 自定义 CSS/JS:通过自定义样式或脚本精细控制浮窗位置、动画与隐藏规则(需基础前端能力)。
- SDK 控制:在 App 或移动端,通过美洽提供的 SDK 接口主动触发通知、修改样式或上报行为。
- 多渠道独立配置:网站、H5、小程序、App 通常可以独立设置通知样式,便于做差异化体验。
一个实用的表格:常见选项含义和建议
| 选项 | 含义 | 建议 |
| 提示音 | 新消息到达时播放的声音 | 商业网站可开启,购物或金融页面建议开启短促音;支持自定义音频 |
| 桌面通知 | 浏览器弹出消息,需要用户授权 | 必要时开启,提示需简短并避免泄露隐私信息 |
| 角标 | 入口上的未读计数 | 常开,能提高会话回流率 |
| 自动弹窗触发 | 基于规则自动发起会话邀请 | 设置合理延迟和冷却,避免重复打扰 |
如何具体操作(一步步示例)
下面用一个常见场景讲流程:你要给网站访客打开声音提醒、启用桌面通知、并设置在商品页停留 20 秒后弹窗。
- 登录美洽控制台,进入“访客端/渠道设置”。
- 选择网站渠道,点击“聊天窗口样式”或“通知设置”。
- 找到提示音选项,上传或选择默认音,保存并测试播放是否正常。
- 开启“桌面通知”开关,编写通知标题与模板。保存后,测试网页在 HTTPS 环境下是否弹出授权提示并能接收通知。
- 到“主动邀请/触发规则”设置,选择“URL 包含 /product/” 并设置停留时间为 20 秒,保存并设置冷却 24 小时。
- 在开发者模式或测试账户上打开页面,模拟停留并验证是否按预期弹窗与发出声音。
一些实际示例代码(供自定义与调试参考)
若需要通过自定义脚本或浏览器 API 做桌面通知,基本示例如下(说明用途,不一定直接粘贴运行):
示例:请求权限并发送简单桌面通知
JS 伪代码:
if (window.Notification) { Notification.requestPermission().then(function(permission){ if(permission===’granted’){ new Notification(‘有新消息’, {body:’来自客服的问候’}); } }); }
如果在美洽 SDK 中触发样式变更或主动邀请,通常会有对应的 SDK 方法(查看美洽开发文档),例如触发主动会话或修改入口可见性。
测试、验证与常见问题排查
- 提示音不响:检查浏览器是否静音、文件格式是否受支持(建议 mp3/ogg)、是否跨域问题阻止加载。
- 桌面通知不弹:确认页面为 HTTPS、用户是否拒绝权限、以及浏览器是否在节省模式或阻止通知。
- 弹窗触发不准确:核对触发条件(URL 匹配是否精确)、停留时间逻辑、以及是否同时存在冷却期。
- 移动端推送未到:确认 SDK 集成是否完成、推送证书/配置是否正确、以及目标设备是否允许推送。
优化建议与用户体验小贴士
- 尽量做到“提醒有价值”:在购物流程、客服在线时或支付异常时提醒,避免无关弹窗。
- 设置合理的冷却期和最大弹窗次数,用户被频繁打扰会降低转化。
- 桌面通知内容简洁,避免在通知里暴露敏感信息。
- 针对不同渠道使用差异化样式:移动端更偏向沉浸体验,网页端更强调不遮挡正文。
权限、合规与可访问性考虑
启用通知时要注意告知用户为什么要开启权限,尤其是当涉及推送个人化信息时,要符合隐私合规要求。并注意无障碍:文字替代、色彩对比等,确保视觉或听力受限用户也能接收到关键信息。
最后,如何验证改动生效
- 用无缓存的浏览器窗口或隐身模式打开页面,避免旧配置干扰。
- 借助真实设备测试(桌面、手机、不同浏览器),记录差异。
- 查看美洽后台的事件日志或告警(如果有),确认触发记录。
好了,讲完这些你就能比较从容地在美洽里把访客端的通知样式调整到位了。设置时别急着一次改太多,分步调整+测试,会更省心一点。