MOS 客服系统集成文档

1. 客服号开通流程

1.1 进入客服号创建入口

1.2 基本信息配置

上传客服号头像，准确填写客服号名称、功能简介等基础信息，确认信息无误后点击「下一步」进入后续配置环节。

TIP

上图中显示的链接为客服号唯一访问地址，标准格式如下

https://mos.me/{YOUR_CUSTOMER_SERVICE_ID}

其中 {YOUR_CUSTOMER_SERVICE_ID} 为客服号唯一标识（即客服ID），需妥善保管并准确用于后续集成配置。

客服ID获取指引

登录 MOS 移动端应用
通过导航路径进入：服务 → 客服号 → 任意菜单项（如「数据」）
切换至「设置」标签页，点击头像及名称区域
当前页面地址中 https://mos.me/ 后缀的字符串即为客服ID（YOUR_CUSTOMER_SERVICE_ID）

1.3 服务话术配置与激活

根据业务需求配置客服欢迎语、常见语内容，完成配置后点击「完成」按钮，客服号将自动激活并可投入使用。

2. 客服系统接入方案

2.1 直接访问

用户在任意主流浏览器中输入客服号唯一访问地址（https://mos.me/{YOUR_CUSTOMER_SERVICE_ID}），即可直接进入在线对话界面，与客服人员建立实时沟通。该方式无需任何开发集成，适用于快速部署场景。

2.2 嵌入网页

2.2.1 方案概述

MOS 客服系统提供标准化 JavaScript SDK 嵌入式解决方案，支持将客服功能无缝集成至企业官方网站、会员中心等 Web 场景。方案采用异步加载机制，可避免对宿主页面渲染性能产生影响，保障用户访问体验。

效果预览:

2.2.2 集成实施步骤

在目标网页的 </body> 闭合标签前插入以下标准化集成代码片段
代码执行后将自动加载最新版客服系统 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://cdn-oss.mos.me/public/js/mossdk.js'; // 官方SDK资源地址
      s.parentNode.insertBefore(j, s);
  })(window, document, 'script', '_MOSCONFIG');
  // 初始化配置：替换为实际客服ID
  _MOSCONFIG('YOUR_CUSTOMER_SERVICE_ID'); 
</script>

2.2.3 技术规范与注意事项

代码部署位置：必须部署在 </body> 闭合标签前，确保 DOM 节点加载完成后执行 SDK 初始化
加载机制：采用非阻塞式异步加载，SDK 加载过程中不影响宿主页面的解析与渲染
身份认证：需将代码中的 YOUR_CUSTOMER_SERVICE_ID 替换为实际的客服ID，否则将无法正常接入服务
SDK 获取路径：官方 SDK 最新版本可通过 MOS 移动端获取，路径为：服务 → 客服号 → 任意菜单项 → 设置 → 系统集成 → 嵌入网页

2.3 客服系统 SDK

2.3.1 方案概述

MOS 提供完整版 JavaScript SDK，支持企业根据业务场景进行定制化集成，核心能力包括：

支持在网页任意 DOM 节点中嵌入客服窗口
支持结构化业务数据（如订单、商品信息）的实时传输
支持客户来源标识与对话上下文信息的精准传递
支持响应式布局，自动适配桌面端与移动端场景

效果预览:

2.3.2 SDK 获取与引用

2.3.2.1 SDK 获取

通过官方 CDN 下载最新稳定版本：mos-customer-service-sdk.umd.js

2.3.2.2 引用方式

通过标准 <script> 标签引入 SDK，引入后将自动在全局作用域注册 MosCustomerService 命名空间：

html


<!-- MOS 客服系统 SDK 引入 -->
<script src="mos-customer-service-sdk.umd.js"></script>

2.3.3 SDK 初始化与配置

2.3.3.1 容器准备

在网页中预先定义用于承载客服窗口的 DOM 容器，需明确设置容器宽高样式以确保正常渲染：

html


<body>
  <!-- 客服系统容器：宽高可根据业务场景调整 -->
  <div id="mos-cs-container" style="width: 1000px; height: 400px;"></div>
