简体中文

English

简体中文

English

Appearance

MOS 客服系统集成文档 ​

1. 开通客服号 ​

导航到“设置”，点击“客服号”

步骤1

点击“创建客服号”按钮

步骤2

选择头像，输入名称、简介等信息，点击“下一步”按钮

步骤3

输入欢迎语、常用语，点击“完成”按钮，即可创建完成

步骤4

2. 嵌入网页 ​

2.1 功能概述 ​

MOS 客服系统提供完整的网页嵌入式解决方案，支持通过 JavaScript SDK 将客服功能无缝集成至客户网站，实现用户与客服人员的实时在线沟通功能。本方案采用异步加载机制，确保不影响宿主页面性能。

效果预览:

客服插件效果

2.2 集成步骤 ​

  1. 在目标网页的</body>闭合标签前插入标准化集成代码片段
  2. 该脚本将自动加载最新版客服系统SDK，并在页面右下角初始化客服入口组件
html
<script type="text/javascript">
  (function(m, ei, q, i, a, j, s) {
      m[i] = m[i] || function() {
          (m[i].a = m[i].a || []).push(arguments)
      };
      j = ei.createElement(q),
          s = ei.getElementsByTagName(q)[0];
      j.async = true;
      j.charset = 'UTF-8';
      j.src = 'https://oss-test.mos.me/public/js/mossdk.js';
      s.parentNode.insertBefore(j, s);
  })(window, document, 'script', '_MOSCONFIG');
  _MOSCONFIG('YOUR_CUSTOMER_SERVICE_KEY'); // 请替换为您的实际客服ID
</script>

2.3 技术规范与注意事项 ​

  • 代码位置：必须确保集成代码插入在</body>闭合标签之前
  • 加载机制：采用非阻塞式异步加载技术，确保不影响页面渲染性能
  • 安全认证：请将YOUR_CUSTOMER_SERVICE_KEY替换为您实际的客服ID
  • 脚本获取：可通过 MOS 移动端，路径：设置 → 客服号 → 客服号详情 → 更多 → 系统集成 → 嵌入网页

3. 客户来源 ​

3.1 基础URL架构 ​

客服系统接入点采用标准化URL格式：

https://mos.me/{YOUR_CUSTOMER_SERVICE_KEY}

3.2 客户来源标识 ​

参数: source (必填)

功能说明: 用于精确标识客户来源渠道，可用于客服系统数据分析、客户画像、营销推广等场景。

技术实现示例:

https://mos.me/xxxxyyyyzzz?source=web_promotion

效果预览:

客户来源显示效果

4. 上下文功能 ​

核心参数: isMsgCard=1 (必填)

支持通过标准化URL参数传递结构化业务数据，构建完整对话上下文。

参数规范表:

参数必填数据类型说明示例值
isMsgCard是Number上下文功能标识符，固定值11
title是String消息主标题产品介绍
desc否String详细描述内容点击查看详情
cover否URL封面图片资源地址https://example.com/cover.jpg
linkUrl否URL详情页跳转地址https://example.com/product
price否String商品现价(优先级高于desc)$120
linePrice否String商品原价/划线价$129.9

技术注意事项

  1. 编码规范：所有参数值必须进行 encodeURIComponent 编码
  2. 安全协议：资源链接强烈建议使用HTTPS安全协议
  3. 长度限制：参数总长度需符合主流浏览器URL长度限制(约2000字符)

JavaScript示例:

javascript
const params = {
    isMsgCard: 1,
    title: '产品名称',
    desc: '产品详细描述',
    cover: 'https://example.com/product.jpg',
    linkUrl: 'https://example.com/product',
    price: '$120',
    linePrice: '$220'
};

// 生成编码后的URL参数
const queryString = Object.entries(params)
    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
    .join('&');
const serviceUrl = `https://mos.me/xxxxyyyyzzz?${queryString}`;

生成URL示例:

https://mos.me/xxxxyyyyzzz?isMsgCard=1&title=%E4%BA%A7%E5%93%81%E5%90%8D%E7%A7%B0&desc=%E4%BA%A7%E5%93%81%E8%AF%A6%E7%BB%86%E6%8F%8F%E8%BF%B0&cover=https%3A%2F%2Fexample.com%2Fproduct.jpg&linkUrl=https%3A%2F%2Fexample.com%2Fproduct&price=%24120&linePrice=%24220

效果展示: 上下文效果

5. 客服系统 SDK ​

5.1 功能概述 ​

MOS 提供完整的 JavaScript SDK 解决方案，支持：

  • 灵活嵌入网站任意位置
  • 结构化业务数据传输
  • 客户来源及上下文功能

效果预览:

内联客服系统效果

5.2 SDK 安装与引用 ​

5.2.1 获取SDK ​

下载最新稳定版本: mos-customer-service-sdk.umd.js

5.2.2 引用方式 ​

通过标准script标签引入：

html
<!-- 引入后自动注册全局命名空间 MosCustomerService -->
<script src="mos-customer-service-sdk.umd.js"></script>

5.3 SDK 初始化与配置 ​

5.3.1 容器准备 ​

需预先准备符合规范的DOM容器：

html
<body>
  <!-- 容器需明确定义宽高样式 -->
  <div id="mos-cs-container" style="width: 1000px;height:400px;"></div>
</body>

响应式布局说明

  • 移动端适配：容器宽度 ≤ 900px 时自动启用移动端UI
  • 桌面端适配：容器宽度 > 900px 时自动启用PC端UI

5.3.2 创建实例 ​

javascript
// 初始化客服系统实例
const instance = MosCustomerService.init(
  document.getElementById('mos-cs-container'), 
  {
    apiKey: 'YOUR_CUSTOMER_SERVICE_KEY' // 客服ID
  }
);
客服ID获取指引
  1. 访问 MOS 移动端
  2. 导航至：设置 → 客服号 → 客服号详情
  3. 获取客服号链接中的唯一标识符 示例：https://mos.me/xxxxyyyyzzz 中的"xxxxyyyyzzz"

5.3.3 产品信息浮窗配置 ​

通过product配置项实现商品信息展示：

typescript
interface ProductInfo {
  title: string;       // 商品标题(必填)
  desc?: string;       // 商品描述
  price?: string;      // 商品现价(优先级高于desc)
  linePrice?: string;  // 商品划线价
  cover?: string;      // 封面图URL
  linkUrl?: string;    // 详情页URL
}

const instance = MosCustomerService.init(document.getElementById('mos-cs-container'), {
  apiKey: 'YOUR_CUSTOMER_SERVICE_KEY',
  product: {
    title: '产品名称',
    ... // 其他可选字段
  }
});

5.3.4 消息发送接口 ​

javascript
function sendOrderMessage() {
    const data = {
      title: '订单标题',
      desc: '订单描述',
      price: '$100.00',
      linePrice: '$200.00',
      cover: 'https://example.com/order-cover.jpg',
      linkUrl: 'https://example.com/order-detail.html',
    };
    // 支持 Promise 调用方式
    instance.sendMessage(data);
}

完整配置选项说明:

配置项必填默认值数据类型描述
apiKey是-String客服ID
timeout否30000Number消息发送超时时间(ms)
source否-String客户来源标识
product否-Object产品信息配置对象

完整示例代码:

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MOS客服系统集成示例</title>
  </head>
  <body>
    <!-- 客服系统容器 -->
    <div id="mos-cs-container" style="width: 1000px;height:400px;"></div>
    
    <!-- SDK引用 -->
    <script src="mos-customer-service-sdk.umd.js"></script>
    
    <!-- 初始化脚本 -->
    <script type="text/javascript">
      // 初始化客服系统实例
      const instance = MosCustomerService.init(
        document.getElementById('mos-cs-container'), 
        {
          apiKey: 'YOUR_CUSTOMER_SERVICE_KEY',
          timeout: 30000,
          source: '网页端',
          product: {
            title: '订单标题',
            desc: '订单描述',
            price: '$100.00',
            linePrice: '$200.00',
            cover: 'https://example.com/order-cover.jpg',
            linkUrl: 'https://example.com/order-detail.html',
          }
        }
      );

      // 消息发送函数
      function sendOrderMessage() {
          const data = {
            title: '订单标题',
            desc: '订单描述',
            price: '$100.00',
            linePrice: '$200.00',
            cover: 'https://example.com/order-cover.jpg',
            linkUrl: 'https://example.com/order-detail.html',
          };
          instance.sendMessage(data);
      }
    </script>
  </body>
</html>

6. 集成Telegram ​

6.1 设置Telegram ​

  1. 与 Telegram Botfather 交谈并设置一个新机器人，详细说明

  2. 复制 BotFather 给你的令牌 ，它看起来像这样：

    plaintext
    110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw

6.2 设置MOS ​

  1. 在客服号-设置-集成Telegram中，将之前获取的令牌粘贴到 Telegram Bot Token 输入框中 ，然后保存