设置指南

安装聊天组件

不到 5 分钟，就能把 Sonny 在线聊天组件添加到你的网站。只需要一个 script 标签。

安装步骤

  1. 01

    复制安装代码

    打开渠道，选择与你网站连接的渠道，然后选择在线聊天。在安装代码下选择复制。

  2. 02

    添加 script 标签

    将复制的代码粘贴到网站 HTML 中 </body> 结束标签之前。复制的版本已包含你的站点 ID。如果改用下面的示例代码，请替换 YOUR_SITE_ID。

  3. 03

    在 Sonny 中自定义

    在同一个在线聊天页面更改设置，然后选择保存更改。自定义指南解释了每个选项。

  4. 04

    验证安装

    访问你的网站，你应该会看到聊天组件出现在右下角。发送一条测试消息，确认它能正常工作。

基本安装

将此 script 标签添加到你的网站中，放在 </body> 结束标签之前：

HTML
<script>
  (function(w,d,s,o,f,js,fjs){
    w['Sonny']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','sonny','https://www.usesonny.com/widget.js');
  sonny('init', { siteId: 'YOUR_SITE_ID' });
</script>

自动初始化代码

如果不需要在聊天组件加载前将命令排队，也可以只使用一个 script 标签：

HTML
<script
  src="https://www.usesonny.com/widget.js"
  data-site-id="YOUR_SITE_ID"
  async
></script>

识别访客并发送自定义属性

用户登录你的网站后，调用 sonny('identify')，传入其邮箱以及你希望客服团队看到的任何额外数据。在 attributes 下传入额外字段——新的键会自动创建为自定义字段，并显示在对话的右侧。之后的调用会覆盖之前的值。

HTML
<script>
  // Identify the visitor and pass any custom attributes you want
  // surfaced in the agent sidebar. Unknown keys are auto-created
  // as Custom Fields in your workspace settings.
  sonny('identify', {
    email: 'jane@acme.com',
    name: 'Jane Doe',
    attributes: {
      plan: 'pro',
      mrr: 499,
      signedUpAt: '2025-08-01T00:00:00Z',
      website: 'https://acme.com'
    }
  });
</script>

支持的值类型：字符串、数字、布尔值、ISO-8601 日期、URL。传入 null 可清除属性。键必须以字母开头，只能使用字母、数字或下划线，最长 64 个字符。email、name、id、phone、createdAt 和 updatedAt 为保留键。文本值最长 1,000 个字符。限制：每次调用最多 50 个属性。

通过你自己的按钮打开聊天组件

想用自己的按钮而不是浮动气泡来打开聊天？向 sonny('init') 传入 hideLauncher: true 隐藏内置的启动按钮，然后在页面上任意元素中调用 sonny('open')。

HTML
<!-- 1. Boot Sonny with its built-in launcher hidden -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['Sonny']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','sonny','https://www.usesonny.com/widget.js');
  sonny('init', { siteId: 'YOUR_SITE_ID', hideLauncher: true });
</script>

<!-- 2. Open the chat from your own button, anywhere on the page -->
<button onclick="sonny('open')">Chat with us</button>

以下命令可以在页面任意位置控制聊天组件：

  • sonny('open')——打开聊天面板。
  • sonny('close')——关闭聊天面板。
  • sonny('toggle')——在打开和关闭之间切换，非常适合单个切换按钮。
  • sonny('show') 和 sonny('hide')——显示或隐藏整个聊天组件，覆盖你的显示规则。
  • sonny('getUnreadCount', callback)——随时读取当前的未读数量。

更喜欢单个 script 标签的安装方式？在 script 标签上添加 data-hide-launcher 即可隐藏启动按钮，然后把你的按钮绑定到同样的命令。

在你自己的按钮上显示未读回复

隐藏启动按钮也会隐藏其未读角标，因此 Sonny 会改为通知你的页面。聊天组件会在 window 上派发一个 sonny:unread 事件，携带 detail.count——与内置启动按钮显示的数字相同。非常适合在你自己的移动端导航上显示角标。

HTML
<button id="chat-button" onclick="sonny('open')">
  Chat with us
  <span id="chat-unread" hidden></span>
</button>

<script>
  function showUnread(count) {
    var badge = document.getElementById('chat-unread');
    badge.textContent = count > 9 ? '9+' : count;
    badge.hidden = count === 0;
  }

  // Fires once after the widget loads, then on every change.
  window.addEventListener('sonny:unread', function (event) {
    showUnread(event.detail.count);
  });

  // Optional: read the count on demand (e.g. after your own nav re-renders).
  sonny('getUnreadCount', showUnread);
</script>

该数字涵盖访客所有对话中未读的客服回复。聊天组件加载后不久会触发一次——因此在页面加载时添加的监听器总能拿到当前状态——之后每当数字变化时都会再次触发，包括访客打开聊天后归 0 时。

自定义选项

在 Sonny 中渠道的“在线聊天”标签页自定义聊天组件。

设置说明默认值
品牌颜色聊天组件的主色（十六进制颜色代码）#2563eb
位置聊天组件在页面上的位置bottom-right
欢迎消息向访客显示的欢迎消息您好！有什么可以帮您？

后续步骤

聊天组件已经安装好了，接下来也设置一下邮件转发吧。

设置邮件转发

相关文档

看看 Sonny 能帮你做什么