返回首页
嵌入文档

万跃AI客服

将智能客服嵌入到您的网站或小程序中

快速开始

3步快速将AI客服嵌入您的网站：

1

创建嵌入配置

登录管理后台 → 嵌入配置 → 创建新配置

2

获取嵌入代码

点击"获取代码"按钮，复制系统生成的嵌入代码

3

添加到网站

将代码粘贴到网站HTML的 <body> 结束前，保存即可

嵌入方式

标准嵌入

最简单的方式，一行代码即可完成：

<script>
  window.wanyueConfig = {
    authCode: "您的授权码",
    apiUrl: window.location.origin
  };
</script>

React / Vue

在现代前端框架中使用：

// React
useEffect(() => {
  const script = document.createElement('script');
  script.src = window.location.origin + '/static/embed.js';
  document.body.appendChild(script);
  window.wanyueConfig = { authCode: "您的授权码" };
}, []);

// Vue 3
onMounted(() => {
  const script = document.createElement('script');
  script.src = window.location.origin + '/static/embed.js';
  document.body.appendChild(script);
  window.wanyueConfig = { authCode: "您的授权码" };
});

配置参数

参数 类型 默认值 说明
authCode string - 必填，您的授权码
apiUrl string 当前域名 API服务器地址
position string right 位置: left / right
themeColor string #2563eb 主题颜色(十六进制)
welcomeMessage string 系统配置 欢迎语(为空时使用系统配置)
height string 480px
width string 340px 聊天窗口宽度
title string AI 客服 窗口标题
subtitle string 在线回复 窗口副标题
backgroundColor string #ffffff 窗口背景颜色
headerBackground string 渐变色 头部背景(支持渐变)
textColor string #1f2937 文字颜色
fontSize string 14px 字体大小
borderRadius string 20px 圆角大小
iconStyle string circle 图标样式: circle / rounded / square
buttonSize string 60px 启动按钮大小
bottomOffset string 100px 按钮距离底部距离
zIndex number 999999 z-index层级
autoOpen boolean false 自动打开窗口
autoShowWelcome boolean true 显示欢迎消息
showHistory boolean true 显示对话历史
enableVoice boolean false 启用语音输入
enableEmoji boolean false 启用Emoji选择器
enableFileUpload boolean false 启用文件上传
enableRating boolean true 启用消息评价
enableSound boolean true 启用提示音
enterToSend boolean true 回车发送消息
enableMarkdown boolean true 启用Markdown渲染
placeholder string 输入消息... 输入框占位符
sendButtonText string 发送 发送按钮文字
customCSS string - 自定义CSS样式

配置示例

以下是不同风格的配置示例，您可以根据需要组合使用：

示例1: 简约蓝色风格

<script>
window.wanyueConfig = {
    authCode: '您的授权码',
    themeColor: '#2563eb',
    position: 'right',
    width: '340px',
    height: '480px',
    borderRadius: '16px'
};
</script>

示例2: 左侧显示风格

<script>
window.wanyueConfig = {
    authCode: '您的授权码',
    position: 'left',
    bottomOffset: '80px',
    buttonSize: '50px'
};
</script>

示例3: 自定义颜色

<script>
window.wanyueConfig = {
    authCode: '您的授权码',
    themeColor: '#10b981',        // 绿色主题
    headerBackground: 'linear-gradient(135deg, #10b981, #059669)',
    backgroundColor: '#f0fdf4',
    borderRadius: '24px'
};
</script>

示例4: 紫色炫酷风格

<script>
window.wanyueConfig = {
    authCode: '您的授权码',
    themeColor: '#3b82f6',
    headerBackground: 'linear-gradient(135deg, #3b82f6, #2563eb)',
    title: '智能助手',
    subtitle: '随时为您服务',
    width: '360px',
    height: '520px',
    fontSize: '15px'
};
</script>

示例5: 暗黑模式

<script>
window.wanyueConfig = {
    authCode: '您的授权码',
    themeColor: '#6366f1',
    headerBackground: 'linear-gradient(135deg, #6366f1, #4f46e5)',
    backgroundColor: '#1e293b',
    textColor: '#e2e8f0',
    borderRadius: '12px',
    buttonSize: '56px'
};
</script>

示例6: 圆角方形

<script>
window.wanyueConfig = {
    authCode: '您的授权码',
    iconStyle: 'square',
    buttonSize: '56px',
    borderRadius: '8px',
    fontSize: '13px'
};
</script>

示例7: 自定义功能

<script>
window.wanyueConfig = {
    authCode: '您的授权码',
    placeholder: '有什么问题问我...',
    sendButtonText: '发送',
    enableRating: true,
    enableCopy: true,
    enableMarkdown: true,
    enterToSend: true,
    enableSound: true
};
</script>

小程序嵌入

通过API接口接入微信小程序、uni-app、Flutter等平台。

获取配置ID

管理后台 → 嵌入配置，创建配置后记录对应的 配置ID。

对话接口

POST /api/public/chat

请求参数

参数 类型 说明
message string 必填，用户消息
session_key string 会话标识
embed_config_id int 必填，嵌入配置ID
use_knowledge_base bool 是否使用知识库

代码示例

微信小程序

async function sendMessage(message, sessionKey, configId) {
  const baseUrl = 'https://kf.vanyue.cn';
  const res = await wx.request({
    url: `${baseUrl}/api/public/chat`,
    method: 'POST',
    data: {
      message,
      session_key: sessionKey,
      embed_config_id: configId,
      use_knowledge_base: true
    }
  });
  return res.data;
}

uni-app

async function sendMessage(message, sessionKey, configId) {
  const baseUrl = 'https://kf.vanyue.cn';
  const res = await uni.request({
    url: `${baseUrl}/api/public/chat`,
    method: 'POST',
    data: { message, session_key: sessionKey, embed_config_id: configId }
  });
  return res.data;
}

Flutter

Future> sendMessage(
  String message, String sessionKey, int configId
) async {
  final res = await http.post(
    Uri.parse('https://kf.vanyue.cn/api/public/chat'),
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode({
      'message': message,
      'session_key': sessionKey,
      'embed_config_id': configId
    }),
  );
  return jsonDecode(res.body);
}

注意： 替换 BaseUrl 为您的实际服务器地址，configId 替换为您的嵌入配置ID

常见问题

嵌入代码放在哪里？

建议放在 HTML 页面的 <body> 标签结束前。

需要配置域名吗？

是的，需要在嵌入配置中设置允许的域名，只有白名单域名才能正常加载。

客服不显示怎么办？

请检查：1) authCode 是否正确 2) 域名是否在白名单 3) 浏览器控制台是否有错误

支持 HTTPS 吗？

支持，建议使用 HTTPS 确保数据传输安全。

获取帮助

官方网站

访问官网获取更多信息

邮件支持

联系技术支持团队

© 2026 万跃AI客服 · 智能客服解决方案