动态与公告

产品动态

公告

产品简介

产品概述

基本概念

应用场景

功能介绍

账号系统

用户资料与关系链

消息管理

群组相关

公众号系统

音视频通话 Call

使用限制

购买指南

计费概述

价格说明

购买指引

续费指引

停服说明

退费说明

开发指引

Demo 专区

开通服务

体验 Demo

快速跑通

下载中心

SDK & Demo 源码

更新日志

聊天互动（含 UI）

TUIKit 组件介绍

快速开始

全功能接入

单功能接入

AI 集成

构建基础界面

更多特性

定义外观

国际化界面语言

推送服务（Push）

服务概述

名词解释

开通服务

快速跑通

厂商通道

数据统计

排查工具

客户端 API

服务端 API

推送回调

高级功能

更新日志

错误码

常见问题

智能客服

功能概述

快速入门

集成指引

管理员操作手册

客服操作手册

更多实践

直播间搭建

AI 聊天机器人方案

超大娱乐协作社群

Discord 实现指南

游戏内集成 Chat 指南

类 WhatsApp Channel 搭建方案

发送红包

Chat 应对防火墙限制相关

无 UI 集成

快速开始

集成 SDK

初始化

登录登出

消息相关

会话相关

群组相关

社群话题

用户管理

离线推送

云端搜索

本地搜索

公众号

客户端 API

JavaScript

Android

iOS & macOS

Swift

Flutter

Electron

Unity

React Native

C 接口

C++

服务端 API

生成 UserSig

REST API

第三方回调

控制台指南

新版控制台介绍

创建并升级应用

基本配置

功能配置

账号管理

群组管理

公众号管理

回调配置

用量统计

资源包查看指南

实时监控

开发辅助工具

访问管理

高级功能

常见问题

uni-app 常见问题

购买相关问题

SDK 相关问题

账号鉴权相关问题

用户资料与关系链相关问题

消息相关问题

群组相关问题

直播群相关问题

昵称头像相关问题

协议与认证

服务等级协议

安全合规认证

IM 政策

隐私政策

数据隐私和安全协议

平滑迁移方案

平滑迁移完整版

平滑迁移简化版

错误码

联系我们

集成聊天窗口

PDF

聚焦模式

字号

最后更新时间： 2026-03-11 17:08:19

如果您只需在现有页面中嵌入一个聊天窗口、而无需接入完整 TUIKit（会话列表、联系人等），可参考本文档。
说明：
本文档仅适用于 Web（React、Vue）。
开始集成前，请先完成 TRTC MCP Server 配置。
适用场景
适用于应用已有自有导航与布局，仅在某一处需要聊天界面的场景，常见场景如下：
场景
示例
客服咨询
页面中的联系客服入口，点击后打开与客服账号的对话窗口。
在线问诊
医生详情页内嵌与指定医生的 1v1 聊天。
会议内聊天
视频会议界面侧边栏中的文字聊天区域。
订单消息
电商订单页内嵌的买家与卖家沟通窗口。
集成 TUIKit vs. 集成聊天窗口
对比项
完整 TUIKit
仅聊天窗口
支持平台
Web、Android、iOS、Flutter。
Web（React、Vue）。
包含能力
会话列表、聊天窗口、联系人、搜索等。
仅聊天窗口组件。
适用场景
独立聊天应用。
在现有页面中嵌入单处聊天。
复杂度
较高（路由与状态完整）。
较低（挂载单一组件即可）。
示例提示词
本节提供提示词示例供您参考，使用时替换为您的实际文件名称和帐号名即可。
React
场景
需求说明
示例提示词
基础接入
只要聊天窗口、不要会话列表。
在我现有的 React 项目里，只集成聊天窗口组件。
指定文件
在指定组件或页面中挂载聊天窗口。
在 src/views/customer-service.tsx 里添加聊天窗口组件，只要聊天窗口，不要完整 TUIKit。
固定会话
窗口始终与指定用户（如客服 test001）对话。
在 src/components/ServiceChat.tsx 中嵌入聊天窗口，且默认始终与账号 test001 聊天。
Vue
场景
需求说明
示例提示词
基础接入
只要聊天窗口、不要会话列表。
在我现有的 Vue 3 项目里，只集成聊天窗口组件。
指定文件
在指定组件或页面中挂载聊天窗口。
仅将 Vue 3 的聊天窗口组件集成到 src/views/customer-service.vue。
固定会话
窗口始终与指定用户（如客服 test001）对话。
在 src/components/ChatPanel.vue 中添加聊天窗口，页面加载时默认打开与 test001 的会话。
自定义聊天窗口组件
嵌入后，可让 AI 查询聊天窗口组件的 API 并生成配置代码。示例提示词：
查一下聊天窗口组件支持哪些 props，并生成代码做定制（例如主题、占位文案、显示哪些按钮）
查一下聊天窗口组件的配置方式，写一段代码：页面加载时默认打开与指定用户（例如客服账号 kf001）的会话
提示词技巧
在提示词中加入以下关键词，有助于 AI 正确选用仅聊天窗口的 MCP 工具：
目标
建议在提示词中包含
只要窗口、不要会话列表
“只需要聊天窗口”
指定接入文件
写明目标文件路径，如 src/views/support.vue
固定会话对象
写明目标 userId 或角色，如“始终与 test001 聊天”
查询组件 API
“组件 props”、“如何配置”
相关文档
如果在集成中遇到登录、链接等问题，参考常见问题进行故障排查。

帮助和支持

本页内容是否解决了您的问题？

您也可以联系销售或提交工单以寻求帮助。

填写满意度调查问卷，共创更好文档体验。

文档反馈

tencent cloud

即时通信 IM

集成聊天窗口

适用场景

集成 TUIKit vs. 集成聊天窗口

示例提示词

React

Vue

自定义聊天窗口组件

提示词技巧

相关文档

帮助和支持

场景	示例
客服咨询	页面中的联系客服入口，点击后打开与客服账号的对话窗口。
在线问诊	医生详情页内嵌与指定医生的 1v1 聊天。
会议内聊天	视频会议界面侧边栏中的文字聊天区域。
订单消息	电商订单页内嵌的买家与卖家沟通窗口。

对比项	完整 TUIKit	仅聊天窗口
支持平台	Web、Android、iOS、Flutter。	Web（React、Vue）。
包含能力	会话列表、聊天窗口、联系人、搜索等。	仅聊天窗口组件。
适用场景	独立聊天应用。	在现有页面中嵌入单处聊天。
复杂度	较高（路由与状态完整）。	较低（挂载单一组件即可）。

场景	需求说明	示例提示词
基础接入	只要聊天窗口、不要会话列表。	在我现有的 React 项目里，只集成聊天窗口组件。
指定文件	在指定组件或页面中挂载聊天窗口。	在 `src/views/customer-service.tsx` 里添加聊天窗口组件，只要聊天窗口，不要完整 TUIKit。
固定会话	窗口始终与指定用户（如客服 test001）对话。	在 `src/components/ServiceChat.tsx` 中嵌入聊天窗口，且默认始终与账号 test001 聊天。

目标	建议在提示词中包含
只要窗口、不要会话列表	“只需要聊天窗口”
指定接入文件	写明目标文件路径，如 `src/views/support.vue`
固定会话对象	写明目标 `userId` 或角色，如“始终与 test001 聊天”
查询组件 API	“组件 props”、“如何配置”