MOS Customer Service System Integration Documentation

1. Embed in web page

1.1 Feature Overview

MOS provides a complete web embedding solution for customer service systems, enabling seamless integration into client websites through JavaScript SDK. This solution supports real-time communication between users and customer service representatives, with asynchronous loading mechanism to ensure no impact on page performance.

1.2 Integration Steps

1. Insert the standardized integration code snippet before the closing </body> tag of your webpage
2. The script will automatically load the latest customer service SDK and initialize the service entry component at the bottom right corner of the page

<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'); // Replace with your actual customer service ID
</script>

1.3 Technical Specifications

• Code Position: Must be inserted before the closing </body> tag
• Loading Mechanism: Non-blocking asynchronous loading ensures no impact on page rendering
• Authentication: Replace YOUR_CUSTOMER_SERVICE_KEY with your authorized customer service key
• Key Retrieval: Available in MOS mobile app: Settings → Customer Service → Details → More → System Integration → Web Embedding

2. Customer Source Tracking

2.1 Base URL Structure

Standardized customer service access point URL format:

https://mos.me/{customer_service_id}

2.2 Channel Identification System

Tracking Parameter: source (Required)

Function: Precisely identifies customer access channels for multi-dimensional marketing analysis

Implementation Example:

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

System Response: The customer service console will display channel information in real-time for subsequent data analysis

3. Structured Message Context

Core Parameter: isMsgCard=1 (Required)

Supports passing structured business data through standardized URL parameters to build complete conversation context.

Parameter Specifications:

Parameter	Required	Data Type	Description	Example
isMsgCard	Yes	Number	Context identifier (fixed value 1)	1
title	Yes	String	Message title	Product Introduction
desc	No	String	Detailed description	Click for details
cover	No	URL	Cover image URL	https://example.com/cover.jpg
linkUrl	No	URL	Redirect URL	https://example.com/product
price	No	String	Current price (overrides desc when present)	$120
linePrice	No	String	Original/strikethrough price	$129.9

Technical Notes

1. Encoding Standard: All parameter values must be URL encoded following RFC3986
2. Security Protocol: HTTPS is strongly recommended for resource links
3. Length Limit: Total parameter length should comply with browser URL length limits (~2000 chars)
4. Validation: System automatically validates required parameters and data types

JavaScript Example:

const params = {
    isMsgCard: 1,
    title: 'Product Name',
    desc: 'Product Description',
    cover: 'https://example.com/product.jpg',
    linkUrl: 'https://example.com/product',
    price: '$120',
    linePrice: '$220'
};

// Generate encoded URL parameters
const queryString = Object.entries(params)
    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
    .join('&');
const serviceUrl = `https://mos.me/xxxxyyyyzzz?${queryString}`;

Generated URL Example:

https://mos.me/xxxxyyyyzzz?isMsgCard=1&title=Product%20Name&desc=Product%20Description&cover=https%3A%2F%2Fexample.com%2Fproduct.jpg&linkUrl=https%3A%2F%2Fexample.com%2Fproduct&price=%24120&linePrice=%24220

Effect Preview:

4. Customer Service SDK Technical Reference

4.1 Feature Overview

MOS provides complete JavaScript SDK solution supporting:

• Flexible embedding in any website location
• Bidirectional real-time communication
• Structured business data transfer
• Customizable UI configuration

4.2 SDK Installation

4.2.1 Download SDK

Get the latest stable version: mos-customer-service-sdk.umd.js

4.2.2 Reference Method

Include via standard script tag:

<!-- Automatically registers global namespace MosCustomerService -->
<script src="mos-customer-service-sdk.umd.js"></script>

4.3 SDK Initialization

4.3.1 Container Preparation

Prepare a DOM container with defined dimensions:

<body>
  <!-- Container must have defined width/height styles -->
  <div id="mos-cs-container" style="width: 1000px;height:400px;"></div>
</body>

Responsive Layout

• Mobile UI: Activated when container width ≤ 900px
• Desktop UI: Activated when container width > 900px

4.3.2 SDK Instantiation

// Initialize customer service instance
const instance = MosCustomerService.init(
  document.getElementById('mos-cs-container'), 
  {
    apiKey: 'YOUR_CUSTOMER_SERVICE_KEY' // Authentication key
  }
);

Key Retrieval Guide

1. Access MOS management console
2. Navigate to: Customer Service → Details
3. Get unique identifier from service link Example: "xxxxyyyyzzz" from https://mos.me/xxxxyyyyzzz

4.3.3 Product Popup Configuration

Configure product information display:

interface ProductInfo {
  title: string;       // Product title (required)
  desc?: string;       // Product description
  price?: string;      // Current price (overrides desc when present)
  linePrice?: string;  // Original price
  cover?: string;      // Cover image URL
  linkUrl?: string;    // Details page URL
}

const instance = MosCustomerService.init(document.getElementById('mos-cs-container'), {
  apiKey: 'YOUR_CUSTOMER_SERVICE_KEY',
  product: {
    title: 'Product Name',
    ... // Other optional fields
  }
});

4.3.4 Message Sending

function sendOrderMessage() {
    const data = {
      title: 'Order Title',
      desc: 'Order Description',
      price: '$100.00',
      linePrice: '$200.00',
      cover: 'https://example.com/order-cover.jpg',
      linkUrl: 'https://example.com/order-detail.html',
    };
    // Supports Promise-style calling
    instance.sendMessage(data);
}

Complete Configuration Options:

Option	Required	Default	Type	Description
apiKey	Yes	-	String	Customer service authentication key
timeout	No	30000	Number	Message sending timeout (ms)
source	No	-	String	Channel identifier
product	No	-	Object	Product information configuration

Complete Example Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MOS Customer Service Integration Example</title>
  </head>
  <body>
    <!-- Customer service container -->
    <div id="mos-cs-container" style="width: 1000px;height:400px;"></div>
    
    <!-- SDK reference -->
    <script src="mos-customer-service-sdk.umd.js"></script>
    
    <!-- Initialization script -->
    <script type="text/javascript">
      // Initialize customer service instance
      const instance = MosCustomerService.init(
        document.getElementById('mos-cs-container'), 
        {
          apiKey: 'YOUR_CUSTOMER_SERVICE_KEY',
          timeout: 30000,
          source: 'Web',
          product: {
            title: 'Order Title',
            desc: 'Order Description',
            price: '$100.00',
            linePrice: '$200.00',
            cover: 'https://example.com/order-cover.jpg',
            linkUrl: 'https://example.com/order-detail.html',
          }
        }
      );

      // Message sending function
      function sendOrderMessage() {
          const data = {
            title: 'Order Title',
            desc: 'Order Description',
            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>