tencent cloud

Cloud Contact Center

Announcement
What's New
Cloud Contact Center Terminology Update
What is Tencent Cloud Contact Center
Overview
Feature List
Terms Introduction
Handling Firewall Restrictions
AI Voicebot
Billing Guide
Voice Call Billing Overview
Desk Billing Overview
View Billing
Refund Policy
New User Guide
Voice Guide
Desk Guide
Use Case
Inbound: Customer Experience
Outbound: Telemarketing
Auto Dialer: Voice Notification
Integration Use Case (SDK）
Administrator Guide
Voice Guide
Desk Guide
Member Guide
Voice Guide
Desk Guide
AI Voice Agent Guide
Introducing AI Voice Agent
AI Voice Agent Practical Tutorial
Set Up Your AI Voice Agent
Activate AI Voice Agent Call
AI Voice Agent Call Logs
Developer Guide
SDK Development Guide
Data Push
Voice API Reference
History
Introduction
API Category
Making API Requests
Agent APIs
Skill Group APIs
Number APIs
Dual Call APIs
Predictive Outbound Call APIs
SIP Phone APIs
Call Service Record APIs
Billing APIs
Other APIs
Outbound Call APIs
Speech Intelligent Agent APIs
Data Types
Error Codes
Desk API Reference
API Reference
Callback Configuration
FAQs
Data Deletion Guide
Legal
Privacy Policy
Data Processing And Security Agreement
Service Level Agreements
TENCENT CLOUD CONTACT CENTRE TERMS OF USE
Glossary
Contact Us
DocumentationCloud Contact CenterDeveloper GuideSDK Development GuideDesk Client SDKIntegrating Desk Client SDKWeb（vue2/vue3）

Web（vue2/vue3）

PDF
Focus Mode
Font Size
Last updated: 2025-08-20 10:28:26

Introduction

Customer Service Desk Web UIKit. Using this UIKit, you can integrate the capabilities of Customer Service into your Web or Hybrid projects within one day. Minimize the integration, and use AI to increase revenue and improve efficiency for your products.

Preview



Developer Environment Requirements

Vue (fully support Vue2 & Vue3, please choose your matched Vue version access guide when accessing below)
TypeScript (if you are a JavaScript Project, please see Common Issues - How to integrate TUIKit component in a JavaScript project to configure TypeScript Progressive Support)
sass (sass-loader version ≤ 10.1.1)
node(node.js ≥ 16.0.0)
npm (version should match the node version)

UIKit Integration

Step 1: Project Creation

Supports the use of webpack or vite to create a project, configured with Vue3/Vue2 + TypeScript + sass. The following is several project setup examples:
vue-cli
vite
Note:
1. Ensure your @vue/cli version is above 5.0.0. You can use the following example code to upgrade @vue/cli to v5.0.8.
2. If your project was created with a @vue/cli lower version, and there is an error after seamless integration with UIKit, see common issues for problem-solving.
Create a project using vue-cli, configured with Vue2/Vue3 + TypeScript + sass.
If you have not installed vue-cli or the vue-cli version is lower than 5.0.0, you can install it in terminal or cmd in the following ways:
npm install -g @vue/cli@5.0.8 sass sass-loader@10.1.1
Create a project using vue-cli and choose the selected configuration in the figure below.
vue create ai-desk-example
Ensure to select the following configuration:



After creation, switch to the project directory.
cd ai-desk-example
If you are a vue 2 project, configure the environment based on the vue version used by you. Ignore it for vue 3 projects.
vue2.7
Vue 2.6 and Below
npm i vue@2.7.9 vue-template-compiler@2.7.9
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
Note:
Warning: Vite requires Node.js version 18+ or 20+. When your package manager issues a warning, please upgrade your Node Version. For details, refer to Vite Official Website.
Create a project using vite, configured with Vue + TypeScript as the figure below.
npm create vite@latest

Switch to the project directory afterward and install the project dependencies.
cd ai-desk-example
npm install
Install plugin required sass environment dependency.
npm i -D sass sass-loader
Purge default project styles to avoid styling issues.
MacOS Client
Windows (PowerShell)
Windows (CMD)
echo -n > src/style.css
Clear-Content -Path src/style.css
echo. > src\\style.css

Step 2: Download UI Component

Download the UI component via npm and copy it to the src directory of your project.
MacOS
Windows (CMD)
npm i @tencentcloud/ai-desk-customer-vue@latest
mkdir -p ./src/ai-desk-customer-vue && rsync -av --exclude={'node_modules','excluded-list.txt'} ./node_modules/@tencentcloud/ai-desk-customer-vue/ ./src/ai-desk-customer-vue
npm i @tencentcloud/ai-desk-customer-vue@latest
xcopy .\\node_modules\\@tencentcloud\\ai-desk-customer-vue .\\src\\ai-desk-customer-vue /i /e /exclude:.\\node_modules\\@tencentcloud\\ai-desk-customer-vue\\excluded-list.txt

Step 3: Import UI Component

Introduce the UI Component on the Page to Be Displayed and It Can Be Used
For Example: Implement the Following Code on the App.Vue Page to Quickly Deploy the Customer Service Inquiry Interface (The Following Example Code Simultaneously Supports the Web and H5)
Note:
The following example code uses setup syntax. If your project does not use setup syntax, please register the component according to the standard method of Vue3/Vue2.
vue3
vue2.7
Vue 2.6 and Below
<template>
  <CustomerServiceChat
    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
  />
</template>
<script setup lang="ts">
import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
import { onMounted } from "vue";

onMounted(() => {
  const SDKAppID = 0; // Your SDKAppID, the application ID with customer service Desk enabled
  const userID = ''; // Your userID, reusable account system of your app or randomly generated
  const userSig = ''; // Your userSig, can be generated by the console during the integration stage, and must be generated by the server during the production stage
  TUICustomerServer.init(SDKAppID, userID, userSig);
});
</script>
<style scoped>
</style>
<template>
  <div id="app">
    <CustomerServiceChat
      :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
    />
  </div>
</template>
<script lang="ts" setup>
import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
import vue from './ai-desk-customer-vue/adapter-vue';

const { onMounted } = vue;

onMounted(() => {
  const SDKAppID = 0; // Your SDKAppID
  const userID = ''; // Your userID
  const userSig = ''; // Your userSig
  TUICustomerServer.init(SDKAppID, userID, userSig);
});
</script>
<style lang="scss">
</style>
<template>
  <div id="app">
    <CustomerServiceChat
      :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
    />
  </div>
</template>
<script lang="ts" setup>
import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
import vue from './ai-desk-customer-vue/adapter-vue';

const { onMounted } = vue;

onMounted(() => {
  const SDKAppID = 0; // Your SDKAppID
  const userID = ''; // Your userID
  const userSig = ''; // Your userSig
  TUICustomerServer.init(SDKAppID, userID, userSig);
});
</script>
<style lang="scss">
</style>
1. Introduce VueCompositionAPI in main.ts/main.js.
import VueCompositionAPI from "@vue/composition-api";
Vue.use(VueCompositionAPI);
2. Add in vue.config.js. If not, please create this file.
const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;
module.exports = {
  parallel: false, // disable thread-loader, which is not compactible with this plugin
  configureWebpack: {
    plugins: [
      ScriptSetup({
        /* options */
      }),
    ],
  },
  chainWebpack(config) {
    // disable type check and let `vue-tsc` handles it
    config.plugins.delete("fork-ts-checker");
  },
};
3. At the end of the src/ai-desk-customer-vue/adapter-vue-web.ts file, replace export source:
// Initial writing
export * from "vue";
// replace with
export * from "@vue/composition-api";

Step 4: Obtain SDKAppID, UserID, UserSig

Set the SDKAppID, userID, and userSig in App.vue.
SDKAppID information can be obtained by clicking Application Management > Add application in the Cloud Contact Center console and choosing Customer Service Desk > Add application, and then enabling Customer Service.




userID information. A random string can be locally generated, such as test-1234.
Note:
userID can only contain printable ASCII characters
userID cannot contain the string administrator.
userID cannot contain the ID of a customer service agent.
userID length cannot exceed 45 bytes.
userSig info, click UserSig Tools, fill in the created userID to generate userSig.


Step 5: Start a Project, initiate your first customer service inquiry

Execute the following command to start the project.
vue-cli
vite
Note:
Since vue-cli enables webpack global overlay error message prompts by default, for a better experience, it is recommended to disable global overlay error prompts.
Add the following code to vue.config.js
Webpack4 and Above
webpack3
module.exports = defineConfig({
  devServer: {
    client: {
      overlay: false,
    },
  },
});
module.exports = {
  devServer: {
    overlay: false,
  },
};
Disable TypeScript detection for ai-desk-customer-vue in tsconfig.json.
{
    "exclude": [
      "node_modules",
      "src/ai-desk-customer-vue",
    ]
}
npm run serve
npm run dev

Advanced Feature

Internationalized Interface

UIKit components support the following languages:
Language Code (UserLang)
Language
zh_cn
Simplified Chinese
en
English
zh_tw
Traditional Chinese
ja
Japanese
id
Indonesian
ms
Malaysian
vi
Vietnamese
th
Thai
fil
Filipino
ru
Russian
If your business needs to go global and the user language is mainly English, you can set userLang="en" when using customer service. If you do not specify userLang, UIKit will use the language in browser settings.
<template>
  <CustomerServiceChat
    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
    userLang="en"
  />
</template>
If you need to support dynamic user language switching, use the TUICustomerServer.changeLanguage API and trigger a re-render by modifying the page/component key. This ensures language updates are applied immediately.
<template>
  <CustomerServiceChat 
    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
    :key="locale"
    :userLang="locale"
  />
</template>
<script setup lang="ts">
import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
import { onMounted, ref } from "vue";

const locale = ref('en');

const changeLanguage = (language: string) => {
  TUICustomerServer.changeLanguage(language).then(() => {
    locale.value = language;
  });
}
</script>
<style scoped lang="scss">
</style>

Client-Side Login with Nickname and Avatar

If the agent wants to see the user's nickname, avatar, and other information during reception on the workstation to enhance communication efficiency, the effect is as shown below:

Please use the initWithProfile API to initialize, input Nickname and avatar just.
TUICustomerServer.initWithProfile({
  SDKAppID,
  userID,
  userSig,
  nickName: 'John 1852010****',
  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
})

Toolbar Button

If you want to add shortcut buttons above the input box to facilitate users' use, such as adding "transfer to agent" and "Order message", you can set toolbarButtonList when deploying Desk UIKit. The effect is as shown below:

toolbarButtonList is an array containing one or more items. The description is as follows:
Parameter
Type
Required or Not
Description
title
String
Yes
button Title
icon
String
No
Button Icon URL
isPreset
Number
Yes
1: Built-in feature of the customer service component.
0: Non-built-in feature.
presetId
String
No
When isPreset is 1, valid values include:
humanService: manual service.
serviceRating: service evaluation
endHumanService: End the session.
isEnabled
Number
Yes
1: Render.
0: No render.
content
String
No
When isPreset is 0, please fill in text content or url.
type
Number
Yes
1: the component sends the corresponding text of the content.
2: the component opens the corresponding url.
3 - trigger the specified task flow.
4 -transfer to the specified agents or specified agent group.
<template>
  <CustomerServiceChat
    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
    :toolbarButtonList="toolbarButtonList"
  />
</template>
<script setup lang="ts">
import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
import { onMounted } from 'vue';

const toolbarButtonList = [
  {"title":"manual service","icon":"https://tccc-im-agent-avatar-1258344699.cos.ap-nanjing.myqcloud.com/toolbar_button_1.png","type":1,"content":"","isPreset":1,"presetId":"humanService","isEnabled":1},
  {"title":"service evaluation","icon":"https://tccc-im-agent-avatar-sg-1258344699.cos.ap-singapore.myqcloud.com/toolbar_button_2.png","type":1,"content":"","isPreset":1,"presetId":"serviceRating","isEnabled":1},
  {"title":"End Session","icon":"https://tccc-im-agent-avatar-sg-1258344699.cos.ap-singapore.myqcloud.com/toolbar_button_3.png","type":1,"content":"","isPreset":1,"presetId":"endHumanService","isEnabled":1},
  // Send text
  {"title":"smart customer service","type":1,"content":"smart customer service","isPreset":0,"isEnabled":1},
  // Trigger the specified task flow, taskFlowID is the task flow id, if description is empty it will not be displayed in the message list
  {"title":"Trigger the specified task flow","type":3,"content":{"taskFlowID":3226, "description":"your description"},"isPreset":0,"isEnabled":1},
  // Transfer to specified agents, specificMemberList is the agent account list
  {"title":"Transfer to specified agent","type":4,"content":{"specificMemberList":["agent_01@email.com"], "description":"your description"},"isPreset":0,"isEnabled":1},
  // Transfer to specified agent group, groupID is the customer service agent group ID
  {"title":"Transfer to specified agent group","type":4,"content":{"groupID":111, "description":"your description"},"isPreset":0,"isEnabled":1}
];

onMounted(() => {
  const SDKAppID = 0; // Your SDKAppID, the application ID with customer service Desk enabled
  const userID = ''; // Your userID, reusable account system of your app or randomly generated
  const userSig = ''; // Your userSig, can be generated by the console during the integration stage, and must be generated by the server during the production stage
  TUICustomerServer.init(SDKAppID, userID, userSig);
});
</script>
<style scoped>
</style>

Bottom Quick Order

Note:
Upgrade ai-desk-customer-vue to v1.5.2 or higher.
If you want to show a quick order at the bottom of the chat area when opening a customer service conversation, you can configure bottomQuickOrder. The effect is as shown below:

Parameter description of bottomQuickOrder is as follows:
Parameter
Type
Required or Not
Description
header
String
Yes
Order title, corresponding to "Product Card" in the image above.
desc
String
Yes
Order description, corresponding to "$30" in the image above.
pic
String
No
Order image url.
url
String
Yes
When the customer service agent receives the order message, click to open the webpage corresponding to this url.
customField
Array
No
Custom configuration, such as "order ID", "order time", etc.
<template>
  <CustomerServiceChat
    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
    :bottomQuickOrder="bottomQuickOrder"
  />
</template>
<script setup lang="ts">
import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
import { onMounted } from 'vue';

const bottomQuickOrder = {
  header: "Product Card",
  desc: "$30",
  pic: "https://static.cloudcachetci.com/qcloud/portal/kit/images/presale.a4955999.jpeg",
  url: 'https://your_url.com',
  customField: [
    {
      name: 'Order ID',
      value: '11111111111111111111'
    },
    {
      name: 'Order Time',
      value: '2025-07-02 16:23'
    }
  ]
};

onMounted(() => {
  const SDKAppID = 0; // Your SDKAppID
  const userID = ''; // Your userID
  const userSig = ''; // Your userSig
  TUICustomerServer.init(SDKAppID, userID, userSig);
});
</script>
<style scoped>
</style>

Transferring to Designated Agent or Agent Group

Note:
Upgrade ai-desk-customer-vue to v1.5.6 or higher.
If your application needs to automatically transfer to a specified agent or agent group after logging in, see the following code implementation.
Transfer to Designated Agent
Transfer to Agent Group
TUICustomerServer.initWithProfile({
  SDKAppID,
  userID,
  userSig,
  nickName: 'John 1852010****'
  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
}).then(() => {
  TUICustomerServer.transferToHuman({
    specificMemberList: ['agent_account_1', 'agent_account_2'], // replace with your agent accounts
    description: 'your description'
  });
});
TUICustomerServer.initWithProfile({
  SDKAppID,
  userID,
  userSig,
  nickName: 'John 1852010****'
  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
}).then(() => {
  TUICustomerServer.transferToHuman({
    groupID: 0, // replace with your customer service agent group ID
    description: 'your description'
  });
});

Trigger Specified Task Flow

Note:
Upgrade ai-desk-customer-vue to v1.5.6 or higher.
If your application needs to automatically trigger the specified task flow after logging in, refer to the following code implementation.
TUICustomerServer.initWithProfile({
  SDKAppID,
  userID,
  userSig,
  nickName: 'John 1852010****'
  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
}).then(() => {
  TUICustomerServer.transferToTaskFlow({
    taskFlowID: 0, // replace with your task flow id
    description: 'your description'
  });
});

Multiple Customer Service Accounts

Note:
Upgrade ai-desk-customer-vue to v1.5.3 or higher.
If your application requires multiple customer service accounts to provide users with exclusive customer service features for improved service quality and fast response speed, you can implement the Multiple Customer Service Accounts feature provided by UIKit.
// 1. Pass the custom customer service account ID from the business side to UIKit before initialization
TUICustomerServer.setCustomerServiceIDList(['customerServiceID_001', 'customerServiceID_002', 'customerServiceID_003']);
// 2. During initialization, include the customer service account ID to start conversation, such as 'customerServiceID_002'
// If no customer service account ID is specified to start conversation, UIKit uses the first element in the multiple customer service accounts list by default
TUICustomerServer.initWithProfile({
  SDKAppID,
  userID,
  userSig,
  nickName: 'John 1562010****',
  avatar: 'your avatar url',
  customerServiceID: 'customerServiceID_002',
});
Note:
Note: To customize a customer service account, please use REST API > Create Customer Service Account.

Client-Side Proactively Ending Session

Note:
Note: The client-side can proactively end the session by sending a custom message, applicable to the following 3 cases:
1. User requests to transfer to agent and enters the queue. Sending this message can end the queue.
2. The customer service mode is manual service. After the user requests agent service and the customer service is successfully allocated, the user waits for the customer service to confirm the reception. Sending this message can end the wait.
3. Transfer to an agent and successfully connect to customer service. Send this message to end the session.
TUICustomerServer.sendCustomMessage({
  to: '@customer_service_account',
  conversationType: 'C2C',
  payload: {
    data: JSON.stringify({
      src: '27',
      customerServicePlugin: 0,
    }),
  },
}, { onlineUserOnly: true });

FAQs

What Is UserSig? How do I Generate a UserSig?
UserSig is the password for user login to IM. It is essentially an encrypted ciphertext of UserID and other information.
The UserSig issuance method involves integrating the UserSig calculation code into your server and providing a project-oriented API. When UserSig is required, your project initiates a request to the business server to obtain a dynamic UserSig. For more details, see UserSig generation by the server.
How to Integrate the UIKit Component Into a JS Project
UIKit only supports running in the ts environment. You can progressively configure typescript to allow existing js code in your project to coexist with ts code in UIKit.
vue-cli
Vite
Please execute in the project root directory created by your vue-cli scaffold:
vue add typescript
Then configure the options as follows (to ensure simultaneous support for existing js code and ts code in UIKit, be sure to strictly follow the five options below)
260706614-5e2fc00b-ace5-4843-bef6-c0e234225b5d.png (1514×360)


After completing the above steps, rerun the project.
Please execute in the project root directory created by your vite.
npm install -D typescript
Runtime Error: Uncaught TypeError: Marked__WEBPACK_IMPORTED_MODULE_0_ Marked Is Not a Constructor
If the following error occurs during operation, it means your current Vue CLI project environment version is low, and you must downgrade the marked version used in UIKit to 5.1.2.

Please use the following script in your project root directory to downgrade the marked version:
npm i marked@5.1.2 --legacy-peer-deps
Compilation Error: node_modules/marked/lib/marked.esm.js: Class private methods are not enabled.
If the following error occurs during operation, it means your current marked version is outdated. Please upgrade the marked version to 6.0.0.

Please use the following script in your project root directory to upgrade the marked version:
npm i marked@6.0.0 --legacy-peer-deps

Previous Topic: AndroidNext Topic: Link WhatsApp to Desk

Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback