• UIKit
  • SDK
  • 서버 API
Chat/
UIKit/
Web/
맞춤화/
UIKit
  • 개요
  • 설치
    • TUIKit
      • React
      • Vue
    • TUIChat만
      • React
      • Vue
  • Features
    • 반응
    • 읽음 확인
    • 입력 상태
    • 사용자 온라인 상태
    • Message Search
    • Quote Reply
    • Voice Message To Text
    • Translate Message
  • 주제
    • UI 스타일 설정
      • Web
      • 모바일
  • 맞춤화
    • 메시지 맞춤화
    • Customize Emoji and Stickers
  • 현지화
  • Guideline for Beginners
  • 콘솔 안내
    • 애플리케이션 생성 및 업그레이드
    • 기본 구성
    • 기능 구성
    • 계정 관리
    • 그룹 관리
    • 콜백 구성
  • 제품 소개
    • 메시지 관리
      • 1대1 메시지
      • 메시지 저장
      • 오프라인 푸시
      • 그룹 메시지
      • 메시지 포맷
    • 계정 시스템
      • 로그인 인증
      • 온라인 상태 관리
    • 그룹 관련
      • 그룹 시스템
      • 그룹 관리
    • 사용자 정보 및 관계망
      • 정보 관리
      • 관계망 관리
  • 구매 가이드
    • 과금 개요
    • 가격
  • 에러코드
이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

메시지 맞춤화

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.