集成脚本 - 商户管理后台 - 长沙造梦空间网络科技有限公司提供技术支持

总脚本数

可用脚本

Script标签

集成脚本列表

加载中...

🛠️ 集成代码生成器

通过可视化配置快速生成适合您网站的聊天组件集成代码

⚙️ 基础配置

服务器设置

服务器地址

网站分组标识 *（必选）

必须选择网站分组后才能生成代码

用户信息

用户ID

只允许字母、数字、下划线，最多50字符

用户显示名称

用户头像URL

⚙️ 行为配置

自动打开聊天窗口

页面加载后自动打开聊天窗口

启用事件回调函数

包含 onOpen、onClose、onError 回调函数，用于自定义处理聊天组件事件

🎨 样式配置说明：

聊天组件的外观样式（按钮颜色、位置、大小等）需要在网站分组设置中的模板配置功能进行设置。

每个网站分组可以配置独立的界面样式，实现不同网站的个性化外观。

🔗 URL直接访问方式

除了嵌入式集成外，您还可以通过URL直接访问聊天页面，适合APP内嵌WebView或独立客服页面场景。

💡 提示：URL直接访问链接会自动使用上方"基础配置"中的服务器地址、网站分组和用户信息。

修改上方配置后，链接会自动更新。

生成的直接访问链接

请先在上方选择网站分组

💡 URL参数说明：

userId - 用户唯一标识（建议使用UUID或加密ID）
userDisplayName - 用户显示名称（可选）
userAvatar - 用户头像URL（可选，需URL编码）
autoOpen - 是否自动打开聊天（可选，true/false）
customData - 自定义数据JSON（可选，需URL编码）

📝 生成的代码

💡 使用说明：

生成完整代码：生成包含 <script> 标签的完整HTML代码，可直接粘贴到网页中
生成纯JS代码：生成纯JavaScript代码，适合放在现有的 <script> 标签内或JS文件中
配置完参数后选择合适的代码生成方式
复制生成的代码并粘贴到您的网页中
点击"测试代码"可以在新窗口中预览效果
建议将代码放在 </body> 标签之前

🚀 聊天组件接入教程

快速将智能客服聊天组件集成到您的网站，提升用户体验和客户服务质量

💡 当前服务器地址： 载入中...

⚡ 快速开始

只需要在您的网页中添加以下代码，即可快速集成聊天组件：

🎯 极简引入（推荐）

最简单的方式，只需一行代码即可启用聊天组件：

<script src="载入中.../static/js/chat-widget.js"></script>

💡 说明： 组件会自动检测服务器地址，无需额外配置即可使用默认设置。

🔧 标准配置引入

如需自定义配置，可以先设置配置参数：

<script>
window.GoCustomerServiceConfig = {
    serverUrl: '载入中...' // 您的服务器地址
};
</script>
<script src="载入中.../static/js/chat-widget.js"></script>

🏢 接入指定网站分组

<script>
window.GoCustomerServiceConfig = {
    serverUrl: '载入中...',
    groupKey: 'your-group-key',     // 在后台网站分组管理中创建的分组标识
    userId: 'user123',              // 用户唯一标识
    userDisplayName: '用户名称',     // 用户显示名称
    userAvatar: 'https://example.com/avatar.jpg'  // 用户头像URL
};
</script>
<script src="载入中.../static/js/chat-widget.js"></script>

📋 常用配置参数

以下是聊天组件的主要配置参数：

🆔 用户标识

设置唯一的用户ID，用于会话跟踪和历史记录关联。

<script>
window.GoCustomerServiceConfig = {
    serverUrl: '载入中...',
    userId: 'user_a1b2c3d4e5f6',  // 推荐：使用UUID或加密后的ID
    userDisplayName: '张三',
    userAvatar: 'https://example.com/avatar.jpg'
};
</script>
<script src="载入中.../static/js/chat-widget.js"></script>

⚠️ 安全提示：

避免使用纯数字ID（如123、456），容易被猜测
推荐使用UUID、哈希值或加密后的用户ID
长度不超过50个字符，只允许字母、数字、下划线(_)

🔘 浮动按钮模式

默认的右下角浮动按钮，适合大多数网站。

<script>
window.GoCustomerServiceConfig = {
    serverUrl: '载入中...',
    showFloatingButton: true,
    buttonText: '人工咨询',
    buttonIcon: 'default'
};
</script>
<script src="载入中.../static/js/chat-widget.js"></script>

🎨 外观定制

自定义浮动按钮的颜色、大小和位置。

<script>
window.GoCustomerServiceConfig = {
    serverUrl: '载入中...',
    buttonColor: '#ff6b6b',
    buttonHoverColor: '#ff5252',
    buttonSize: '70px',
    buttonBottom: '30px',
    buttonRight: '30px'
};
</script>
<script src="载入中.../static/js/chat-widget.js"></script>

🔒 隐藏浮窗模式

完全隐藏浮动按钮，仅通过自定义元素触发。

