想用网站自己的按钮打开美洽对话，先通过设置项或代码参数把默认图标隐藏起来，再在按钮的点击事件里调用官方提供的打开窗口方法，写法以官方开发文档为准。电脑和手机都要点一遍测试，确认窗口关掉之后再次点击还能重新打开，未读提醒如果接口支持也可以挂到自己的按钮上。
不少站点已经有设计师画好的“在线咨询”“立即咨询”按钮，放在页头、商品旁或活动横幅里，视觉上和整站风格一致。如果再叠一个美洽默认悬浮图标，页面会显得拥挤，也和品牌形象不完全合拍。下面按步骤教程的方式，从隐藏默认图标、绑定自己的按钮、可选的未读数，到手机端注意点和完整测试清单，一步步做完，你就可以让访客只通过网站自己的按钮进入美洽聊天窗口。
为什么要用自定义按钮
自定义按钮最大的好处是位置和样式完全由你控制：可以放在首屏更显眼的位置，也可以嵌在购买流程旁边，文案还能写成“问尺码”“问库存”这种更具体的话，提高点击意愿。美洽默认图标虽然方便，但对已经有成熟设计系统的站点来说，往往显得突兀，也不利于和广告素材、活动页保持同一套视觉语言。
需要说明的是，隐藏默认图标并不是卸载插件。插件脚本仍要正常加载，客服才能在工作台收到消息；你只是不让默认入口露出来，改由自己的按钮负责打开面板。若脚本都没加载，再漂亮的按钮也点不出对话。
第一步：隐藏默认图标
隐藏方式通常有两类：一是在美洽后台的网页插件外观或显示相关设置里关闭默认按钮；二是在嵌入代码的参数里关闭默认图标。具体选项名称和参数写法以当前版本和官方开发文档为准，不确定时先在测试环境改，确认访客端看不到默认图标、但脚本仍在加载，再同步到正式环境。
- 用管理员账号登录美洽，进入网页插件或接入渠道相关设置，查找与按钮显示、图标显隐、默认入口有关的开关，若界面上没有，再对照官方开发文档查看嵌入参数里是否有隐藏默认图标的选项。
- 开启隐藏或按文档改好参数后保存，用无痕窗口打开已经嵌入代码的测试页，确认页面上看不到美洽默认悬浮图标，同时在开发者工具里能看到插件相关脚本请求成功，避免误把整个插件卸载掉。
- 让一位同事在工作台保持在线，你在测试页用临时办法（例如临时显示图标或后面步骤写好的自定义按钮）发一条消息，确认会话能进工作台，证明隐藏的只是图标而不是整套接待能力。
第二步：给自己的按钮绑定打开窗口
在点击事件里调用打开面板方法
官方开发文档一般会提供在网页里打开聊天面板的方法，你需要在自己的按钮点击事件里调用它。调用时机必须是插件已经初始化完成之后，过早调用会表现为“点了没反应”。如果站点是单页应用，还要保证路由切换后事件绑定仍然有效，或在组件挂载时重新绑定。
- 在网站里找到设计师做好的咨询按钮，给它加上点击事件处理函数，函数内部按照官方开发文档调用打开聊天面板的方法，不要把方法名凭记忆写错，也不要在插件脚本加载完成前触发。
- 若页面上有多个咨询按钮，例如页头一个、商品旁一个、页脚一个，让它们共用同一个打开函数，避免复制多份容易漏改的代码；需要区分来源时，可以在打开前写入不同的来源标记，写法仍以官方说明为准。
- 保存并发布后，先在测试域名验证：点击按钮应平滑打开美洽聊天窗口，再点关闭应能收起，再次点击应能重新打开，中途不要出现空白层或重复叠两个窗口。
多个按钮共用一个调用方法
把打开逻辑抽成单独函数后，页头、侧栏、商品卡片上的按钮都只负责触发这一个函数。这样以后官方接口有调整，你只改一处。若某个活动页临时不想提供咨询入口，只要不渲染那个按钮即可，不必再去改美洽后台。
第三步：按钮上显示未读消息数（如接口支持）
访客把窗口关掉之后，客服又回复了几句，若页面上没有任何提示，访客可能以为没人理。若当前版本的网页接口支持读取未读消息数或监听新消息事件，可以把数字徽标显示在自己的按钮上，提醒访客点开查看。具体事件名和字段以官方开发文档为准；若不支持，至少保证按钮文案清晰，例如写成“查看客服回复”。
未读数只是辅助，不要做成打断操作的强制弹窗。支付过程中突然跳出大数字提醒，体验反而变差。可以按页面类型决定是否展示徽标，支付页和登录页建议关掉。
不同位置的按钮分到不同客服
若广告落地页希望访客一进来就分到指定客服或分组，可以使用指定客服链接或带分配参数的入口，本站另有专题说明，这里只提醒一句：自定义按钮同样可以指向不同的打开参数或不同的接入标识，从而把咨询分到对应团队，具体参数以官方说明和当前版本为准。
手机端的注意事项
手机屏幕窄，底部往往已有导航栏或购物车栏，自定义按钮如果也固定在右下角，容易互相遮挡，点击区域也会偏小。建议在手机端把按钮放进页头、商品操作区或内容流里的明显位置，并保证可点区域足够大，避免只能点到图标边缘才有效。同时检查横屏与竖屏、全面屏底部安全区，防止按钮被系统手势条挡住。
- 用至少两部真实手机分别测试安卓与苹果系统的主流浏览器，点击自定义按钮确认能打开美洽窗口，文字输入框不被虚拟键盘顶到看不见，发送图片和表情也要各试一次。
- 检查按钮在滚动页面时是否会漂移、闪烁或被其他浮动层盖住，如有冲突，调整层级或暂时隐藏其他浮动组件，保证咨询入口始终可点。
- 在弱网环境下再测一遍打开速度，若插件脚本过大导致按钮可点但窗口迟迟不出，可评估延迟加载策略，但不要为了速度把脚本直接删掉。
测试清单与常见问题
电脑和手机分别点击测试
上线前至少覆盖：首页、产品页、活动页各点一次自定义按钮；打开窗口后发送文字与图片；客服回复后访客端能看到；关闭窗口再打开仍正常。电脑用两种浏览器，手机用两种系统，把结果记在验收表里，出问题才有据可查。
窗口关闭后再次点击能否重新打开
有的实现只在第一次绑定成功，关闭后状态机停在“已打开过”而忽略第二次点击。测试时要刻意关闭再打开三次以上。若偶发失败，检查是否有报错、是否在路由切换后丢失了全局对象，以及是否有其他脚本重写了同名方法。
点按钮没反应
按顺序查：插件脚本是否加载成功；打开方法是否在初始化完成之后调用；按钮点击事件是否被其他层挡住；控制台是否有报错；广告拦截扩展是否误伤了脚本。把默认图标临时打开对比一次，也能帮助判断是插件整体异常还是只是自定义绑定写错。
默认图标隐藏后又出现
常见原因是缓存了旧的嵌入代码、有两个地方同时嵌入了插件、或者某次发布把隐藏参数覆盖回默认。检查公共模板与页面级代码是否重复嵌入，清缓存后再用无痕窗口验证，并确认只有一处负责配置隐藏逻辑。
做完之后可以怎么用
默认图标藏起来、自己的按钮能稳定打开美洽窗口之后，你可以把咨询入口自然地嵌进设计稿：首屏主按钮、商品旁的“问尺码”、订单页的“联系客服”，文案和颜色都跟品牌走。只要插件脚本还在、打开方法调用正确，客服侧的分配、快捷回复和历史记录都不受影响。入口名称、参数和是否支持未读数，一律以当前版本和官方开发文档为准。
总结一下：美洽默认图标太突兀时，先隐藏默认入口，再把打开聊天窗口的动作绑到网站自己的按钮上，必要时加上未读提示，并在电脑与手机上反复开关测试。这样既保留了美洽的接待能力，又让页面看起来干净、统一、符合自己的设计规范。