</body>

响应式布局说明

移动端适配：当容器宽度 ≤ 900px 时，SDK 自动启用移动端适配 UI 样式
桌面端适配：当容器宽度 > 900px 时，SDK 自动启用桌面端标准 UI 样式

2.3.3.2 实例初始化

通过 MosCustomerService.init() 方法初始化客服实例，传入容器节点与配置参数：

javascript


// 初始化客服系统实例
const csInstance = MosCustomerService.init(
  document.getElementById('mos-cs-container'), // 容器DOM节点
  {
    apiKey: 'YOUR_CUSTOMER_SERVICE_ID' // 客服ID（必填，替换为实际值）
  }
);

2.3.3.3 产品信息浮窗配置

通过 product 配置项可在客服窗口中展示商品/订单等业务信息浮窗，支持传递结构化数据：

typescript


// 产品信息数据结构定义
interface ProductInfo {
  title: string;       // 商品标题（必填项）
  desc?: string;       // 商品详细描述（选填）
  price?: string;      // 商品现价（选填，优先级高于desc）
  linePrice?: string;  // 商品划线价（选填）
  cover?: string;      // 封面图片URL（选填）
  linkUrl?: string;    // 详情页跳转URL（选填）
}

// 带产品信息的初始化示例
const csInstance = MosCustomerService.init(
  document.getElementById('mos-cs-container'),
  {
    apiKey: 'YOUR_CUSTOMER_SERVICE_ID',
    product: {
      title: '产品名称',
      desc: '产品详细描述信息',
      price: '$100.00',
      linePrice: '$199.00',
      cover: 'https://example.com/cover.jpg',
      linkUrl: 'https://example.com/detail'
    }
  }
);

2.3.3.4 消息发送接口

通过实例的 sendMessage() 方法可主动发送结构化消息，支持 Promise 链式调用：

javascript


/**
 * 发送订单信息示例
 * @returns {Promise<void>} 发送结果Promise
 */
async function sendOrderMessage() {
    const orderData = {
      title: '订单编号：ORD20240001',
      desc: '订单创建时间：2024-01-01 10:00:00',
      price: '$100.00',
      linePrice: '$200.00',
      cover: 'https://example.com/order-cover.jpg',
      linkUrl: 'https://example.com/order-detail?ord=20240001',
    };
    try {
      await csInstance.sendMessage(orderData);
      console.log('订单信息发送成功');
    } catch (error) {
      console.error('订单信息发送失败：', error);
    }
}

2.3.3.5 完整配置参数说明

配置项	是否必填	默认值	数据类型	描述
apiKey	是	-	String	客服号唯一标识（客服ID），用于身份认证与服务关联
timeout	否	30000	Number	消息发送超时时间，单位：毫秒（ms）
source	否	-	String	客户来源标识，用于数据分析与渠道追踪
product	否	-	Object	产品信息配置对象，结构参考 ProductInfo 接口

2.3.3.6 完整集成示例代码

html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MOS 客服系统 SDK 集成示例</title>
</head>
<body>
  <h1>MOS 客服系统演示</h1>
  <!-- 客服系统容器 -->
  <div id="mos-cs-container" style="width: 1000px; height: 400px; border: 1px solid #eee;"></div>
  
  <!-- 发送消息按钮 -->
  <button onclick="sendOrderMessage()" style="margin-top: 20px;">发送订单信息</button>
  
  <!-- SDK 引用 -->
  <script src="mos-customer-service-sdk.umd.js"></script>
  
  <!-- 初始化脚本 -->
  <script type="text/javascript">
    // 初始化客服实例
    const csInstance = MosCustomerService.init(
      document.getElementById('mos-cs-container'),
      {
        apiKey: 'YOUR_CUSTOMER_SERVICE_ID', // 替换为实际客服ID
        timeout: 30000,
        source: '官网首页', // 标识客户来源为官网首页
        product: {
          title: '旗舰产品套餐',
          price: '$299.00',
          linePrice: '$399.00',
          cover: 'https://example.com/product-cover.jpg',
          linkUrl: 'https://example.com/product/flagship'
        }
      }
    );

    // 发送订单信息函数
    async function sendOrderMessage() {
      const orderData = {
        title: '订单编号：ORD20240001',
        desc: '订单创建时间：2024-01-01 10:00:00',
        price: '$100.00',
        linePrice: '$200.00',
        cover: 'https://example.com/order-cover.jpg',
        linkUrl: 'https://example.com/order-detail?ord=20240001',
      };
      try {
        await csInstance.sendMessage(orderData);
        alert('订单信息发送成功');
      } catch (error) {
        alert('订单信息发送失败：' + error.message);
      }
    }
  </script>
