自定义打开按钮

在您网站的任意位置添加按钮或链接来打开聊天组件

默认情况下，访客通过点击页面角落的浮动聊天图标来打开聊天。但您也可以添加自己的自定义按钮或链接 - 在导航栏、主视觉区域、CTA 区域或其他任何位置 - 点击即可打开聊天组件。

提示： 这非常适合在网站导航栏中添加"联系我们"链接、在产品页面上添加"获取帮助"按钮，或添加一个直接打开聊天的行动号召按钮。

工作原理

一旦 Asyntai 组件脚本安装在您的页面上，它会在 window.AsyntaiWidget 暴露一个全局 JavaScript API。您可以调用其方法来以编程方式控制聊天组件。

可用方法

// Open the chat widget
window.AsyntaiWidget.open();

// Close the chat widget
window.AsyntaiWidget.close();

// Toggle open/close
window.AsyntaiWidget.toggle();

基本示例

在 HTML 的任意位置添加一个按钮，并附加一个调用 window.AsyntaiWidget.open() 的点击处理程序：

<button onclick="window.AsyntaiWidget.open()">Chat with us</button>

就是这样。当访客点击按钮时，聊天组件就会打开。

导航栏示例

在网站导航中添加"联系我们"链接：

<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="#" onclick="event.preventDefault(); window.AsyntaiWidget.open();">Chat with us</a>
</nav>

注意： 在锚链接上使用 event.preventDefault() 以防止点击时页面滚动到顶部。

带样式的按钮示例

创建一个更醒目的自定义样式 CTA 按钮：

<style>
  .chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  }
  .chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45);
  }
  .chat-btn:active {
    transform: translateY(0);
  }
  .chat-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
</style>

<button class="chat-btn" onclick="window.AsyntaiWidget.open()">
  <svg viewBox="0 0 24 24">
    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
  </svg>
  Chat with us
</button>

切换按钮示例

如果您想要一个可以打开和关闭聊天的按钮：

<button onclick="window.AsyntaiWidget.toggle()">Toggle Chat</button>

检查组件是否就绪

组件是异步加载的，因此如果您的按钮可能在组件加载完成之前被点击，您应该先检查 initialized 属性：

<script>
  function openChat() {
    if (window.AsyntaiWidget && window.AsyntaiWidget.initialized) {
      window.AsyntaiWidget.open();
    } else {
      // Widget not ready yet — optionally show a message
      alert('Chat is loading, please try again in a moment.');
    }
  }
</script>

<button onclick="openChat()">Chat with us</button>

提示： 在大多数页面上，组件会在一秒内初始化。只有当您的按钮在页面上很早就出现时（例如在快速加载网站的首屏），才需要 initialized 检查。

隐藏默认聊天图标

如果您想用自己的自定义按钮完全替换浮动聊天图标，可以使用 CSS 隐藏它：

<style>
  #mccs-chat-button {
    display: none !important;
  }
</style>

警告： 如果您隐藏了默认聊天图标，请确保您的自定义按钮在每个页面上都清晰可见。否则访客不会知道聊天功能可用。

完整 API 参考

方法	描述
`AsyntaiWidget.open()`	打开聊天组件
`AsyntaiWidget.close()`	关闭聊天组件
`AsyntaiWidget.toggle()`	切换聊天的打开或关闭状态
`AsyntaiWidget.initialized`	布尔值 — `true` 当组件就绪时

文档