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
DocumentationChatChat Interaction (UI Included)Build with AIIntegrate Chat window only

Integrate Chat window only

PDF
Focus Mode
Font Size
Last updated: 2026-03-11 17:08:20
Embed a single chat window into an existing web page without pulling in the full TUIKit suite. Use this when your app already has its own navigation and you only need the messaging UI in one place.
Note:
This page applies to Web (React and Vue) only.
Before starting the integration, ensure you have set up the TRTC MCP server.

When to use this

Full TUIKit includes a conversation list, contact management, search, and other screens. Most of the time you need all of that. But for these scenarios, a single chat window component is the right fit:
Use case
Example
Customer support
A "Chat with us" button that opens a window scoped to a support agent
Online consultation
A doctor detail page with an embedded 1-on-1 chat
In-meeting chat
A side panel for text chat inside a video conference
Order messaging
A buyer-seller chat embedded on an e-commerce order page

Full TUIKit vs. chat window only

Item
Full TUIKit
Chat window only
Platforms
Web, Android, iOS, Flutter
Web (React, Vue)
What's included
Conversation list, chat window, contacts, search
Chat window component only
Best for
Standalone chat apps
Embedding chat into an existing page
Complexity
Higher (full routing and state)
Lower (single component mount)

Example prompts by framework

Use one prompt per scenario. Replace the file path and target account with your own.

React

Scenario
What you want
Example prompt
Basic
Chat window only, no conversation list
In my existing React project, integrate only the Chat window component
Scoped to a file
Chat window in a specific component or page.
Add a Chat window component to src/views/customer-service.tsx — chat window only, no full TUIKit
Locked to one conversation
Window always opens with a specific user (e.g. support agent).
Embed a chat window in src/components/ServiceChat.tsx that always chats with the account test001

Vue

Scenario
What you want
Example prompt
Basic
Chat window only
In my existing Vue 3 project, integrate only the Chat window component
Scoped to a file
Chat window in a specific component or page.
Integrate only the Vue 3 Chat window component into src/views/customer-service.vue
Locked to one conversation
Window always opens with a specific user.
Add a Chat window to src/components/ChatPanel.vue that always opens a conversation with support@company.com

Customize the component

After embedding, use the AI to look up the component API and generate configuration code. Example prompts:
Check what props the Chat window component supports and generate code to customize it (e.g. theme, placeholder text, or which buttons to show)
Look up the Chat window component's config and add code so it opens a conversation with a specific user (e.g. support account kf001) by default when the page loads

Prompt tips

Keywords that help the AI route to the right tool:
Goal
Include in your prompt
Window only, no list
chat window only", "no conversation list
Scoped to a file
Target file path, e.g. src/views/support.vue
Locked conversation
The target userId or role, e.g. "always chat with test001
Query component API
"component props", "configuration options", "how to configure"
Previous Topic: Integration guideNext Topic: FAQ

Help and Support

Was this page helpful?

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

Feedback