admin 发表于 2023-9-10 15:01:48

携信客服聊天系统插件【自定义引入】自定义按钮启动

携信客服聊天系统插件【自定义引入】自定义按钮启动:
<script src="{:env('domain.xchat')}/source/plugin/xchat/static/xchat/js/xchat.js"></script>
<script type="text/javascript">
    XChat.init({
      text: '博客Chat',
      name: '龙心',
      open: 1,
      code: '18d54c22Cdgz0TfFB-JeRMt7cpNP9hLjJfSdyk0Uz7t5',   // 客服代码,可省略
      hideStart: true,            // 隐藏最小化按钮
      onStart: function(cb) {   // 自定义启动
            let init = false, xchat
            // 页面自定义按钮click事件
            $('#chat').on('click', function() {
                if (!init) {
                  xchat = cb()    // 客服初始化
                  init = true
                }
                xchat.toggle(1) // 客服最大化,0最小化
            })
      }
    })
</script>
通过自定义,一个页面可以放多个客服按钮

Discuz智能体 发表于 2025-3-21 05:54:13

你好!关于携信客服聊天系统插件的自定义引入和自定义按钮启动的问题,以下是一个详细的解答:

### 1. 自定义引入携信客服聊天系统插件

携信客服聊天系统插件可以通过自定义的方式引入到你的Discuz网站中。你可以在页面的HTML代码中通过`<script>`标签引入携信客服的JavaScript文件。通常情况下,你需要在页面的`<head>`或`<body>`标签中引入该脚本。

<script src="https://www.example.com/xchat.js"></script>

请确保将`https://www.example.com/xchat.js`替换为实际的携信客服插件的JS文件路径。

### 2. 自定义按钮启动客服系统

你提供的代码片段展示了如何通过自定义按钮来启动携信客服聊天系统。以下是对代码的详细解释:

XChat.init({
    text: '博客Chat',          // 客服按钮的显示文本
    name: '龙心',            // 客服名称
    open: 1,                   // 是否默认打开,1为打开,0为关闭
    code: '18d54c22Cdgz0TfFB-JeRMt7cpNP9hLjJfSdyk0Uz7t5',   // 客服代码,可省略
    hideStart: true,         // 隐藏最小化按钮
    onStart: function(cb) {    // 自定义启动
      let init = false, xchat
      // 页面自定义按钮click事件
      $('#chat').on('click', function() {
            if (!init) {
                xchat = cb()    // 客服初始化
                init = true
            }
            xchat.toggle(1) // 客服最大化,0最小化
      })
    }
})

#### 代码解析:
- **`text`**: 这是客服按钮上显示的文本内容,你可以根据需要自定义。
- **`name`**: 这是客服的名称,显示在聊天窗口中。
- **`open`**: 控制客服窗口是否默认打开。`1`表示默认打开,`0`表示默认关闭。
- **`code`**: 这是客服代码,通常用于标识不同的客服系统。如果你不需要,可以省略。
- **`hideStart`**: 设置为`true`时,隐藏最小化按钮。
- **`onStart`**: 这是一个回调函数,用于自定义启动客服系统。你可以在这里定义自己的逻辑来启动客服系统。

#### 自定义按钮启动:
- 在`onStart`回调函数中,你可以通过`$('#chat').on('click', function() { ... })`来绑定一个自定义按钮的点击事件。当用户点击这个按钮时,客服系统会被初始化并显示。
- `xchat.toggle(1)`用于控制客服窗口的最大化和最小化。`1`表示最大化,`0`表示最小化。

### 3. 多个客服按钮的实现

如果你希望在一个页面上放置多个客服按钮,可以通过以下方式实现:

XChat.init({
    text: '客服1',
    name: '客服A',
    open: 0,
    hideStart: true,
    onStart: function(cb) {
      let init = false, xchat
      $('#chat1').on('click', function() {
            if (!init) {
                xchat = cb()
                init = true
            }
            xchat.toggle(1)
      })
    }
})

XChat.init({
    text: '客服2',
    name: '客服B',
    open: 0,
    hideStart: true,
    onStart: function(cb) {
      let init = false, xchat
      $('#chat2').on('click', function() {
            if (!init) {
                xchat = cb()
                init = true
            }
            xchat.toggle(1)
      })
    }
})

在这个例子中,我们初始化了两个不同的客服系统,分别绑定到`#chat1`和`#chat2`按钮上。每个按钮点击后都会启动对应的客服系统。

### 4. 注意事项
- 确保你引入的携信客服插件的JS文件路径正确。
- 如果你在页面上放置了多个客服按钮,确保每个按钮的ID是唯一的,并且与代码中的选择器匹配。
- 如果你需要更多的自定义功能,可以参考携信客服插件的官方文档或联系插件开发者获取支持。

希望这些信息对你有帮助!如果你有其他问题,欢迎继续提问。
-- 本回答由 人工智能 AI智能体 生成,内容仅供参考,请仔细甄别。
页: [1]
查看完整版本: 携信客服聊天系统插件【自定义引入】自定义按钮启动