</body>
</html>

3. 系统传参扩展能力

3.1 客户来源标识

3.1.1 功能说明

通过 source 参数可精确标识客户来源渠道（如官网、APP、社交媒体等），该参数支持用于：

多渠道流量数据分析与转化漏斗统计
客户画像构建中的渠道标签标注
营销推广活动的渠道效果评估

3.1.2 技术实现

在客服号访问 URL 后拼接 source 参数，参数值为自定义的渠道标识：

Plain


https://mos.me/{YOUR_CUSTOMER_SERVICE_ID}?source=XXX

效果预览:

3.2 上下文功能

3.2.1 功能说明

通过 URL 参数传递结构化业务数据（如商品信息、订单详情等），客服端可在对话初始化时直接获取该上下文信息，无需用户重复描述，提升沟通效率。核心启用参数为 isMsgCard=1（必填）。

3.2.2 参数规范定义

参数名	是否必填	数据类型	参数说明	示例值
isMsgCard	是	Number	上下文功能启用标识，固定值为1	1
title	是	String	消息主标题，用于快速识别上下文主题	旗舰产品咨询
desc	否	String	详细描述信息，补充主题内容	请问该产品支持定制吗？
cover	否	URL	封面图片资源地址，建议使用HTTPS协议	https://example.com/cover.jpg
linkUrl	否	URL	详情页跳转地址，点击可打开对应页面	https://example.com/product/123
price	否	String	商品现价，优先级高于desc字段	$299.00
linePrice	否	String	商品原价/划线价，用于价格对比展示	$399.00

技术规范要求

编码规范：所有参数值必须通过 encodeURIComponent() 进行编码，避免特殊字符导致参数解析异常
安全协议：图片、跳转链接等资源必须使用 HTTPS 协议，保障数据传输安全
长度限制：URL 总长度需控制在 2000 字符以内，避免超出主流浏览器 URL 长度限制

3.2.3 实现示例代码

javascript


/**
 * 生成带上下文参数的客服链接
 * @param {Object} contextData - 上下文数据对象
 * @param {string} serviceId - 客服ID
 * @returns {string} 编码后的客服访问链接
 */
function generateContextServiceUrl(contextData, serviceId) {
  // 强制设置上下文启用标识
  const params = { ...contextData, isMsgCard: 1 };
  
  // 对参数进行编码并拼接
  const queryString = Object.entries(params)
    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
    .join('&');
  
  // 拼接完整URL
  return `https://mos.me/${serviceId}?${queryString}`;
}

// 使用示例
const contextData = {
  title: '旗舰产品名称',
  desc: '产品详细描述信息',
  cover: 'https://example.com/product.jpg',
  linkUrl: 'https://example.com/product/123',
  price: '$120',
  linePrice: '$220'
};
const serviceUrl = generateContextServiceUrl(contextData, 'YOUR_CUSTOMER_SERVICE_ID');
console.log('带上下文的客服链接：', serviceUrl);

3.2.4 最终URL示例

Plain


https://mos.me/{YOUR_CUSTOMER_SERVICE_ID}?isMsgCard=1&title=%E6%97%97%E8%88%B0%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%E4%BF%A1%E6%81%AF&cover=https%3A%2F%2Fexample.com%2Fproduct.jpg&linkUrl=https%3A%2F%2Fexample.com%2Fproduct%2F123&price=%24120&linePrice=%24220

