MOS Customer Service System Integration Documentation

1. Create Customer Service

Navigate to "Settings", click "Customer Service"

Click "Create a Customer Service" button

Select the avatar, enter name, description and other information, then click the "Next" button

Enter welcome message and common phrases, click the "Done" button to finish creation

2. Embed in web page

2.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.

2.2 Integration Steps

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

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

2.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

3. Customer Source Tracking

3.1 Base URL Structure

Standardized customer service access point URL format:

https://mos.me/{customer_service_id}

3.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

4. 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

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

JavaScript Example:

javascript

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: Context Effect

5. Customer Service SDK Technical Reference

5.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

5.2 SDK Installation

5.2.1 Download SDK

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

5.2.2 Reference Method

Include via standard script tag:

html

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

5.3 SDK Initialization

5.3.1 Container Preparation

Prepare a DOM container with defined dimensions:

html

<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

5.3.2 SDK Instantiation

javascript

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

Key Retrieval Guide

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

Configure product information display:

typescript

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
  }
});

5.3.4 Message Sending

javascript

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:

html

<!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>

6. Integration with Telegram

6.1 Setup Telegram

Talk to Telegram Botfather and set up a new bot, detailed instructions.
Copy the token BotFather gives you, it looks like this:
Plaintext
```
110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw
```

6.2 Setup MOS

In Customer Service - Settings - Telegram Integration, paste the token you obtained previously into the Telegram Bot Token input field, and save it.

MOS Customer Service System Integration Documentation ​

1. Create Customer Service ​

2. Embed in web page ​

2.1 Feature Overview ​

2.2 Integration Steps ​

2.3 Technical Specifications ​

3. Customer Source Tracking ​

3.1 Base URL Structure ​

3.2 Channel Identification System ​

4. Structured Message Context ​

5. Customer Service SDK Technical Reference ​

5.1 Feature Overview ​

5.2 SDK Installation ​

5.2.1 Download SDK ​

5.2.2 Reference Method ​

5.3 SDK Initialization ​

5.3.1 Container Preparation ​

5.3.2 SDK Instantiation ​

5.3.3 Product Popup Configuration ​

5.3.4 Message Sending ​

6. Integration with Telegram ​

6.1 Setup Telegram ​

6.2 Setup MOS ​

MOS Customer Service System Integration Documentation

1. Create Customer Service

2. Embed in web page

2.1 Feature Overview

2.2 Integration Steps

2.3 Technical Specifications

3. Customer Source Tracking

3.1 Base URL Structure

3.2 Channel Identification System

4. Structured Message Context

5. Customer Service SDK Technical Reference

5.1 Feature Overview

5.2 SDK Installation

5.2.1 Download SDK

5.2.2 Reference Method

5.3 SDK Initialization

5.3.1 Container Preparation

5.3.2 SDK Instantiation

5.3.3 Product Popup Configuration

5.3.4 Message Sending

6. Integration with Telegram

6.1 Setup Telegram

6.2 Setup MOS