Starter Deal! First 3 month from only  $9.9 /month!
Starter Deal! First 3 month from only  $9.9 /month!
Grab It Now 
Conference
Overview
  • Web
    • Run Sample Demo
    • Integration
    • UI Customization
    • In-Conference Chat
    • Cloud Recording
    • AI Noise Cancellation
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine Defines
    • FAQs
  • iOS
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • Cloud Recording
    • AI Noise Cancellation
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Android
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • Cloud Recording
    • AI Noise Cancellation
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Electron
    • Run Sample Demo
    • Integration
    • UI Customization
    • In-Conference Chat
    • Cloud Recording
    • AI Noise Cancellation
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine Defines
    • FAQs
  • Flutter
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • Cloud Recording
    • AI Noise Cancellation
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • TRTC Conference Monthly Packages
    • Pay-As-You-Go
    • Free Minutes
  • Error Code
Conference

UI Customization

This article will provide a detailed introduction on how to customize the user interface of TUIRoomkit. TUIRoomkit offers two customization methods: one is through a simple custom UI API, and the other is by replacing existing UI components. We will introduce each method in detail below.

Method 1: Fine-tuning the interface

TUIRoomkit provides a series of APIs that make it easy to customize the UI. The table below lists some of the main APIs and their functions:
API
Description
Set the interface language.
setTheme
Set the interface theme.
Disable the text messaging feature in the application. After calling this function, users will not be able to send or receive text messages.
Disable the screen sharing feature in the application. After calling this function, users will not be able to share their screen with others.
Hide specific feature buttons in the application. After calling this function and passing in the appropriate FeatureButton enumeration value, the corresponding button will be hidden from the user interface.

Method 2: Modify the UIKit source code

You can directly modify the provided UI source code to adjust the user interface of TUIRoomKit according to your requirements. Run the following node script to automatically copy the interface source code of TUIRoomKit to your project (default path ./src/components/TUIRoom).
Vue3
Vue2
node ./node_modules/@tencentcloud/roomkit-web-vue3/scripts/eject.js
node ./node_modules/@tencentcloud/roomkit-web-vue2.7/scripts/eject.js

1. Replace icons

You can directly modify the icon components in the /TUIRoom/assets/icons/svg folder to ensure that the icon color and style are consistent throughout the app. Please keep the icon file names unchanged when replacing.




2. Adjust UI layout

You can adjust the multi-person video conference interface UI layout by modifying different components in the /TUIRoom/components/ folder:
- components/
- Chat Chat
- common Common icon components
- ManageMember Member management
- RoomContent Room video
- RoomFooter Room page Footer section
- RoomHeader Room page Header section
- RoomHome Home page
- RoomInvite Invite members
- RoomLogin Login page
- RoomMore More
- RoomSetting Settings
- RoomSidebar Drawer component

Method 3: Implement your own UI

The overall functionality of TUIRoomKit is based on the TUIRoomEngine, a UI-less SDK. You can fully implement your own UI interface based on TUIRoomEngine. For more information, please see: