tencent cloud

Chat

News and Announcements
Release Notes
Announcements
Product Introduction
Overview
Basic Concepts
Scenarios
Features
Account System
User Profile and Relationship Chain
Message Management
Group Related
Official Account
Audio/Video Call
Use Limits
Purchase Guide
Billing Overview
Pricing
Purchase Instructions
Renewal Guide
Service Suspension Explanation
Refund Policy
Development Guidelines
Demo Zone
Activate Service
Free Demos
Quick Run
Download
SDK and Demo Source Code
Update Log
Chat Interaction (UI Included)
TUIKit Introduction
Getting Started
Full-feature Integration
Single-function Integration
Build with AI
Build Basic Interfaces
More Features
Customizing Appearance
Internationalization
Push Service
Overview
Noun explanation
Activate the Service
Quick Start
Manufacturer Channel
Statistics
Troubleshooting Tool
Client APIs
REST API
Push Callback
Advanced Features
Release Notes
Error Codes
FAQS
Desk
Overview
Quick Start
Integration Guide
Admin Operation Manual
Agent Manual
More Practices
Live Streaming Setup Guide
AI Chatbot
Super Large Entertainment and Collaboration Community
Discord Implementation Guide
How to Integrate Chat into Games
WhatsApp Channel-style Official Account Integration Solution
Send Red Packet
Firewall Restrictions
No UI Integration
Quick Start
SDK Integration
Initialization
Login and Logout
Message
Conversation
Group
Community Topic
User Profile and Relationship Chain
Offline Push
Cloud Search
Local Search
Official Channel Management
Client APIs
JavaScript
Android
iOS & macOS
Swift
Flutter
Electron
Unity
React Native
C APIs
C++
Server APIs
Secure authentication with UserSig
RESTful APIs
Webhooks
Console Guide
New Console Introduction
Creating and Upgrading an Application
Basic Configuration
Feature Configuration
Account Management
Group Management
Official Channel Management
Webhook Configuration
Usage
Viewing Guide for Resource Packages
Real-Time Monitor
Auxiliary Development Tools
Access Management
Advanced Features
FAQs
uni-app FAQs
Purchase
SDK
Account Authentication
User Profile and Relationship Chain
Message
Group
Audio-Video Group
Nickname and Profile Photo
Security Compliance Certification
Service Level Agreement
Security Compliance Certification
Chat Policies
Privacy Policy
Data Privacy and Security Agreement
Migration
Migration Solutions
Migration Solutions Lite
Error Codes
Contact Us

Web & H5 & Uniapp (Vue)

PDF
Focus Mode
Font Size
Last updated: 2025-05-27 18:04:13
TUIKit implements the sending and display for basic message types such as text, image, audio, video, and file messages by default. If these message types do not meet your needs, you can add custom message types.

Basic Message Types

Message Type
Renderings
Text message



Image message



Audio message



Video message



File message




Custom message

If the basic message types do not meet your needs, you can customize the messages based on actual business needs.
There are several custom message styles built into TUIKit, as shown in the following figure:
Custom message preset styles
Renderings
Hypertext message



Evaluation Message



Order Message



The following uses sending a custom hypertext message that can redirect to the browser as an example, assisting you to promptly understand the implementation process.

Displaying a Custom Message

The hypertext custom message cell Element (XML) built into TUIKit is depicted in the figure below:



Custom messages and other common types of messages are received in the same way; all types of messages are monitored for access via TUIStore.watch(StoreName.CHAT, { messageList: onMessageListUpdated }). The received custom messages are presented in the message list in different forms according to their respective specific type fields. The following will explain how to display custom messages.

Creating the display structure for the custom message

The display of custom messages is primarily accomplished by rendering messageCustom in the content area of the custom message type messageBubble. You can add the display structure style you need for custom messages in the file at src/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue. For instance, the following code demonstrates the display structure for a hypertext message:
<template v-else-if="isCustom.businessID === 'text_link'">
<div class="textLink">
<p>{{ isCustom.text }}</p>
<a :href="isCustom.link" target="view_window">
{{
TUITranslateService.t("message.custom.peekDetails>>")
}}
</a>
</div>
</template>

Sending custom messages

You can send a custom message by calling the TUIChatService.sendCustomMessage method in the logical layer engine of TUIKit. For details, please refer to: SendCustomMessage.
Here are a few examples of sending built-in custom style messages in TUIKit:

sendCustomMessage(options, sendMessageOptions) → {Promise.<any>}

example1: Sending custom evaluation message
import { TUIChatService } from "@tencentcloud/chat-uikit-engine";
let promise = TUIChatService.sendCustomMessage({
payload: {
data: JSON.stringify({
businessID: "evaluation",
version: 1,
score: 5,
comment: "so pretty!!!"
}),
description: "Evaluation of this service",
extension: "Evaluation of this service"
}
});
promise.catch((error) => {
...
});
example2: Sending custom hypertext message
import { TUIChatService } from "@tencentcloud/chat-uikit-engine";
let promise = TUIChatService.sendCustomMessage({
payload: {
data: JSON.stringify({
businessID: "text_link",
text: "Welcome to Chat. Let's chat!",
link: "https://web.sdk.qcloud.com/im/demo/intl/index.html?scene=social"
}),
description: "",
extension: ""
}
});
promise.catch((error) => {
...
});
Example 3: Sending custom order messages
import { TUIChatService } from "@tencentcloud/chat-uikit-engine";
let promise = TUIChatService.sendCustomMessage({
payload: {
data: JSON.stringify({
businessID: "order",
title: "Chat",
description: "Standard Edition",
price: "399 USD/month",
link: "https://buy.tencentcloud.com/avc",
imageUrl: "https://1302445663.vod2.myqcloud.com/cea47bfavodsgp1302445663/fd67ff345576678022395175485/2lCqNHbz5aYA.png",
}),
description: "",
extension: ""
}
});
promise.catch((error) => {
...
});
Parameter description:
Name
Type
Optional type
Description
options
Required
Parameters related to custom messages
sendMessageOptions
Optional
Message sending options
Return values
Promise.<any>

Contact us

Join the Telegram technical exchange group or WhatsApp discussion group, benefit from the support of professional engineers, and solve your toughest challenges.



Help and Support

Was this page helpful?

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

Feedback