效果展示: 上下文效果

4. Telegram 集成方案

4.1 集成概述

通过集成 Telegram 机器人，可实现 Telegram 平台用户咨询消息同步至 MOS 客服系统，客服人员无需切换至 Telegram 后台，直接在 MOS 应用内完成消息回复，提升多渠道客服响应效率。

4.2 配置步骤

4.2.1 Telegram 机器人创建与配置

在 Telegram 客户端中搜索并添加 @BotFather 机器人
发送 /newbot 命令，按照指引完成机器人名称、用户名的设置
创建成功后，BotFather 将返回机器人令牌（Token），格式如下，需妥善保存：

Plain


110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw

详细创建说明可参考 Telegram 官方文档：BotFather 使用指南

4.2.2 MOS 系统集成配置

登录 MOS 移动端应用，通过导航路径进入：服务 → 客服号 → 设置
在设置页面中找到「集成 Telegram」功能模块
将步骤 4.2.1 中获取的机器人令牌粘贴至「Telegram Bot Token」输入框
点击「保存」按钮，完成集成配置

集成验证

配置完成后，可使用 Telegram 客户端向创建的机器人发送测试消息，若 MOS 客服系统能正常接收，则说明集成成功。

MOS 客服系统集成文档 ​

1. 客服号开通流程 ​

1.1 进入客服号创建入口 ​

1.2 基本信息配置 ​

1.3 服务话术配置与激活 ​

2. 客服系统接入方案 ​

2.1 直接访问 ​

2.2 嵌入网页 ​

2.2.1 方案概述 ​

2.2.2 集成实施步骤 ​

2.2.3 技术规范与注意事项 ​

2.3 客服系统 SDK ​

2.3.1 方案概述 ​

2.3.2 SDK 获取与引用 ​

2.3.2.1 SDK 获取 ​

2.3.2.2 引用方式 ​

2.3.3 SDK 初始化与配置 ​

2.3.3.1 容器准备 ​

2.3.3.2 实例初始化 ​

2.3.3.3 产品信息浮窗配置 ​

2.3.3.4 消息发送接口 ​

2.3.3.5 完整配置参数说明 ​

2.3.3.6 完整集成示例代码 ​

3. 系统传参扩展能力 ​

3.1 客户来源标识 ​

3.1.1 功能说明 ​

3.1.2 技术实现 ​

3.2 上下文功能 ​

3.2.1 功能说明 ​

3.2.2 参数规范定义 ​

3.2.3 实现示例代码 ​

3.2.4 最终URL示例 ​

4. Telegram 集成方案 ​

4.1 集成概述 ​

4.2 配置步骤 ​

4.2.1 Telegram 机器人创建与配置 ​

4.2.2 MOS 系统集成配置 ​

MOS 客服系统集成文档

1. 客服号开通流程

1.1 进入客服号创建入口

1.2 基本信息配置

1.3 服务话术配置与激活

2. 客服系统接入方案

2.1 直接访问

2.2 嵌入网页

2.2.1 方案概述

2.2.2 集成实施步骤

2.2.3 技术规范与注意事项

2.3 客服系统 SDK

2.3.1 方案概述

2.3.2 SDK 获取与引用

2.3.2.1 SDK 获取

2.3.2.2 引用方式

2.3.3 SDK 初始化与配置

2.3.3.1 容器准备

2.3.3.2 实例初始化

2.3.3.3 产品信息浮窗配置

2.3.3.4 消息发送接口

2.3.3.5 完整配置参数说明

2.3.3.6 完整集成示例代码

3. 系统传参扩展能力

3.1 客户来源标识

3.1.1 功能说明

3.1.2 技术实现

3.2 上下文功能

3.2.1 功能说明

3.2.2 参数规范定义

3.2.3 实现示例代码

3.2.4 最终URL示例

4. Telegram 集成方案

4.1 集成概述

4.2 配置步骤

4.2.1 Telegram 机器人创建与配置

4.2.2 MOS 系统集成配置