Seeking alternatives after Twilio video sunset?
Check our migration guide 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Seeking alternatives after Twilio video sunset?
Check our migration guide 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Conference
Overview
  • Web
    • Integration
    • UI Customization
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomEvents
      • TUIRoomEngine Defines
    • FAQs
  • iOS
    • Integration
    • UI Customization
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
    • FAQs
  • Android
    • Integration
    • UI Customization
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
    • FAQs
  • Electron
    • Integration
    • UI Customization
    • API Documentation
      • API Overview
      • TUIRoomKit
      • TUIRoomEngine
      • TUIRoomEvent
      • TUIRoomEngine Defines
    • FAQs
  • Windows
    • Integration
    • UI Customization
    • API Documentation
      • API Overview
      • TUIRoomEngine
      • TUIRoomObserver
      • Type Definition
  • Flutter
    • Integration
    • UI Customization
    • API Documentation
      • 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 introduce how to customize the User Interface of TUIRoomkit. We provide two options for you to choose from: Skinning Scheme and Custom UI Scheme.

Option 1: Interface Fine-tuning Scheme

By directly modifying the Source Code of the UI we provide, you can adjust the User Interface of TUIRoomKit. The Source Code of TUIRoomKit's interface is located in the Electron/ folder on Github:

Replace Icons

You can directly modify the icon components in the packages/renderer/src/TUIRoom/assests/icons/svg Folder to ensure that the color tone style of the icons throughout the app remains consistent. Please keep the icon file names unchanged when replacing.




Adjust UI Layout

You can adjust the UI layout of the Multi-person Video Conference interface by modifying the different pages in the packages/renderer/src/TUIRoom/components/ folder.
- components/
- base
- Chat Chat
- common Common Icon Component
- ManageMember Member Management
- RoomContent Room Video
- RoomFooter Room Page Footer
- RoomHeader Room Page Header
- RoomHome Home Page
- RoomInvite Invite Members
- RoomLogin Login Page
- RoomMore More
- RoomSetting Set Up
- RoomSidebar Drawer Component

Option 2: Custom UI Scheme

The overall functionality of TUIRoom is based on the TUIRoomEngine, a UI-less SDK. You can completely implement your own User Interface based on TUIRoomEngine. For details, please see:
TUIRoomEngine Access Guide
TUIRoomEngine API Interface Address