美洽自建咨询按钮没恢复：窗口显隐、关闭点击与会话结束怎样联动

2026年10月29日 · 美洽 使用指南

用一条完整开关序列，说明美洽自建网页入口如何按 visible、invisible 恢复显示，并区分初始化、关闭点击和会话结束。

网站换成自己设计的“咨询使用方法”按钮以后，常见的一个小故障是：聊天窗已经关掉，页面入口仍然消失；或者用户刚点击一下，按钮就显示“聊天中”，窗口却还没有打开。美洽网页插件提供了窗口可见性、关闭点击和会话结束等不同回调。把这几个信号各自接到合适的页面动作上，自建入口才能跟着实际窗口变化。

先定入口的两种样子

假设一个教程页右下方放着“咨询使用方法”，我们希望聊天窗显示时让这个入口让开位置，聊天窗隐藏时恢复入口。先把这句话写成两条确定的规则：收到 visible，隐藏自建入口；收到 invisible，显示自建入口。美洽 JavaScript 文档的 getPanelVisibility 正是为这种显示、隐藏联动提供的回调，返回值是这两个字符串。

入口文案可以保持“咨询使用方法”，不必随每次点击改成“客服已接待”。窗口显示是页面表现；客服是否可服务、是否正在排队、有没有建立对话，是其他信息。一个只负责开窗的按钮，使用准确而稳定的名称，维护起来更容易。页面若还需要显示接待进展，应另外建立对应状态与文案，避免共用一个变量。

绑定顺序：回调先注册，初始化后开窗

官方文档要求 getPanelVisibility 在插件初始化之前使用；showPanel 和 hidePanel 则在初始化成功的前提下调用。对已经运行的网页，先找出原嵌入代码与初始化位置，把联动注册放进同一条初始化流程。不要在每次点击咨询时重新插入一套嵌入代码，否则排查时会多出重复加载和重复绑定的问题。

采用手动初始化的项目，需要在美洽嵌入代码后紧跟 _MEIQIA('manualInit')，阻止脚本下载完自动初始化；登记企业配置、可见性回调和 allSet 后，再在合适的时机调用 init。官方特别说明，没有设置手动模式就不能按手动流程使用 init。已有项目采用自动初始化时，应保留那条流程，把前置回调放到正确位置，而不是再补一次初始化。

如果希望只保留自己的入口，可在初始化前配置 withoutBtn，关闭美洽自带聊天按钮。先把自己的入口、键盘操作与关闭后的恢复做通，再选择这个设置，避免同时失去两个入口。美洽文档也把 withoutBtn 列为初始化前使用的接口。

一段只管理入口的处理逻辑

下面展示处理函数与注册方式，放进已有接入工程的相应位置即可理解职责。示例页面预先存在一个编号为 consult-entry 的普通按钮，项目已有合法嵌入代码和企业配置。allSet 到达前让入口不可点击，旁边可提示“咨询入口准备中”；就绪后才允许执行开窗请求。示例不包含嵌入代码，不会另建一个企业实例。

const entry = document.getElementById('consult-entry');
entry.disabled = true;
_MEIQIA('getPanelVisibility', function (visibility) {
  if (visibility === 'visible') entry.hidden = true;
  if (visibility === 'invisible') entry.hidden = false;
});
_MEIQIA('allSet', function () {
  entry.disabled = false;
});
entry.addEventListener('click', function () {
  _MEIQIA('showPanel');
});

这里没有在点击处理里直接隐藏入口。原因很具体：点击只说明用户提出了开窗请求；如果初始化尚未完成，官方说明开窗接口无法正确执行。把隐藏动作交给实际可见性回调，才能避免“窗口没出来，入口先没了”。项目样式还要确认确实尊重按钮的 hidden 状态，避免其他显示规则把它覆盖。

沿着一次开关过程看五个时间点

用一个没有业务资料的演示页走完整过程：第一步，页面载入，入口等待就绪；第二步，初始化成功，入口可点击；第三步，点击入口，发出 showPanel 请求；第四步，可见性回调为 visible，入口隐藏；第五步，访客关闭聊天窗，收到 invisible 后入口恢复。再点恢复的入口，重复第三、四步。观察结果应逐项填写，不能只拍一张窗口展开的截图。

还要补一条“由自己的页面代码调用 hidePanel”的路线。官方把它定义为隐藏聊天窗；页面继续依据可见性来恢复入口。这样，访客点击关闭和页面主动收起这两条路径都服从同一显示规则。若只在关闭按钮点击回调里恢复入口，主动收起路线就容易漏掉。

beforeCloseWindow 记录的是顾客点击 Widget 关闭按钮这个动作；endConversation 是另一项会话结束回调。需要分析关闭行为时可以记录前者，需要响应会话结束时使用后者。把两者合写成“用户咨询已结束”，会使稍后重新打开窗口的访客被误判为新的完整事项。这里的页面练习不需要自动删除历史，也不需要结束客服正在处理的工作。

三个现象，分别从哪一行查

关窗后入口没有回来：先看日志是否收到 invisible。收到而页面没变，检查处理函数定位的按钮是不是当前页面那一个，以及样式有没有覆盖；没收到，则检查回调是否在初始化前注册，页面切换时是否丢失原处理关系。排查对象是入口与回调，不必先改客服分配。

入口恢复了，却还是点不开：查看这次页面的就绪标记、实际绑定次数与按钮禁用状态。有些页面更换了按钮节点，旧监听还留在旧节点上；应让当前节点拥有正确的一次绑定。把“初始化成功”和“可见性为隐藏”分开保存，前者决定能否开窗，后者决定入口是否露出。

窗口已经打开，但仍有一个入口挡住内容：先确认露出的是自建入口还是插件自带按钮，再核对是否选择无按钮模式。若两个对象的联动正确而手机布局仍遮挡业务按钮，可接着检查本站的横竖屏、放大与键盘弹出场景，那是页面空间安排的问题。窗口状态正确以后，客服尚未给出结论的沟通，可参考等待进展怎样说明。

给维护者的三道核对题

题一：日志只有“点击咨询”，没有窗口可见回调，入口该不该立即消失？答案是继续等待实际显示信号，先查就绪与调用过程。题二：页面主动调用隐藏接口，入口仍不见，关闭点击日志也是空的，是否应该补造一次关闭事件？答案是检查隐藏后的可见性处理，主动收起本来就不是访客点击关闭按钮。

题三：会话结束提示出现，但聊天窗还显示，是否要强制把入口显示在窗口上面？答案是先保持窗口显示规则。会话收尾可以更新独立提示，入口继续由可见性控制。让同事逐题指出应查看的具体回调，再在演示页复现对应路线，比只核对按钮颜色更能发现职责混用。

本文依据美洽网页插件官方接口文档编写，核对日期为2026年10月29日。代码和事件序列用于说明接入逻辑，尚未在读者项目运行；组件销毁、路由生命周期与业务接待状态应由项目另行接续。先把一次打开、两种收起路线和再次打开走通，再合并到实际页面。