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 
Call
Overview
  • Android
    • Run Sample Demo
    • Integration
    • UI Customization
    • Offline Call Push
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • iOS
    • Run Sample Demo
    • Integration
    • UI Customization
    • Offline Call Push
      • VoIP
      • APNs
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • Web
    • Run Sample Demo
    • Integration
      • Web&H5 (React)
      • Web&H5 (Vue3)
    • UI Customization
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Configure Resolution and Fill Mode
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallEvent
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Release Notes
  • Flutter
    • Run Sample Demo
    • Integration
    • Offline Call Push
    • UI Customization
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Beauty Effects
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • Upgrading
    • Release Notes
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • Call Monthly Packages
    • Pay-As-You-Go
    • Free Minutes
  • ErrorCode
  • FAQs
    • All Platform
    • Flutter
    • Web
Call
Docs Overview/
Call/
Web/
UI Customization/

UI Customization

Download PDF
This document describes how to customize the UI of TUICallKit and provides two schemes for customization: slight UI adjustment and custom UI implementation.

Scheme 1: Slight UI Adjustment

TUICallKit is a component with UI audio and video call, For easy source code adjustment, it is recommended to copy the component directly into your project (source code is TypeScript)
Note：
The Interface Fine-tuning Plan is suitable for Vue3 + TypeScript and @tencentcloud/call-uikit-vue version number is 3.2.2 or later projects. If you are using other languages or technology stacks, please use the Custom UI Implementation.

Importing Source Code

1. Installation package dependencies
Vue3
npm install @tencentcloud/call-uikit-vue
2. Copy the source code to your project, for example to the src/components/ directory:
macOS + Vue3
Windows + Vue3
mkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@tencentcloud/call-uikit-vue/* ./src/components/TUICallKit
xcopy .\node_modules\@tencentcloud\call-uikit-vue  .\src\components\TUICallKit /i /e
3. Modify the introduction path
TUICallKit needs to be brought in from a local file instead, as shown in the code below.
import { TUICallKit, TUICallKitServer, TUICallType } from "./components/TUICallKit/src/index";
4. 
Solve Errors That May Be Caused by Copying Source Code

If you encounter an error while using the TUICallKit component, please don't worry. In most cases, this is due to inconsistencies between ESLint and TSConfig configurations. You can consult the documentation and configure correctly as required. If you need help, please feel free to contact us, and we will ensure that you can successfully use this component. Here are some common issues:
ESLint Error
TypeScript Error
If you encounter a Cannot find module '../package.json' error, it is because the TUICallKit references a JSON file. You can add the relevant configuration in tsconfig.json, for example:
{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}
For other TSConfig issues, please refer to TSConfig Reference.
If the TUICallKit causes an error due to inconsistency with your project's code style, you can block this component directory by adding a .eslintignore file in the root directory of your project, for example:
# .eslintignore
src/components/TUICallKit

Replacing icons

You can replace the icons in the TUICallKit/Components/assets folder to customize the color tone and style of the icons in your application. Make sure you do not change the filenames.
Desktop
Mobile

Serial number
Resource Path
1
/TUICallKit/Components/assets/button/camera-close.svg
2
/TUICallKit/Components/assets/button/microphone-open.svg
3
/TUICallKit/Components/assets/button/speaker-open.svg
4
/TUICallKit/Components/assets/button/desktop/inviteUser.svg
5
/TUICallKit/Components/assets/button/hangup.svg
6
/TUICallKit/Components/assets/button/desktop/minimize.svg
7
/TUICallKit/Components/assets/button/desktop/fullScreen.svg






Serial number
Resource Path
1
/TUICallKit/Components/assets/button/mobile/minimize.svg
2
/TUICallKit/Components/assets/button/hangup.svg
3
/TUICallKit/Components/assets/button/accept.svg
4
/TUICallKit/Components/assets/button/microphone-open.svg
5
/TUICallKit/Components/assets/button/speaker-open.svg
6
/TUICallKit/Components/assets/button/camera-close.svg
7
/TUICallKit/Components/assets/button/switchCamera.svg

Replacing ringtones

You can replace ringtones by replacing the three audio files in the TUICallKit/src/TUICallService/assets/ folder.
Filename
Description
phone_dialing.mp3
The sound of making a call
phone_ringing.mp3
The ringtone for incoming calls

Scheme 2: Custom UI Implementation

The features of TUICallKit are implemented based on the TUICallEngine SDK, which does not include UI elements. You can use TUICallEngine to implement your own UI. For detailed directions, refer to the documents below:
TUICallEngine integration guide
TUICallEngine APIs