Meeting Locale

Last updated Oct 19, 2026 RealtimeKit's UI Kit allows you to customize all the text within the video call interface. You can personalize the text to align with your specific locale needs.

Prerequisites

This page builds upon the Render Default Meeting UI & Build Your Own UI guides. Make sure you have read them first and understand how to use the default meeting UI components.

This page is not available for the iOS, Androidplatform.

WebMobile

ReactWeb ComponentsAngular

Customize the language pack

RealtimeKit's default language pack can be customized to match your application's locale requirements. You can override any text string used in the UI Kit components.

The React Native UI Kit uses a language dictionary object to store all UI strings. You can override any key by passing a partial dictionary to the useLanguage() function, then pass the result to the RtkMeeting component via the t prop.

Import the language utilities

RealtimeKit's default language pack can be imported like this:

<script type="module">
    import {
        useLanguage,
        defaultLanguage,
    } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui/dist/esm/index.js";
</script>

RealtimeKit's default language pack can be imported like this:

import { defaultLanguage, useLanguage } from "@cloudflare/realtimekit-react-ui";

RealtimeKit's default language pack can be imported like this:

import {
    defaultLanguage,
    useLanguage,
} from "@cloudflare/realtimekit-angular-ui";

import {
    defaultLanguage,
    useLanguage,
} from "@cloudflare/realtimekit-react-native-ui";

Create your custom language pack

To replace RealtimeKit's default locale with your own, create a custom language pack by spreading the defaultLanguage object and overriding specific keys:

<body>
    <rtk-meeting id="my-meeting"></rtk-meeting>

<script type="module">
        import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";
        import {
            useLanguage,
            defaultLanguage,
        } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui/dist/esm/index.js";

// Customize RealtimeKit's default locale object
        const myLanguagePack = useLanguage({
            ...defaultLanguage,
            mute_all: "Mute All Users",
            leave: "Exit Call",
            join: "Join Now",
        });

const init = async () => {
            const meeting = await RealtimeKitClient.init({
                authToken: "<participant_auth_token>",
            });

const meetingEl = document.getElementById("my-meeting");
            meetingEl.meeting = meeting;
            meetingEl.showSetupScreen = true;

// Pass custom language pack
            meetingEl.t = myLanguagePack;
        };

init();
    </script>
</body>

The useLanguage function takes in your custom locale object as an argument and generates a function that retrieves the value associated with the provided key.

import {
    RealtimeKitProvider,
    useRealtimeKitClient,
} from "@cloudflare/realtimekit-react";
import {
    RtkMeeting,
    defaultLanguage,
    useLanguage,
} from "@cloudflare/realtimekit-react-ui";
import { useEffect, useState } from "react";

function App() {
    const [meeting, initMeeting] = useRealtimeKitClient();
    const [authToken, setAuthToken] = useState("<participant_auth_token>");

// Customize RealtimeKit's default locale object
    const myLanguagePack = useLanguage({
        ...defaultLanguage,
        mute_all: "Mute All Users",
        leave: "Exit Call",
        join: "Join Now",
    });

useEffect(() => {
        if (authToken) {
            initMeeting({
                authToken: authToken,
            });
        }
    }, [authToken]);

return (
        <RealtimeKitProvider value={meeting}>
            <RtkMeeting showSetupScreen={true} meeting={meeting} t={myLanguagePack} />
        </RealtimeKitProvider>
    );
}

The useLanguage hook takes in your custom locale object as an argument and generates a function that retrieves the value associated with the provided key.

import { Component, OnInit } from "@angular/core";
import RealtimeKitClient from "@cloudflare/realtimekit";
import {
    defaultLanguage,
    useLanguage,
} from "@cloudflare/realtimekit-angular-ui";

@Component({
    selector: "app-meeting",
    template: `
        <rtk-meeting [meeting]="meeting" [t]="myLanguagePack"></rtk-meeting>
    `,
})
export class MeetingComponent implements OnInit {
    meeting: any;
    myLanguagePack: any;

async ngOnInit() {
        // Customize RealtimeKit's default locale object
        this.myLanguagePack = useLanguage({
            ...defaultLanguage,
            mute_all: "Mute All Users",
            leave: "Exit Call",
            join: "Join Now",
        });

this.meeting = await RealtimeKitClient.init({
            authToken: "<participant_auth_token>",
        });
    }
}

The useLanguage function takes in your custom locale object as an argument and generates a function that retrieves the value associated with the provided key.

Spread the defaultLanguage object and override specific keys. Pass the result to RtkMeeting via the t prop.

import {
  RtkMeeting,
  defaultLanguage,
  useLanguage,
} from '@cloudflare/realtimekit-react-native-ui';

function App() {
  const myLanguagePack = useLanguage({
    ...defaultLanguage,
    mute_all: 'Silenciar todo',
    leave: 'Salir',
    join: 'Unirse',
    participants: 'Participantes',
    chat: 'Chat',
    settings: 'Configuración',
  });

return (
    <RtkMeeting
      meeting={meeting}
      t={myLanguagePack}
      showSetupScreen={true}
    />
  );
}

The useLanguage function merges your overrides with the defaults. Any key you do not override keeps its English default value.

Use custom locale with UI provider

You can also pass the custom language pack to the UI provider component when building your own custom UI:

<body>
    <rtk-ui-provider id="ui-provider">
        <!-- Your custom UI components -->
    </rtk-ui-provider>

<script type="module">
        import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";
        import {
            useLanguage,
            defaultLanguage,
        } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui/dist/esm/index.js";

const myLanguagePack = useLanguage({
            ...defaultLanguage,
            mute_all: "Mute All Users",
        });

const meeting = await RealtimeKitClient.init({
            authToken: "<participant_auth_token>",
        });

const uiProvider = document.getElementById("ui-provider");
        uiProvider.meeting = meeting;
        uiProvider.t = myLanguagePack;
    </script>
</body>

import {
    RealtimeKitProvider,
    useRealtimeKitClient,
} from "@cloudflare/realtimekit-react";
import {
    RtkUIProvider,
    defaultLanguage,
    useLanguage,
} from "@cloudflare/realtimekit-react-ui";
import { useEffect, useState } from "react";

function App() {
    const [meeting, initMeeting] = useRealtimeKitClient();
    const [authToken, setAuthToken] = useState("<participant_auth_token>");

const myLanguagePack = useLanguage({
        ...defaultLanguage,
        mute_all: "Mute All Users",
    });

useEffect(() => {
        if (authToken) {
            initMeeting({
                authToken: authToken,
            });
        }
    }, [authToken]);

return (
        <RealtimeKitProvider value={meeting}>
            <RtkUIProvider meeting={meeting} t={myLanguagePack}>
                {/* Your custom UI components */}
            </RtkUIProvider>
        </RealtimeKitProvider>
    );
}

import { Component, OnInit } from "@angular/core";
import RealtimeKitClient from "@cloudflare/realtimekit";
import {
    defaultLanguage,
    useLanguage,
} from "@cloudflare/realtimekit-angular-ui";

@Component({
    selector: "app-meeting",
    template: `
        <rtk-ui-provider [meeting]="meeting" [t]="myLanguagePack">
            <!-- Your custom UI components -->
        </rtk-ui-provider>
    `,
})
export class MeetingComponent implements OnInit {
    meeting: any;
    myLanguagePack: any;

async ngOnInit() {
        this.myLanguagePack = useLanguage({
            ...defaultLanguage,
            mute_all: "Mute All Users",
        });

this.meeting = await RealtimeKitClient.init({
            authToken: "<participant_auth_token>",
        });
    }
}

Default language reference

RealtimeKit provides a comprehensive default language pack with all the text strings used throughout the UI Kit. You can override any of these keys to customize the text displayed in your meeting interface.

Here is the complete default language pack offered by RealtimeKit: