製品の概要
Basic Concepts
ユースケース
機能概要
アカウントシステム
ユーザープロフィールとリレーションシップチェーン
メッセージ管理
グループシステム
Official Account
Audio/Video Call
使用制限
Message Type | Renderings |
Text message | ![]() |
Image message | ![]() |
Audio message | ![]() |
Video message | ![]() |
File message | ![]() |
Custom message preset styles | Renderings |
Hypertext message | ![]() |
Evaluation Message | ![]() |
Order Message | ![]() |

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.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>
TUIChatService.sendCustomMessage method in the logical layer engine of TUIKit. For details, please refer to: SendCustomMessage.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) => {...});
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) => {...});
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) => {...});
Name | Type | Optional type | Description |
options | Required | Parameters related to custom messages | |
sendMessageOptions | Optional | Message sending options |
Promise.<any>フィードバック