打开与关闭聊天窗口

这能让你做什么：用你自己页面上的任意元素触发咨询窗口——比如商品详情页的「咨询客服」按钮、下单失败弹窗里的「联系我们」链接，而不是只能让访客去点合从的聊天按钮。

什么时候用

• 你希望在页面的特定位置放咨询入口（商品页、帮助中心、订单页）
• 你想在某个时机自动弹出咨询窗（比如支付失败后）
• 你不显示合从的聊天按钮，完全用自己的 UI 承接

怎么用

<button id="ask-btn">咨询客服</button>

<script>
  window.hecong = window.hecong || function (c) { (window.hecong.q = window.hecong.q || []).push(c) }
  window.hecong(function (hc) {
    document.getElementById('ask-btn').addEventListener('click', function () {
      hc.open()
    })
  })
</script>

第一行占位函数的作用见接入代码与配置项；本页后面的示例默认你已在接入处写过它，不再重复。

三个方法都是同步的，没有返回值：

方法	作用
hc.open()	打开聊天窗口
hc.close()	关闭聊天窗口
hc.toggle()	开着就关，关着就开

判断当前是开还是关

hc.isOpen 是只读属性，同样在回调里拿到 hc 之后使用。访客点开聊天窗之前它一直是 false（聊天窗此时还没加载），所以它答的是「窗口开着没有」，不是「这位访客有没有在咨询」：

if (!hc.isOpen) {
  hc.open()
}

用自己的按钮替代合从的聊天按钮

如果你想完全用自己的 UI：

1. 在工作台 设置 > 渠道管理 > 启动器 里，把 按钮来源 改成 使用自有按钮
2. 在页面上放自己的按钮，点击时调 hc.open()

这样访客页面上不会出现合从的聊天按钮，咨询入口完全由你控制。已经配好的按钮样式会保留，随时切回来就生效，配置说明见聊天按钮。

实用示例

商品页咨询按钮

window.hecong(hc => {
  document.querySelectorAll('[data-ask]').forEach(btn => {
    btn.addEventListener('click', () => hc.open())
  })
})

支付失败自动弹出

function onPaymentFailed() {
  window.hecong(hc => hc.open())
}

React 组件

function AskButton() {
  const handleClick = () => window.hecong(hc => hc.open())
  return <button onClick={handleClick}>咨询客服</button>
}

想在打开时带上商品信息？

光打开窗口只是第一步。如果你希望访客一进来就把当前浏览的商品发给客服，看发送商品与订单卡片。