跳至内容

面向开发者的 CHAT

能自然融入您产品的聊天 UI Kit。

从已连接的会话列表、消息视图和消息编辑器开始。利用平台专属组件和受支持的自定义点,打造符合您需求的界面。

在您的应用中提供消息功能,遵循您的品牌风格和业务规则。

让每次对话都彰显您的品牌应用界面示意图

产品功能

围绕您的产品打造消息体验。

了解对话列表、消息视图和消息编辑器如何协同工作,以及产品样式和自定义消息应置于何处。

构建对话界面

使用相互关联的对话和消息组件进行构建,然后选择外围布局和导航。可用模块因平台和 UI Kit 版本而异。

React UI Kit 快速入门

调整视觉风格

使用受支持的主题和扩展 API,将聊天融入您的视觉体系。自定义后,请验证对比度、长消息、加载状态和布局表现。

React UI Kit 快速入门

为您的产品添加消息功能

为预订、订单或活动创建自定义渲染器。将真实的交易状态和操作授权保留在负责该工作流的后端。

React 自定义消息指南

对接导航与未读状态

将收件箱连接到应用的导航和通知。在每个受支持的目标平台上,测试选定会话、返回路径、账户变更和通知深层链接。

React ConversationList 组件 API

让富媒体融入对话

先使用受支持的图片、文件和音频消息组件。让用户在发送前预览,并确保附件易于打开;根据平台配置上传限制和原生权限。

JavaScript 消息 API

让群聊井然有序

使用平台的群组和成员组件展示会话详情及成员信息。将加入、邀请和退出等操作连接到产品所需的群组模型和访问规则。

选择合适的 Chat 群组类型

可用性因 SDK、版本和服务套餐而异。 查看 Chat 套餐和功能限制 ↗

POKEKARA · 社交娱乐

围绕直播体验构建互动。

Pokekara 的 Tencent RTC 案例涵盖卡拉 OK、直播房间和社交消息。该案例介绍了一套包含 Chat API 和预构建 UI Kit 的集成方案。

  • 娱乐体验中的聊天功能
  • 与音视频服务组合使用的组件
阅读客户案例 已发布的多产品案例;文章未说明使用了哪种 UI Kit 框架。

选择腾讯云RTC

现成 UI 仍需完成产品集成。

聊天 UI Kit 可以减少组件开发工作,但应用仍需提供经过身份验证的用户身份、会话权限、导航和业务规则。请先选择正确的平台指南并检查其依赖项,再确定集成范围。

从已连接的组件开始

会话列表、消息视图和消息编辑器已连接到 Chat 状态。这可以减少团队需要实现的界面连接工作。

让产品呈现出您的独特风格

特定平台的主题和扩展 API 支持品牌化聊天及应用专属消息展示,无需跳转到单独的聊天界面。

选择要采用的界面范围

选择平台支持的组件;对于需要完全掌控 UI 的区域,请使用 Core SDK。在评估开发工作量之前,请先确认组件范围。

探索完整的 Chat 产品及其功能 ↗

体验产品

体验对话效果。

在此本地界面预览中更改主题并添加消息。然后打开官方 Chat 演示,使用测试账号体验互联消息功能。

此预览使用本地状态和虚构参与者。它不会连接 Tencent RTC,也不会向其他人发送消息。

自定义预览
Iris Morgan虚构对话

修改后的演播室布局已可供审阅。

发送 ↑

Local UI preview · no message is sent to a service

从评估到集成

将 Chat 接入您的应用。

先使用 selected platform 快速入门,然后添加身份验证和应用所需的消息行为。

  1. 01

    选择框架

    选择 React、React Native、Flutter、iOS 或 Android,并查看当前的集成指南。

  2. 02

    安装并进行身份验证

    配置文档中说明的依赖项,并将 UI 连接到由服务器签发的 Chat 凭证。

  3. 03

    自定义并验证

    调整主题和导航,添加自定义消息,并测试真实设备上的行为。

构建前须知

Chat UI Kits 常见问题

为产品和工程团队提供解答。

聊天 UI Kit 只是一个视觉模板吗?

Tencent RTC UI Kits 包含集成了 Chat 功能的组件。它们仍需要应用、身份验证、配置以及相关的 SDK 和原生依赖项。

React 应使用哪款聊天 UI Kit?

Web 界面请使用 React UI Kit。React Native 有单独的软件包,并且移动应用需要原生配置;这两种集成方式不可互换。

我可以只使用 UI Kit 的一部分吗?

可用模块和扩展点因平台而异。请查看最新文档,以选择组件或替换部分体验。

我可以改用自己的 UI 吗?

可以。使用 Core Chat SDK 构建完全自定义的界面,并通过服务器 API 执行后端操作。

可视化预览是否连接到 Tencent RTC?

页面预览使用虚构参与者演示本地 UI 行为。请打开官方 Chat 演示,评估已连接的产品。

应如何在 UI Kit 和 Core SDK 之间进行选择?

当 UI Kit 的已连接组件和扩展点符合产品需求时,请使用 UI Kit。如果需要完全掌控消息渲染、导航和交互,请选择 Core SDK;并与原本需要自行实现的实际界面进行比较。

如何为应用定制聊天 UI Kit?

为平台选择文档支持的主题和组件扩展点。结合已初始化的 Chat SDK,测试自定义消息、导航和未读行为。

哪个聊天 UI Kit 适用于 React Native 或 Flutter?

这些平台有独立包和原生配置。请按对应指南接入,避免复用 React Web 组件或假设扩展 API 完全相同。

规划集成

让我们聊聊
你的 Chat 集成.

与 Tencent RTC 团队讨论你的平台、目标市场、预计月活跃用户数和上线时间表。

技术适配度迁移范围用量与定价

告诉我们你的需求。

获取帮助,规划消息体验以及团队所需的集成方案。

联系我们的团队继续前往 Tencent RTC 官方联系表单。
使用 Chat 开始构建↗