<script>
window.GoCustomerServiceConfig = {
    serverUrl: '载入中...',
    showFloatingButton: false,
    triggerSelectors: ['#custom-chat-btn']
};
</script>
<script src="载入中.../static/js/chat-widget.js"></script>

📊 完整配置参数表

参数名	类型	默认值	说明
`serverUrl`	String	`undefined`	聊天服务器地址，必填参数
`userId`	String	`undefined`	🔑 核心重要参数 - 用户唯一标识，是系统识别和跟踪用户会话的关键组成部分。格式要求： • 长度不超过50个字符 • 只允许字母、数字、下划线(_) • 避免使用纯数字ID（如123、456），建议使用UUID或加密后的ID ⚠️ 安全提示：此参数直接关联用户的聊天历史记录，不要使用容易被猜测的连续ID，以防止他人获取其他用户的聊天记录。 💡 推荐格式：user_a1b2c3d4、uuid_v4、hash_value等
`userDisplayName`	String	`undefined`	用户显示名称，在聊天界面中显示
`userAvatar`	String	`undefined`	用户头像URL，在聊天界面中显示
`groupKey`	String	`undefined`	分组标识，用于数据隔离。设置后将自动构建 /g/{groupKey} 路径访问
`customData`	Object	`undefined`	自定义数据，会传递给聊天界面
`triggerElementId`	String	`undefined`	兼容性参数，指定触发元素的ID（推荐使用triggerSelectors）
`showFloatingButton`	Boolean	true	是否显示右下角浮动按钮
`triggerSelectors`	Array	[]	触发聊天窗口的CSS选择器数组
`buttonIcon`	String	'default'	按钮图标，支持emoji、SVG代码或HTML
`buttonText`	String	'人工咨询'	按钮显示的文字
`buttonColor`	String	'#00A0E9'	按钮背景颜色（CSS颜色值）
`buttonSize`	String	'60px'	按钮的大小（宽度和高度）
`showButtonText`	Boolean	true	是否显示按钮文字标签
`buttonHoverColor`	String	'#0080C7'	按钮悬停时的背景颜色
`buttonBottom`	String	'24px'	按钮距离页面底部的距离
`buttonRight`	String	'24px'	按钮距离页面右侧的距离
`modalOffset`	String	'12px'	弹窗与按钮的距离
`autoOpen`	Boolean	false	页面加载后是否自动打开聊天窗口
`enableSound`	Boolean	true	是否启用新消息声音提醒

🛠️ 调试方式

在开发过程中，您可以使用以下方式进行调试：

1. 浏览器控制台调试

// 在浏览器控制台中检查配置
console.log('聊天组件配置:', window.GoCustomerServiceConfig);

// 检查组件是否加载成功
console.log('聊天组件实例:', window.GoCustomerServiceWidget);

// 手动打开聊天窗口
if (window.GoCustomerServiceWidget) {
    window.GoCustomerServiceWidget.open();
}

2. 网络请求调试

在浏览器开发者工具的Network标签页中，检查以下请求：

WebSocket连接：载入中...
静态资源加载：载入中.../static/js/chat-widget.js
API请求：载入中.../api/chat/*

3. 错误处理

<script>
window.GoCustomerServiceConfig = {
    serverUrl: '载入中...',
    onError: function(error) {
        console.error('聊天组件错误:', error);
        // 自定义错误处理逻辑
    },
    onOpen: function() {
        console.log('聊天窗口已打开');
    },
    onClose: function() {
        console.log('聊天窗口已关闭');
    }
};
</script>
<script src="载入中.../static/js/chat-widget.js"></script>

🚀 一键集成脚本

复制以下完整的集成代码，直接粘贴到您的网页中：

<!-- 智能客服聊天组件 -->
<script>
(function() {
    // 配置参数
    window.GoCustomerServiceConfig = {
        serverUrl: '载入中...',
        
        // 用户信息（可选）
        userId: 'user_' + Date.now(),
        userDisplayName: '访客',
        
        // 外观配置
        showFloatingButton: true,
        buttonText: '人工咨询',
        buttonIcon: 'default',
        buttonColor: '#00A0E9',
        buttonHoverColor: '#0080C7',
        
        // 位置配置
        buttonBottom: '24px',
        buttonRight: '24px',
        buttonSize: '60px',
        
        // 行为配置
        autoOpen: false,
        enableSound: true,
        
        // 事件回调
        onOpen: function() {
            console.log('客服聊天窗口已打开');
        },
        onClose: function() {
            console.log('客服聊天窗口已关闭');
        },
        onError: function(error) {
            console.error('客服聊天组件错误:', error);
        }
    };
    
    // 动态加载聊天组件脚本
    var script = document.createElement('script');
    script.src = '载入中...' + '/static/js/chat-widget.js';
    script.async = true;
    script.onerror = function() {
        console.error('聊天组件加载失败，请检查服务器地址');
    };
    document.head.appendChild(script);
})();
</script>